Что такое alt-текст у картинок и зачем он нужен

22.03.2022

953

Помните те времена, когда интернет был настолько медленным, что мы по несколько минут ждали, пока прогрузится картинка? В те времена пользователей с медленным интернетом всегда спасал тег альтернативного описания изображения.

Именно благодаря ему мы понимали что изображено на картинке еще до её загрузки. Времена прошли, интернет стал работать быстрее, но важность тега ALT сложно переоценить до сих пор. В этом руководстве мы разберем что это за тег, почему он важен и к каким картинкам он подходит, а к каким нет.

Зачем нужно альтернативное описание

Альтернативный текст на изображениях нужен в двух случаях: медленный интернет и плохое зрение. К сожалению, быстрый интернет добрался еще далеко не до всех уголков мира и если говорить о мобильном интернете в деревнях и небольших поселках, то там иногда даже 3G нет, что уж говорить о высокоскоростном интернете.

Как раз для таких пользователей, которые не могут быстро загрузить изображения и нужен альт текст.

Вторая категория - это люди, которые используют программы для распознавания контента на странице, например пользователи с нарушением в органах зрения.

Они открывают страницу и включают программу, которая зачитывает им контент на странице, включая альтернативный текст изображений.

Если у ваших изображений нет альтернативного текста, то очень вероятно, что программа зачитает название файла, а они как правило не особо содержат смысл.

Кстати, Google писал о важности тега ALT для подобного софта еще в своем руководстве по поисковой оптимизации для новичков.

Релевантность страницы

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

Поиск видит, все подписи и по ним понимает, что изображено на картинке.

6f053220dc42c9b55d29172b5b8f3a2f

Например, у вас есть статья про котят. Все картинки подписаны “Милые котята”. Что думает поиск? “В статье упоминаются котята, на картинке изображены котята, видимо статья действительно про котят”.

Если подписей нет, или они не релевантны, то “В статье упоминаются котята, но я не понимаю, что тут за изображения. Не факт, что на них котята”. Общая релевантность запросу ниже.

Оптимизация под Яндекс и Google картинки

У каждого уважающего себя поисковика есть отдельный поиск по изображениям. Например только Google Images обрабатывает 21% от всех поисковых запросов в мире. Это значит, вы можете найти трафик не только в основном поиске, но и в поиске по картинкам, но для этого, вам необходимо их оптимизировать.

Как заявляют в Google, alt-текст - это один из важнейших факторов ранжирования в Google Images, ну а мы предполагаем что и для Яндекс Картинок также.

ALT-текст может быть анкором

Если вы по какой-то причине решили сделать картинку ссылкой, то ALT-текст будет служить в качестве анкора.

Как заявляют поисковые системы:

“Если вы решили использовать изображение как ссылку, то alt-текст поможет нам больше узнать о странице, на которую вы ссылаетесь”.

То есть тут всё ровно также как и в текстовых ссылках.

Как добавить альтернативное описание к изображению

Тут всё зависит от того, где вы это делаете. Например, чтобы добавить alt в HTML-коде, нужно просто прописать его в тег img. Выглядеть это будет следующим образом:

featured e1401029309567

Если вы используете систему управления контентом, то там вы сможете прописать ALT при добавлении изображений.

Важно понимать, что альтернативное описание нужно далеко не всем изображениям на сайте. Например, у вас есть какие-то декоративные элементы, иконки, стрелки или линии, то им добавлять ALT совершенно не обязательно.

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

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

Создаем крутой ALT

С теорией разобрались, теперь перейдем к практике. У нас есть для вас несколько советов по составлению классного альтернативного текста, который точно понравится поисковым системам.

Не пишите много слов. Старайтесь описывать всё происходящее на картинке всего парой слов, так вы сделаете огромное одолжение пользователям с программой для чтения вслух.
Пишите ровно то, что на картинке. Ничего не придумывайте, старайтесь быть максимально точным.
Не перечисляйте ключи. Альт текст не для тупого перечисления ключевых фраз.
Не пишите, что на картинке картинка. “На изображении изображен котик” - пример очень плохого альт текста, все и так знаю что это изображение.
Не повторяйтесь. Не стоит писать что на картинке “Серый котик. Милый кот”. - смысла в этом нет.

Как выявить проблемы

Есть много сервисов для технического аудита сайта, но мы рекомендуем пользоваться оффлайн софтом на подобии Screaming Frog или Website Auditor. Вы даже сможете сделать это бесплатно, при условии, что у вас небольшой сайт до 500 страниц.

Программа найдет все ваши изображения на сайте и вынесет в отдельную графу картинки с отсутствующим альтернативным описанием. Ну а дальше всё просто - пропишите альты для каждой картинки.