Що таке alt текст? 

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

Alt текст прописується в HTML-коді або в налаштуваннях системи керування контентом. Зазвичай він непомітний для користувача. Найчастіше цей елемент з’являється в інтерфейсі, коли браузер не може завантажити мультимедійні елементи через збій сервера чи низьку швидкість інтернет-з’єднання. 

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

Чому alt текст має значення? 

Одна з поширених помилок SEO-початківця — взагалі забувати про альтернативний текст. Вона здається незначною, однак через неї можна отримати серйозні проблеми, особливо якщо сайт побудовано навколо мультимедійного контенту. Розглянемо механізми впливу цього елементу на пошукову оптимізацію. 

Інклюзивність 

Один із пріоритетів сучасних версій пошуковиків — рівні можливості доступу до інтернету для всіх. Роботи автоматично підвищують рейтинг сайтів, адаптованих для людей із обмеженими можливостями. alt текст — один із ключових інструментів інклюзивності для людей з послабленим зором. Він дає змогу отримати всю необхідну інформацію за допомогою синтезу мовлення. Отже, звідси можна зробити перший висновок: альтернативний опис має бути коротким, але максимально змістовним. 

Користувальницький досвід (UX) 

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

Уявіть ситуацію: на головній сторінці вашого сайту зникли кнопки входу та реєстрації. Неприємно, так, але ви все ще можете зберегти значну частину конверсій. Для цього потрібно коректно прописати alt текст до зображень. Це задовольнить як відвідувачів, так і пошукову систему, яка поставить вам додаткові бали за користувальницький досвід. Ще один висновок: альтернативний опис має бути максимально корисним та зрозумілим. 

Трафік за пошуком зображень 

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

Багато чого залежить саме від alt тексту. Наприклад, ви розмістили дуже гарне зображення з заходом сонця над морським узбережжям. Його можна описати по-різному:

1. Захід сонця над пляжем — для сайту зі стоковими картинками.
2. Мальовничий захід у Флориді — для інформаційної сторінки.
3. Вигляд на море з готелю — для туристичного ресурсу. 

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

Наскільки важливим є alt текст для SEO?

Необхідність зробити інтернет доступним для всіх жителів планети була записана ще в протоколі конференції W3C 1999 року. Автори пропозиції рекомендували додавати альт-теги в HTML, щоб передавати суть зображення як для людей з обмеженими можливостями, так і для користувачів із повільним інтернет-з’єднанням. Цей елемент пройшов випробування часом і зараз вважається обов’язковим для всіх вебресурсів. 

Забувши чи проігнорувавши alt текст, ви дасте пошуковим системам сигнал про те, що вас не цікавить ані інклюзивність, ані користувальницький досвід. Це призведе до штрафу — з вас знімуть кілька балів у ранжуванні сторінки. Маючи однакові SEO-характеристики з конкурентом, ви отримаєте нижчу позицію у пошуковій видачі. 

Відповідно, це означатиме менший трафік, нижчий рівень конверсії та даремно витрачений бюджет оптимізації. Отже, варто врахувати рекомендацій консорціуму з розвитку інтернету (W3C). Щоб отримати більші шанси на успіх у будь-якій галузі, обов’язково прописуйте alt текст для всіх мультимедійних елементів, які цього потребують. 

Як додавати альтернативний опис для зображень на сайті?

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

Згідно з рекомендаціями W3C, потрібно використовувати такий синтаксис:

<img alt=”text”>,

де text — альтернативний опис до зображення. 

Тег «alt» використовується разом із посиланням на зображення та обмеженням його розмірів. Приклад повного рядка HTML-коду виглядатиме так:

<img src=”your_image.jpg” alt=”Majestic sunset in California” width=”320″ height=”240″>.

Важливо! Якщо бажаєте зробити інструкцію для інтерактивного елементу, яка з’являтиметься після наведення курсору на зображення, потрібен тег «title». Синтаксис для нього виглядає так:

<img title=”text”>. При цьому «title» не вважається альтернативою «alt». Його наявність жодним чином не впливає на SEO-оптимізацію. Єдина перевага, яку він дає, — позитивний користувальницький досвід. 

Якщо ви користуєтесь CMS, є більш зручний спосіб додавати alt текст у код сайту. Розглянемо послідовність дій у популярних системах керування контентом. 

Як додавати альтернативний опис в WordPress? 

