Enter
    Расширенный поиск
    Клавиша / esc

    HTML

    alt

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

    Время чтения: 5 мин

    Кратко

    Скопировано

    alt — один из атрибутов тега <img> в HTML. Он передаёт текстовую информацию о картинке, когда она не отображается на сайте. Например, у пользователя нестабильное интернет-соединение или выключено отображение картинок в браузере.

    По сути alt — это альтернативное текстовое описание содержания изображения. Отсюда и название атрибута – сокращение от «alternative».

    Как пишется

    Скопировано

    Если графика поддерживает или дополняет текст вокруг, кратко опишите в alt содержимое картинки:

            
          
          <img  src="dog.png"  alt="Шоколадный лабрадор в соломенной шляпе наслаждается  солнечной погодой на пляже. Рядом лежит кокос с трубочкой  и миска с собачьим кормом.">
          <img
  src="dog.png"
  alt="Шоколадный лабрадор в соломенной шляпе наслаждается
  солнечной погодой на пляже. Рядом лежит кокос с трубочкой
  и миска с собачьим кормом."
>

    Добавляйте в alt текст ссылки, когда картинка вложена в <a>:

            
          
          <a>  <img src="link-icon.svg" alt="Инструкция по заполнению профиля"></a>
          <a>
  <img src="link-icon.svg" alt="Инструкция по заполнению профиля">
</a>

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

    Нет ничего плохого в пустом alt, если у изображения нет смыслового значения. Пропустить alt можно в нескольких случаях:

    • аватарка — имя пользователя и так у нас уже есть;
    • превью к статье — уже есть заголовок, и этого будет достаточно;
    • иконки в кнопке — есть видимое или скрытое название кнопки.

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

    Плохие примеры:

            
          
          <img src="image.png" alt=" "><img src="image.png" alt="&nbsp;">
          <img src="image.png" alt=" ">
<img src="image.png" alt="&nbsp;">

    В примере две проблемы: пользователи не увидят картинку, если она сломалась или не подгрузилась, а скринридеры вообще не расскажут об изображении или объявят только роль элемента. Например, NVDA не скажет ничего, JAWS — «Графика без описания», а VoiceOver — название файла.

    Хороший пример с картинкой для красоты:

            
          
          <img src="img.png" alt="">
          <img src="img.png" alt="">

    Основные правила заполнения

    Скопировано

    В атрибут alt добавляют текстовый эквивалент того, что происходит на картинке. Ответьте на вопрос, что происходит на картинке или какое у неё назначение. Хорошо, если передадите и эмоции.

    Отталкивайтесь от остального содержимого страницы, но не повторяйте один текст. Допускаются ключевые слова из <h1> или title страницы, когда они поддерживают описание картинки и смотрятся органично. Следите за количеством ключевых слов и случайно не превратите описание в цепочку из них.

    Следите за правилами языка описания (пунктуацией, орфографией и другими) и не начинайте описание картинки со слов «картинка», «графика» или «изображение».

    Длина текста описания не меньше 3–4 слов и не больше 250 символов с пробелами. Оптимальный вариант – 5-6 слов. Максимальная рекомендуемая длина — 125 символов. Один из самых популярных скринридеров JAWS не любит длинные строки. Он может зачитать их как три картинки, хотя это было всего лишь одна длинная строка.

    alt и поисковики

    Скопировано

    SEO (Search Engine Optimization, поисковая оптимизация) — это развитие и продвижение сайта для попадания на первые строчки выдачи в поисковых системах по выбранным запросам (SERPs). Основная цель SEO — увеличить посещаемость сайта, узнаваемость бренда и, за счёт этого, заработать больше денег.

    alt в первую очередь нужен пользователям, однако картинки с качественными описаниями опосредованно увеличивают пользовательский трафик. Важно, что содержимое alt не считается важным фактором ранжирования.

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

    С точки зрения SEO незаполненный alt — не проблема. Так вы потеряете возможный трафик и потенциальных пользователей, но основные метрики это не заденет.

    В руководстве Google по поисковой оптимизации нет прямого упоминания о влиянии alt на положение сайта в выдаче, но есть предупреждение о неправильном использовании атрибута. В содержимом alt нет места продающим словам вроде «стоимость», «оформить», «купить» и другим. Также не стоит «спамить» ключевыми словами. Это потенциально понизит сайт в выдаче, а Google даже может пометить его как спам. Такая же проблема возникнет, если у всех картинок с одного сайта одинаковое описание.

    Читайте также