Но чем он тогда важен? И как его можно использовать, чтобы улучшить поисковую оптимизацию и повысить уровень удобства пользователей?
Из этого руководства вы узнаете:
- Чем важен alt-текст
- Как добавить alt-текст к изображениям
- Почему не стоит добавлять alt-текст ко всем изображениям подряд
- Как составить хороший alt-текст
- Примеры хорошего и плохого alt-текста
- Как найти и исправить проблемы с атрибутами alt
Alt-текст является важным фактором по четырем основным причинам.
1. Alt-текст повышает уровень доступности
Миллионы людей страдают от нарушений работы органов зрения и могут пользоваться программами для чтения информации с экрана, чтобы потреблять онлайн-контент. Такие программы преобразуют контент на экране, в том числе изображения, в звук.
Изображения без замещающего текста создают определенные проблемы для этих программ, поскольку они не позволяют полноценно передать пользователю содержимое страницы. Обычно программы пропускают такие изображения или, хуже того, зачитывают длинные и бесполезные названия файлов.
Google рассказывает о важности alt-текста для тех, кто пользуется программами для чтения информации с экрана, в своем Руководстве по поисковой оптимизации для начинающих.
2. Alt-текст может улучшить «тематическую релевантность»
Google изучает слова на странице, чтобы определить ее тематику.
К примеру, если на странице упоминаются пудели, лабрадоры и ретриверы, Google поймет, что на ней представлена информация о породах собак.
Как это связано с изображениями?
Дело в том, что иногда контекст «спрятан» в изображениях, которые Google не может распознать.
Использование alt-текста помогает поисковику «увидеть» эти изображения, а значит, лучше понять вашу страницу и ее содержимое.
3. Alt-текст может повысить рейтинг страницы в Google Images
Google Images — вторая по величине поисковая система в мире. Она выполняет обработку 20,45 % всех поисковых запросов в сети Интернет, что больше доли YouTube, Bing и прочих поисковых систем вместе взятых.
Это значит, что у вас есть возможность привлечь трафик с Google Images.
Просто взгляните на количество переходов на блог Ahrefs из Google Images за последние три месяца:
Джон Мюллер из Google говорит, что alt-текст — это важная часть оптимизации для Google Images:
Alt-текст чрезвычайно полезен для Google Images — если вы хотите, чтобы ваши изображения попали в их выдачу. Даже при использовании «ленивой загрузки» вы знаете, какое изображение будет загружено, поэтому как можно раньше добавьте к нему эту информацию и проверьте, как она отрисовывается.
— John (@JohnMu) September 4, 2018
4. Alt-текст служит якорным текстом для ссылок-изображений
Якорный текст — это кликабельный текст ссылки, позволяющей перейти с одной страницы на другую. Google использует его, чтобы лучше понять тематику той страницы, на которую ведет ссылка.
Но не все ссылки являются текстовыми — некоторые закреплены за изображениями.
Google заявляет:
Если вы все-таки решите использовать изображение в качестве ссылки, приведение для него alt-текста поможет Google больше узнать о странице, на которую вы ссылаетесь. Представьте, что вы пишите якорный текст для текстовой ссылки.
Просто добавьте атрибут alt в тег <img> в коде HTML.
Изображение с атрибутом alt:
<img src=“пирог.jpg” alt=“пирог с мясом и пивом”>
Если вы пользуетесь современной системой управления контентом (CMS), то в ней наверняка можно добавить alt-текст, не забираясь в сам код HTML.
Например, в WordPress, когда вы добавляете изображение к странице или определенной записи, на экране появляется поле для alt-текста:
В других CMS это делается схожим образом.
Вот инструкции для некоторых из наиболее популярных CMS:
- Добавление alt-текста к изображениям в Squarespace
- Добавление alt-текста к изображениям в Wix
- Добавление alt-текста к изображениям в Shopify
Нет, это распространенное заблуждение.
Если изображение предназначено для декоративных целей и не несет важной информации, добавлять к нему alt-текст не следует.
Например, на некоторых сайтах для разделения контента используются пиктограммы:
Они нужны только лишь для красоты, поэтому добавлять к ним alt-текст не нужно. Такой текст будет только раздражать посетителей с программами для чтения информации с экрана, не добавляя при этом никакой «ценности для SEO».
То же самое относится к фоновым или стоковым изображениям наподобие этого:
Наличие alt-текста «ванна и свеча» не принесет пользы читателям с нарушениями зрения, поскольку эта информация им ни к чему. Лучше будет, если программа для чтения полностью проигнорирует это изображение.
Но есть один важный момент…
Если изображение не требует наличия alt-текста, тогда лучше всего добавить пустой атрибут alt. Это нужно сделать, поскольку некоторые программы для чтения информации с экрана при отсутствии alt-текста читают названия файлов, в то время как большинство из них пропускает пустой alt-текст.
Вот как это должно выглядеть:
<img src="разделитель.gif" alt="">
Узнайте больше из этого руководства от WebAIM.
Alt-текст — это не квантовая физика. Четко выполняйте приведенные ниже пять рекомендаций, и все будет хорошо.
- Будьте немногословны. Пространный alt-текст будет действовать на нервы тем, кто пользуется программами для чтения. Используйте минимум слов (если без длинного описания все-таки не обойтись, используйте атрибут longdesc).
- Будьте точны. Главная задача — описать изображение словами.
- Не забивайте alt-текст ключевыми фразами. Это не место для размещения ключевых фраз.
- Не объявляйте, что это изображение. Не нужно начинать описания со слов «Изображение…» или «Фотография…». И Google, и программы для чтения информации с экрана способны сделать это сами.
- Избегайте избыточности. Не повторяйте информацию, которая уже имеется в контексте изображения. Например, если у вас на странице есть фотография Стива Джобса, а прямо под ней написано «Стив Джобс», то добавлять это описание в alt-текст не нужно. Google должен и так понять, что это подпись к фотографии.
Кроме того, не забывайте добавлять alt-текст к кнопкам на используемых формах. Иначе программы для чтения могут пропустить их, и часть пользователей не сможет должным образом взаимодействовать с вашим сайтом.
Давайте проверим, насколько хорошо мы поняли приведенные выше правила, рассмотрев несколько примеров.
Плохо: <img src=“cheesecake.png” alt=“фотография чизкейка”>
Нормально: <img src=“cheesecake.png” alt=“чизкейк”>
Хорошо: <img src=“cheesecake.png” alt=“чизкейк с клубникой”>
Идеально: <img src=“cheesecake.png” alt=“чизкейк с клубникой и кремом”>
Плохо: <img src=“steve-jobs.png” alt=“стив джобс apple iphone ipad mac”>
Нормально: <img src=“steve-jobs.png” alt=“стив джобс”>
Хорошо: <img src=“steve-jobs.png” alt=“основатель apple, стив джобс”>
Идеально: <img src=“steve-jobs.png” alt=“основатель apple, стив джобс, демонстрирует iphone 4”>
Плохо: <img src=“amp.png” alt=“изображение4”>
Нормально: <img src=“amp.png” alt=“усилитель orange”>
Хорошо: <img src=“amp.png” alt=“усилитель orange — 30 ватт”>
Идеально: <img src=“amp.png” alt=“orange AD30HTC — усилитель 30 ватт”>
Обратите внимание на то, что в последнем примере в текст включен номер модели. Это хорошее решение, особенно для изображений на страницах товаров в интернет-магазинах.
Существует множество служб, которые могут просканировать ваш сайт и найти недостающие атрибуты alt; один из них — Site Audit от Ahrefs.
Но отсутствие alt-текста — это не обязательно проблема, ведь он требуется не для всех изображений.
К примеру, взгляните на эти ссылки с отсутствующими атрибутами alt:
Даже по названиям ясно, что для них alt-текст не нужен. Это декоративные изображения, а значит, нам хотелось бы, чтобы программы для чтения их пропускали.
Поэтому вместо того, чтобы прочесывать свой сайт и корпеть над каждым недостающим атрибутом alt (а их обычно довольно много), полезнее проверить и улучшить alt-текст на тех страницах, у которых уже есть трафик.
На это есть две веские причины:
- Их уже читают люди с нарушениями работы органов зрения. У 2,4 % граждан США нарушено зрение. Это приблизительно каждый 42‑й человек; из чего следует, что если вашу страницу посещают 10 000 человек в месяц, то 240 из них не могут полноценно потребить ваш контент.
- Они потенциально могут получать больше трафика. Alt-текст может помочь изображениям подняться выше в выдаче Google Images, а это приведет к повышению трафика. Даже прирост на 1 % для страницы с 10 000 посещений в месяц означает 100 дополнительных посетителей.
Итак, какова же последовательность действий:
Шаг 1. Определите страницы с наибольшим естественным трафиком
Воспользуйтесь сервисами Google Analytics, Google Search Console или отчетом «Top pages» («Самые популярные страницы») в Site Explorer от Ahrefs.
Шаг 2. Проверьте свои атрибуты alt
Установите бесплатное расширение для Chrome Alt Text Tester, откройте свою наиболее посещаемую страницу и активируйте данное расширение.
Расширение будет отображать alt-текст при наведении курсора на изображение.
Если атрибут alt отсутствует, расширение сообщит об этом.
Проверьте alt-текст для нескольких изображений на странице. Вскоре у вас появится представление о том, где они оптимизированы хорошо, где — плохо, а где вообще не оптимизированы.
Например, понадобится всего несколько секунд, чтобы пролистать эту статью и убедиться в том, что все изображения в ней хорошо оптимизированы…
…или сделать обратный вывод для этой страницы на сайте The Mirror:
Шаг 3. Сделайте то же самое с другими страницами
Выполните ту же процедуру для самых посещаемых страниц вашего сайта. В ходе работы вы поймете, хорошо ли оптимизирован alt-текст на вашем сайте, или над ним еще нужно поработать.
Это не должно занять много времени, поскольку большинство сайтов получают основную долю трафика всего от нескольких страниц.
Например, 51 % месячного естественного трафика блогу Ahrefs приносят всего десять записей…
…что позволяет нам легко и быстро проверить и оптимизировать alt-текст для наиболее часто посещаемых страниц.
Напоследок
Улучшение alt-текста является крайне важным аспектом, однако это не единственный пункт в программе поисковой оптимизации изображений. Также нужно оптимизировать названия файлов, использовать адаптивные изображения, предусмотреть «ленивую загрузку» и сделать многое другое.
Узнайте об этом больше из нашего списка 12 практических рекомендаций по поисковой оптимизации изображений.
Перевела Кирик Наталья, владелец контент агентства WordFactory.ua
