Основы
Атрибут alt для картинок: как написать полезное описание
Alt — текстовая альтернатива изображения в HTML. Её используют люди со скринридером, а поисковик учитывает при понимании картинки. Хороший alt передаёт смысл именно этой картинки в контексте страницы; перечень ключевых слов для него не нужен.
Когда alt помогает читателю
Представьте карточку кроссовок, где рядом с ценой стоит фотография вида сбоку. Человек, который не видит изображение, должен узнать то, что важно для выбора: «Чёрные беговые кроссовки, вид сбоку». Фраза «картинка товара» не сообщает ничего нового. Если фото показывает подошву крупным планом, описание должно сказать именно об этом.
У декоративной полосы или фонового узора иная роль: содержание страницы понятно без них. Для таких изображений обычно используют пустое значение alt="", чтобы скринридер не зачитывал бессмысленное имя файла. Но нельзя считать декоративной диаграмму, кнопку или фото товара только потому, что они нарисованы в макете.
Как подобрать слова под тип изображения
Для товара назовите предмет и видимый отличительный признак: цвет, ракурс или важную деталь. Для графика коротко сообщите вывод, а точные данные вынесите рядом в подпись или таблицу. Для изображения-ссылки alt должен объяснять действие или назначение ссылки, например «Открыть каталог зимних курток», если рядом нет другого текстового имени.
Не начинайте каждый alt словами «изображение» или «фото»: скринридер уже знает тип элемента. Не повторяйте длинный заголовок статьи на каждой иллюстрации. Если рядом стоит подпись, alt может добавить недостающую деталь, а не копировать подпись дословно.
Частые ошибки
Пустой alt у содержательной картинки лишает часть читателей информации. Обратная ошибка — набивка словами «кроссовки купить кроссовки Москва кроссовки цена»; она раздражает человека и не помогает описать предмет. Файловое имя вроде IMG_1273 или автоматически подставленный URL тоже не объясняют изображение.
Сложная инфографика требует не одного длинного alt, а короткого резюме плюс подробного текстового описания поблизости. Если диаграмма содержит сроки и числа, эти данные должны быть доступны как обычный текст. Тогда картинка дополняет содержание, а не хранит единственную копию важной информации.
Как добавить и проверить alt
В HTML используйте <img src="image.webp" alt="Описание"> как структуру. В редакторе сайта ищите поле «Альтернативный текст» для конкретной фотографии. Если шаблон повторяет один alt на всех товарах, включите в него данные каждого товара и проверьте результат на нескольких карточках.
Откройте страницу, временно отключите изображения или посмотрите дерево доступности браузера. Прочитайте страницу так, будто картинок нет: можно ли понять назначение изображения и смысл схемы? Проверьте и мобильную версию, если она отдаёт другую разметку.
Пять примеров для редактора
Фотография товара: «Красная настольная лампа с гибкой ножкой, вид сбоку». Скриншот настройки: «В поле Sitemap указан адрес файла sitemap.xml». Иконка кнопки без текстовой подписи: «Открыть корзину». Диаграмма: «После исправления ошибок доля страниц с ответом 200 выросла»; конкретные числа дайте рядом в тексте. Декоративный разделитель не нуждается в описании и получает пустой alt. Эти формулировки различаются потому, что у картинок разные задачи.
Прочитайте каждый пример в окружении соседнего текста. Если alt просто повторяет предложение рядом, сократите его. Если без картинки пропадает важный шаг инструкции, добавьте недостающие детали. У товарной галереи не копируйте один alt во все ракурсы: «вид спереди» и «вид подошвы» помогают выбрать вещь. Проверка на нескольких URL полезнее, чем массовое заполнение поля шаблонной фразой.
Как проверить результат
Сделайте выборку: главное изображение товара, иллюстрация статьи, диаграмма, декоративная иконка и картинка-ссылка. Для каждого изображения решите, несёт ли оно информацию и что следует сказать человеку без картинки. Проверка SEO title помогает найти изображения без alt; качество формулировки нужно оценить вручную.
Google рекомендует описательный alt и связывает понимание изображения также с окружающим текстом. Это не гарантия показа картинки в поиске: доступность, содержание страницы и решение поисковой системы проверяются отдельно.
Первоисточники
FAQ
Частые вопросы
Должен ли alt повторять название файла?
Нет. Опишите видимый предмет или функцию картинки на странице.
Что писать для декоративного изображения?
Если оно не добавляет информации и действия, обычно подходит пустой alt="".
Достаточно ли одного alt для сложной диаграммы?
Нет. Краткий alt дополните текстом или таблицей с важными данными рядом.
Проверьте себя
Вопрос 1 из 2. Результат увидите только вы.
Обсуждение
Какое изображение на вашем сайте без alt сейчас мешает понять страницу?
Войдите, чтобы оставить комментарий. Читать обсуждение могут все. Комментарии проходят автоматическую и редакционную проверку.