Alt-текст для SEO: как оптимизировать изображения

Avatar
Глава отдела контента в Ahrefs (проще говоря, я отвечаю за то, чтобы каждый пост в блоге был КРУТЫМ).
Статистика статьи
  • Ссылающиеся веб-сайты 2
Данные из Контент Эксплорер

Показывает, сколько различных веб-сайтов ссылаются на этот контент. Как правило, чем больше сайтов ссылаются на вас, тем выше вы ранжируетесь в Google.

Показывает ежемесячный рассчетный поисковый трафик на эту статью по данным Ahrefs. Фактический поисковый трафик (по данным Google Analytics) обычно в 3–5 раз больше.

Количество ретвитов этой статьи в Twitter.

    Alt-текст (замещающий текст) описывает изображение на веб-странице. Он находится в коде HTML и, как правило, не отображается на самой странице.

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

    Из этого руководства вы узнаете:

    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 за последние три месяца:

    1 search console image clicks 1

    Джон Мюллер из Google говорит, что alt-текст — это важная часть оптимизации для Google Images:

    4. Alt-текст служит якорным текстом для ссылок-изображений

    Якорный текст — это кликабельный текст ссылки, позволяющей перейти с одной страницы на другую. Google использует его, чтобы лучше понять тематику той страницы, на которую ведет ссылка.

     

    Но не все ссылки являются текстовыми — некоторые закреплены за изображениями.

    Google заявляет:

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

     

    Просто добавьте атрибут alt в тег <img> в коде HTML.

    Изображение с атрибутом alt:

    <img src=“пирог.jpg” alt=“пирог с мясом и пивом”>

    Если вы пользуетесь современной системой управления контентом (CMS), то в ней наверняка можно добавить alt-текст, не забираясь в сам код HTML.

    Например, в WordPress, когда вы добавляете изображение к странице или определенной записи, на экране появляется поле для alt-текста:

    2 alt text wordpress 1

    В других CMS это делается схожим образом.

    Вот инструкции для некоторых из наиболее популярных CMS:

    Нет, это распространенное заблуждение.

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

    Например, на некоторых сайтах для разделения контента используются пиктограммы:

    3 icons 1

    Они нужны только лишь для красоты, поэтому добавлять к ним alt-текст не нужно. Такой текст будет только раздражать посетителей с программами для чтения информации с экрана, не добавляя при этом никакой «ценности для SEO».

    То же самое относится к фоновым или стоковым изображениям наподобие этого:

    4 stock image 1

    Наличие alt-текста «ванна и свеча» не принесет пользы читателям с нарушениями зрения, поскольку эта информация им ни к чему. Лучше будет, если программа для чтения полностью проигнорирует это изображение.

    Но есть один важный момент…

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

    Вот как это должно выглядеть:

    <img src="разделитель.gif" alt="">

    Узнайте больше из этого руководства от WebAIM.

    Alt-текст — это не квантовая физика. Четко выполняйте приведенные ниже пять рекомендаций, и все будет хорошо.

    • Будьте немногословны. Пространный alt-текст будет действовать на нервы тем, кто пользуется программами для чтения. Используйте минимум слов (если без длинного описания все-таки не обойтись, используйте атрибут longdesc).
    • Будьте точны. Главная задача — описать изображение словами.
    • Не забивайте alt-текст ключевыми фразами. Это не место для размещения ключевых фраз.
    • Не объявляйте, что это изображение. Не нужно начинать описания со слов «Изображение…» или «Фотография…». И Google, и программы для чтения информации с экрана способны сделать это сами.
    • Избегайте избыточности. Не повторяйте информацию, которая уже имеется в контексте изображения. Например, если у вас на странице есть фотография Стива Джобса, а прямо под ней написано «Стив Джобс», то добавлять это описание в alt-текст не нужно. Google должен и так понять, что это подпись к фотографии.

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

    Давайте проверим, насколько хорошо мы поняли приведенные выше правила, рассмотрев несколько примеров.

    strawberry cheesecake with cream

    Плохо: <img src=“cheesecake.png” alt=“фотография чизкейка”>

    Нормально: <img src=“cheesecake.png” alt=“чизкейк”>

    Хорошо: <img src=“cheesecake.png” alt=“чизкейк с клубникой”>

    Идеально: <img src=“cheesecake.png” alt=“чизкейк с клубникой и кремом”>

    apple founder, steve jobs, holding the iphone 4

    Плохо: <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”>

    orange AD30HTC - 30 watt amplifier

    Плохо: <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.

    5 sa alt tags 1

    Но отсутствие alt-текста — это не обязательно проблема, ведь он требуется не для всех изображений.

    К примеру, взгляните на эти ссылки с отсутствующими атрибутами alt:

    6 no alt text needed 1

    Даже по названиям ясно, что для них alt-текст не нужен. Это декоративные изображения, а значит, нам хотелось бы, чтобы программы для чтения их пропускали.

    Поэтому вместо того, чтобы прочесывать свой сайт и корпеть над каждым недостающим атрибутом alt (а их обычно довольно много), полезнее проверить и улучшить alt-текст на тех страницах, у которых уже есть трафик.

    На это есть две веские причины:

    1. Их уже читают люди с нарушениями работы органов зрения. У 2,4 % граждан США нарушено зрение. Это приблизительно каждый 42‑й человек; из чего следует, что если вашу страницу посещают 10 000 человек в месяц, то 240 из них не могут полноценно потребить ваш контент.
    2. Они потенциально могут получать больше трафика. Alt-текст может помочь изображениям подняться выше в выдаче Google Images, а это приведет к повышению трафика. Даже прирост на 1 % для страницы с 10 000 посещений в месяц означает 100 дополнительных посетителей.

    Итак, какова же последовательность действий:

    Шаг 1. Определите страницы с наибольшим естественным трафиком

    Воспользуйтесь сервисами Google Analytics, Google Search Console или отчетом «Top pages» («Самые популярные страницы») в Site Explorer от Ahrefs.

    7 top pages ahrefs 1

    Шаг 2. Проверьте свои атрибуты alt

    Установите бесплатное расширение для Chrome Alt Text Tester, откройте свою наиболее посещаемую страницу и активируйте данное расширение.

    Расширение будет отображать alt-текст при наведении курсора на изображение.

    8 alt text chrome 1

    Если атрибут alt отсутствует, расширение сообщит об этом.

    9 alt text missing 1

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

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

    …или сделать обратный вывод для этой страницы на сайте The Mirror:

    Шаг 3. Сделайте то же самое с другими страницами

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

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

    Например, 51 % месячного естественного трафика блогу Ahrefs приносят всего десять записей…

    1

    …что позволяет нам легко и быстро проверить и оптимизировать alt-текст для наиболее часто посещаемых страниц.

    Напоследок

    Улучшение alt-текста является крайне важным аспектом, однако это не единственный пункт в программе поисковой оптимизации изображений. Также нужно оптимизировать названия файлов, использовать адаптивные изображения, предусмотреть «ленивую загрузку» и сделать многое другое.

    Узнайте об этом больше из нашего списка 12 практических рекомендаций по поисковой оптимизации изображений.

    Перевела Кирик Наталья, владелец контент агентства WordFactory.ua

    • Ссылающиеся веб-сайты 2
    Данные из Контент Эксплорер