Чи важливий атрибут ALT для зображень?

Що таке атрибут ALT?

Атрибут ALT, або альтернативний текст, — це опис зображення, який у разі, якщо зображення зламане або не може бути зчитане (наприклад, ботами чи користувачами з порушеннями зору), надається на підтримку нашого вмісту.

Для чого потрібен атрибут ALT у зображенні?

Головна мета атрибута ALT — забезпечити вебдоступність для тих користувачів, які не можуть належно бачити зображення. Приклад — користувачі, що покладаються на скрінрідери, тобто, як підказує назва, програми, які зачитують вголос вміст екрана.

Коли такий рідер натрапляє на зображення, оскільки він не може описати саме зображення, він використовує альтернативний текст, аби надати користувачу контекст того, що видно на фото. Так користувач може коректно переглядати вебсайт, не «втрачаючи» інформацію із зображень.

Чому тег ALT важливий для SEO?

Наша роль як SEO-консультантів — надавати Google якомога більше інформації, щоб він міг зрозуміти наш вміст і, відповідно, показувати його правильним користувачам.

Хоч це й правда, що Google значно поліпшив свій обробник зображень і, безперечно, може загалом розпізнавати вміст зображення, завжди варто, аби наші зображення містили атрибут ALT. Так ми гарантуємо, що Google має всю інформацію про фото і може зрозуміти його значення в межах нашого вмісту.

Як ми зазначили, найкраще використовувати їх правильно і не намагатися «обманути» Google нечесним способом. Інакше кажучи, немає сенсу ставити фото машини у вмісті й писати «дешеві кросівки» як альтернативний текст. Вони не пов'язані й можуть викликати сигнали тривоги (особливо якщо альтернативний текст використовують для keyword stuffing).

Використовуйте фото та альтернативні тексти, пов'язані з вашим вмістом. Найкраще завжди дотримуватися цього правила і додавати в альтернативний текст основне ключове слово, другорядне, якийсь семантичний термін тощо. Зазвичай у вас не виникне з цим проблем, оскільки ви зможете зробити це природно.

Як додати тег ALT до зображення

На цьому етапі ви, ймовірно, питаєте себе: Як додати цей альтернативний текст на свій вебсайт?

Не хвилюйтеся, ми тут, аби допомогти. Звертайте увагу, бо зараз пройдемося по тому, як це зробити в двох найпопулярніших CMS:

Як додати атрибут ALT до зображення у WordPress

У цьому випадку все досить просто. Достатньо перейти в нашу медіабібліотеку, обрати фото та заповнити поле, відведене для альтернативного тексту:

Щоб надати трохи більше контексту, ми могли б навіть заповнити підпис та опис, як показано на зображенні. Окрім того, ми можемо зробити це безпосередньо в редакторі статті в момент додавання зображення.

Як додати атрибут ALT до зображення в PrestaShop

У PrestaShop у нас немає медіабібліотеки чи окремого поля для цього.

То як же його додати?!

Не хвилюйтеся, поясняємо хитрість. Усе, що вам треба, — заповнити поле підпису всередині зображень товару:

У більшості тем те, що ви введете в поле Caption, буде задано як атрибут ALT зображення, яке ви редагуєте.

Проблема в тому, що в цій CMS додавання атрибутів ALT може бути дуже виснажливим, оскільки доводиться робити це по одному. Тому в нашому посібнику з SEO у PrestaShop ми згадували модуль, який дає змогу швидко додати ALT до всіх зображень.

Як переглянути атрибут ALT зображень

Тепер пояснимо, як перевірити, чи має вебсайт атрибути ALT на своїх зображеннях. Є два варіанти:

Через інспектор

Якщо ви користуєтеся Chrome, клікнувши правою кнопкою всередині будь-якого вебсайту, ви відкриєте інспектор. У ньому достатньо виділити зображення та переглянути ALT:

Трохи заплутано? Можливо, але не хвилюйтеся, ми принесли вам ще один, простіший варіант:

Через розширення Chrome

У цьому випадку ми рекомендуємо встановити SEO-розширення для Chrome під назвою Web Developer. Маючи його, достатньо клікнути на іконку шестерні та обрати images > Display Alt Attributes:

Активувавши цю опцію, ви побачите, що поряд із кожним зображенням є невеликий tooltip з атрибутом ALT кожного зображення:

Висновок

Як ми побачили, атрибути ALT — це SEO-фактор, який часто оминають увагою, але він може дати вам додатковий поштовх у вашій SEO-стратегії.

Не забувайте завжди обирати фото, яке відповідає тексту, аби користувач не плутався, побачивши його, та писати альтернативний текст, що є описовим і релевантним як для користувача, так і для нашого доброго друга Google.

Як завжди, чекатимемо ваших запитань у коментарях :)