1. Клацнути лівою кнопкою миші на зображення — у правій частині екрана з’явиться панель керування. 
2. Знайти порожнє поле під написом «Image Settings». 
3. Ввести alt текст. 
4. Натиснути кнопку «Update» у верхньому правому куті екрана. 

Як додавати альтернативний опис у HubSpot? 

1. Клацнути лівою кнопкою миші на зображення. 
2. Натиснути кнопку «Edit image» у вигляді олівця. 
3. Знайти порожнє поле під написом «Alt text». 
4. Ввести alt текст. 
5. Натиснути кнопку «Apply» внизу спливального меню. 

Як додавати альтернативний опис у Joomla?

1. Клацнути правою кнопкою миші на зображення. 
2. Натиснути кнопку «Edit image».
3. У відкритому меню знайти порожнє поле поряд із написом «Image Description». 
4. Ввести alt текст. 
5. Натиснути кнопку «Update», розташовану праворуч унизу. 

Найкращі практики написання alt тексту для зображень 

Сама по собі наявність цього елементу ще не дає переваг ресурсу. Щоб ефективно використовувати alt текст у SEO, потрібно знати, як правильно його формувати. І тут стануть у пригоді найкращі практики досвідчених оптимізаторів. 

Будьте лаконічними

Інженери W3C рекомендують обмежуватися 125 символами з пробілами. Довші підписи можуть некоректно відтворюватися за відсутності зображення. Окрім того, пошукові системи вважають їх спамом та спробою порушення правил чесної конкуренції. Отже, розтягуючи альтернативний опис до картинки, ви ризикуєте погіршити користувальницький досвід та отримати штраф під час індексації сторінки. 

Пишіть по суті 

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

Розумно використовуйте ключовики

Зібрана семантика знадобиться не тільки для оптимізації основної частини текстового вмісту, а й для написання альтернативних описів. Обов’язково додавайте в них ключові слова та фрази, однак не спамте. Окрім того, використовуйте короткі словосполучення без комерційних елементів на кшталт «ціна», «купити» та «замовити» — їх також можуть негативно сприймати пошукові роботи. Наприклад, «номери готелю в туристичній зоні Ібіци». Погані приклади: «готельні номери в готелі на Ібіці», «замовити номер у готелі на Ібіці». 

Описуйте зображення якомога змістовніше 

Подумайте про базові сценарії, в яких використовується альтернативний опис. Це або проблеми з завантаженням картинки, або робота з синтезом мовлення. Уявіть, що ви пояснюєте суть зображення іншій людині, не маючи перед очима засобів демонстрації. Складіть першу версію опису, спростіть її, перечитайте знову та спробуйте знайти потенціал для оптимізації. 

Якщо йдеться про зображення статичного об’єкта, достатньо назвати його та дати дві-три характеристики. Хороший приклад alt тексту: «червона коротка сукня з тонкими бретельками». Якщо в картинці є динаміка, спочатку назвіть основний об’єкт, а потім згадайте дію та місце, наприклад: «сірий голуб летить поміж будинками в місті». 

Обов’язково додавайте контекст

Можна просто вказати, що на сайті зображено чоловіка середнього віку в білій сорочці та піджаку. Але ви навряд чи так привернете увагу користувачів. Краще конкретизувати: «Ілон Маск під час презентації SpaceX». 

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

Не ігноруйте функціональні кнопки 

Щоб забезпечити позитивний користувальницький досвід та доступність, alt текст повинен супроводжувати всі інтерактивні елементи сторінки, наприклад:

1. Вхід в особистий профіль. 
2. Реєстрацію.
3. Збереження персональних даних.
4. Надсилання запиту. 
5. Купівлю. 
6. Додавання товару в «кошик». 
7. Замовлення консультації.
8. Зворотний зв’язок. 

Навіть якщо мультимедійні файли нормально не завантажаться, користувач повинен мати доступ до всіх функцій через текстові посилання з докладним описом. 

Ще раз перевіряйте опис 

Знаючи, що таке alt текст, ви розумієте його важливість для пошукової оптимізації. Він не повинен містити жодних помилок. Усього одна літера не на своєму місці — і сервіс синтезу мовлення некоректно відтворюватиме опис, що погіршить користувальницький досвід для багатьох відвідувачів. 

Ігноруйте опис деяких зображень 

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

Деякі зображення додаються на сайт просто «для краси», безпосередньо не стосуються контенту та не використовуються в інтерфейсі. Спеціалісти радять вставляти їх за допомогою CSS, а не HTML — така практика позитивно впливає на пошукову оптимізацію. 

