Атрибут alt у изображений: как заполнять правильно

Атрибут alt — короткое текстовое описание изображения в коде страницы. Он пишется один раз при вёрстке и потом работает сразу на три вещи: доступность сайта, поиск по картинкам и поведение страницы, когда изображение не загрузилось.

Заполняют его при этом чаще всего плохо: либо пропускают, либо забивают ключевыми словами. Разберём, как выглядит нормальный вариант в разных ситуациях.

Три задачи, которые решает alt

Доступность. Программы чтения с экрана зачитывают содержимое alt вслух. Для человека, который пользуется сайтом без зрения, это единственный способ узнать, что на картинке. Если атрибута нет вообще, программа зачитает имя файла — «i m g подчёркивание два четыре три точка джей пи г».

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

Запасной вариант. Картинка не загрузилась, отключились изображения, медленный интернет — браузер покажет на её месте текст alt. Страница остаётся понятной.

Как выглядит хороший alt

Правило одно: опишите изображение так, как описали бы его человеку по телефону. Коротко, по существу, без слова «картинка».

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

Разные типы изображений

Товар. Название, важные характеристики, различающие модификации: цвет, размер, комплектация. Для карточки товара это ещё и способ различить десяток похожих фотографий одного артикула.

Схема, график, инфографика. Опишите суть, а не внешний вид: не «столбчатая диаграмма синего цвета», а «Рост числа заявок с 12 до 47 в месяц за полгода». Если на схеме много данных, продублируйте их текстом или таблицей рядом — в атрибут они не поместятся.

Скриншот интерфейса. Что показано и где: «Раздел „Страницы в поиске“ в Яндекс Вебмастере с фильтром по исключённым».

Декоративное изображение. Фоновая текстура, разделитель, абстрактная иллюстрация без смысла — пустой alt="". Программа чтения с экрана пропустит такую картинку и не будет отвлекать пользователя. Именно пустой, а не отсутствующий: разница принципиальная.

Изображение внутри ссылки или кнопки. Атрибут описывает не картинку, а действие: у иконки корзины со ссылкой на оформление заказа — alt="Перейти в корзину", а не alt="Иконка корзины".

Логотип. Название компании: alt="СЕО Рич". Если логотип ведёт на главную — можно alt="СЕО Рич, на главную".

Alt, title и подпись — разные вещи

Путаница между ними встречается постоянно.

• alt — замена изображению. Нужен всегда, читается программами чтения с экрана, участвует в поиске по картинкам.
• title — всплывающая подсказка при наведении курсора. Необязателен, на мобильных устройствах не показывается вообще. Полезен редко: например, чтобы дать пояснение к схеме.
• Подпись под картинкой (figcaption) — видимый текст для всех. Если информация важна каждому читателю, ей место в подписи, а не в атрибуте, который видят единицы.

Дублировать alt в title не нужно: программа чтения с экрана в этом случае может зачитать одно и то же дважды.

Частые ошибки

• Перечисление ключевых фраз. Самая распространённая. Поисковики давно распознают такие описания, а пользы от них нет ни человеку, ни машине.
• Одинаковый alt на всех картинках страницы. Обычно результат массовой простановки через шаблон: десять фотографий товара с одинаковым описанием не различают ничего.
• Отсутствие атрибута вместо пустого. Для декоративной картинки правильно alt="", а не полное отсутствие — иначе имя файла попадёт в озвучку.
• Описание того, чего на картинке нет. Атрибут должен соответствовать изображению, а не тому, что вы хотели бы продвинуть.
• Текст в картинке без дублирования. Если на изображении написан важный текст — цены, условия, этапы — он должен быть и в обычном тексте страницы. Ни поисковик, ни программа чтения с экрана его не прочитают.

Как проверить сайт

Три способа, от быстрого к полному.

Быстро. Откройте страницу в браузере, вызовите инструменты разработчика и найдите поиском <img. Видно сразу, у каких изображений атрибута нет.

По всему сайту. Любой десктопный краулер (Screaming Frog, Netpeak Spider и аналоги) обходит сайт и отдаёт список изображений без alt, с пустым alt и с подозрительно длинным. Это основной рабочий инструмент.

Через отчёты доступности. Lighthouse в браузере и подобные инструменты проверяют доступность и отдельно указывают на изображения без описания.

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

Что дальше делать с изображениями

Атрибут — только часть работы с картинками. Рядом стоят вещи, которые дают больше:

• Осмысленные имена файлов — kreslo-comfort-c15-seroe.webp вместо IMG_0041.jpg.
• Современные форматы и сжатие — webp или avif вместо тяжёлых jpg, это напрямую влияет на скорость загрузки.
• Явные размеры у тега img, чтобы вёрстка не прыгала при загрузке.
• Отложенная загрузка для изображений ниже первого экрана.

Что делать, если картинок тысячи

Вручную описать каталог из пяти тысяч товаров невозможно, и здесь начинается главная ошибка магазинов: шаблон вида «купить {название} в {город} недорого», проставленный разом на все изображения.

Рабочий подход — шаблон из данных, которые у вас уже есть в карточке, без рекламных слов:

{тип товара} {бренд} {модель}, {ключевая характеристика}

Получается «Кресло офисное Comfort C-15, серая ткань» — описание, а не объявление. Такой шаблон честно отвечает на вопрос «что на картинке» и при этом ставится автоматически.

Несколько правил для массовой простановки:

• Различайте изображения одного товара. Если у карточки пять фотографий, добавьте в шаблон ракурс или порядковый номер: «вид сзади», «в интерьере», «фото 3». Пять одинаковых описаний бесполезны.
• Не подставляйте город и слова «купить», «цена», «недорого». Это не описание изображения, а попытка продвинуться через атрибут, которая не работает уже много лет.
• Проверьте результат выборочно. Шаблон, собранный из полей базы, легко выдаёт мусор вроде «Кресло , » при пустых полях.
• Приоритет — карточкам с трафиком. Товары, которые уже приносят переходы, стоит описать руками, остальное закрыть шаблоном.

Как попасть в поиск по картинкам

Атрибут — необходимое, но не единственное условие. На попадание изображения в поиск влияют вместе:

• Окружающий текст. Поисковик связывает картинку с содержанием абзаца рядом и с ближайшим заголовком.
• Имя файла — осмысленное и на латинице.
• Подпись под изображением, если она есть.
• Отдельная карта сайта для изображений или блок image в основной карте — для крупных каталогов это ускоряет обход.
• Уникальность. Стоковая фотография, которая стоит на тысяче сайтов, почти не имеет шансов: своё фото товара или собственная схема выигрывают у стока.

Отдельно стоит помнить: изображение может ранжироваться, даже если страница в обычной выдаче стоит невысоко. Для товарных ниш это самостоятельный канал переходов, который часто недооценивают.

Коротко о главном

• alt нужен всем изображениям, но текст внутри — только смысловым; у декоративных он пустой.
• Пишите описание для человека, который не видит картинку, а не для поисковой системы.
• Ключевые слова уместны в alt ровно тогда, когда они действительно описывают изображение.
• У картинки внутри ссылки описывается действие, а не изображение.
• Проверять весь сайт удобнее краулером, а начинать — со страниц, которые приносят деньги.

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