Однак іноді (наприклад, через технічні обмеження певної платформи) доводиться користуватися традиційними методами. В такому випадку інженери W3C радять додавати порожній тег опису: 

<img alt=” “>. Це не вважається помилкою. Ба більше, системи перетворення тексту на мовлення ігнорують таку примітку, тому вона не заважає користувачам з обмеженими можливостями. 

Приклади alt текстів: хороші та невдалі 

Погано: Ейфелева вежа.

Краще: Ейфелева вежа вигляд знизу.

Оптимально: Ейфелева вежа вигляд знизу з Марсового поля в хмарний день. 

У цьому прикладі alt тексту згадки основного об’єкта недостатньо. Існують мільйони фотографій Ейфелевої вежі, тому кількох слів замало. Буде добре, якщо ви зазначите ракурс, з якого зроблено знімок. А в ідеалі варто додати контекст — місце, час доби та погоду. Погодьтесь, остання фраза дає вашій уяві змогу працювати на повну потужність. 

Погано: ноутбук.

Краще: ноутбук Microsoft Surface.

Оптимально: відкритий блакитний ноутбук Microsoft Surface на мармуровому столі. 

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

Погано: пошук ключових слів.

Краще: пошук ключових слів у Serpstat.

Оптимально: звіт про трафік, конференцію складність та СРС в інструменті пошуку ключових слів Serpstat. 

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

Alt текст для складних зображень 

Консорціум W3C також пропонує рекомендації щодо доступності ключових елементів вебсторінки. Для них діють особливі правила. Їхній опис повинен надавати інформацію швидше про функцію, ніж про зміст. 

Іконки 

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

Картинки з посиланнями 

Описуйте вміст сторінки, на яку перейде відвідувач, клацнувши на зображення. Наприклад, картинка зі знаком оклику в трикутнику веде до розділу з акційними продуктами. Знаючи, що таке альт-теги, очевидним рішенням було б написати «табличка зі знаком оклику». Але натомість краще вставити текст «перейти до опису акції на бензинові генератори та вибрати продукти в каталозі».  

Складні зображення 

Інфографіка, діаграми, таблиці тощо. Для них спеціалісти W3C рекомендують використовувати комбінацію звичайного та alt тексту. Альтернативний опис міститиме заголовок та основну ідею матеріалу. А подробиці та висновки краще вказати в звичайному текстовому абзаці на тій самій сторінці. 

Важливо також уникати використання зображень з великим обсягом тексту. Вони можуть бути недоступними багатьом відвідувачам. Якщо ви хочете отримати стильне оформлення сторінки, скористайтесь плагінами до CMS або сучасними засобами розмітки. 

Невидимий помічник — alt текст для зображень 

Прямуючи до Web3, спільнота розробників створює інтернет, доступний кожному мешканцю  планети незалежно від його фізіологічних, культурних, територіальних чи інших особливостей. У цьому їй допомагають пошукові системи, які встановлюють пріоритет для сайтів, які дотримуються стандартів інклюзивності. Саме тому значення alt тексту в SEO важко переоцінити. 

Правильний альтернативний опис для зображення підсилює стратегію оптимізації, збільшує трафік та поліпшує користувальницький досвід. Забувши або проігнорувавши його, ви ризикуєте втратити свої позиції у пошуковій видачі. Щоб уникнути такої проблеми, варто користуватися спеціалізованими інструментами для технічного аудиту сайту, які пропонують Moz, Serpstat, Ahrefs, Sitechecker та інші популярні платформи диджитал-маркетингу. 

Поширені питання 

Що таке alt текст? 

Це напис, який відтворюється на сторінці замість зображення, якщо браузер не може завантажити мультимедійні елементи. Він також використовується інструментами перетворення тексту на мовлення. 

Чому alt текст для зображення має велике значення? 

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

Як alt текст впливає на SEO? 

Відсутність цього елементу свідчить про недостатню увагу до інклюзивності та користувальницького досвіду. Це призводить до зниження рейтингу сторінки в пошуковій видачі. 

Яким має бути хороший alt текст? 

Альтернативний опис повинен бути коротким, але змістовним. Створюючи його, наводьте контекст, уникайте помилок та розумно використовуйте ключовики. В описі кнопок та інших інтерактивних елементів обов’язково вказуйте їхні функції.