Изображение на странице может быть иллюстрацией, инструкцией, ссылкой, товарной фотографией или чисто декоративным элементом. Во всех этих случаях один и тот же шаблон alt="ключевое слово купить цена" не работает. Атрибут alt прежде всего помогает человеку, который не видит изображение, понять его содержание или назначение. Для поисковой системы это дополнительный контекст, но не приглашение повторять запросы.
Alt и title выполняют разные задачи
alt — текстовая альтернатива содержимого элемента <img>. Браузер может показать этот текст, когда картинка не загрузилась; программы экранного доступа используют его для озвучивания. title — дополнительная подсказка, обычно отображаемая при наведении курсора. На сенсорных экранах и со скринридерами такой способ представления ненадёжен. Поэтому важную информацию нельзя оставлять только в title.
Важна функция картинки, а не только её внешний вид. Фотография менеджера в статье о компании может требовать имени и должности. Та же фотография в декоративном баннере может не добавлять информации. Если картинка открывает PDF, alt должен объяснять действие: «Скачать инструкцию по установке, PDF», а не «иконка документа».
| Ситуация | Вариант alt | Что проверить |
|---|---|---|
| Фото товара | Серый диван с раскладным механизмом, вид спереди |
Отличает ли фото от других ракурсов |
| Скриншот | В настройках индексации выбран запрет для тестового раздела |
Понятен ли результат действия |
| Иконка внутри ссылки | Открыть корзину |
Озвучивает ли действие, а не геометрию значка |
| Декоративная линия | alt="" |
Нет ли потерянного смыслового содержания |
| График | Динамика органических переходов по месяцам |
Есть ли рядом таблица с цифрами и выводами |
Пять вопросов перед заполнением alt
- Узнает ли читатель нужную информацию, если изображение убрать? Если нет — передайте значимую часть словами.
- Повторяет ли картинка уже написанный рядом текст? Для чистого оформления уместен пустой
alt. - Содержит ли изображение текст, которого нет в HTML? Нужно воспроизвести существенные слова в доступном тексте или рядом.
- Является ли картинка единственным содержимым кнопки или ссылки? Опишите назначение управления.
- Это товарная фотография? Укажите реальные различающие признаки: тип, цвет, модификацию, ракурс, но не выдумывайте характеристики.
Пустой alt — не то же самое, что отсутствующий атрибут. Для декоративного изображения явно заданное alt="" говорит вспомогательным технологиям пропустить его. Отсутствующий alt может приводить к чтению имени файла или неопределённому поведению.
Примеры HTML: полезно и бесполезно
<!-- Полезная товарная фотография -->
<img src="/images/sofa-grey-front.webp"
alt="Серый диван с раскладным механизмом, вид спереди"
width="960" height="640" loading="lazy">
<!-- Декоративный фон -->
<img src="/images/pattern.svg" alt="" aria-hidden="true">
<!-- Ссылка без дополнительной подписи -->
<a href="/catalog/cart"><img src="/icons/cart.svg" alt="Открыть корзину"></a>
Для первого, главного изображения над первым экраном бездумный loading="lazy" может ухудшить LCP. Для картинок ниже экрана lazy loading обычно уместен. Это отдельная задача производительности, а не правило написания alt.
Поисковая оптимизация изображений не ограничивается alt
Проверьте имя файла, доступность URL изображения, размер, качество сжатия, адаптивные srcset и sizes, окружение тематическим текстом и право использовать фотографию. В карточке товара может быть десяток изображений с похожими объектами: различайте их ракурсами, деталями и версиями, но не дублируйте один и тот же набор запросов.
Подпись <figcaption> видна всем пользователям и хорошо работает для схем, сравнения «до/после», инструкций и сложных графиков. Она дополняет alt, но не освобождает от необходимости объяснить важную информацию. В аналитической статье полезно рядом с графиком приводить ключевые значения таблицей.
Как провести аудит изображений сайта
Сначала выгрузите все <img> по индексируемым URL и определите роль картинки: информативная, функциональная, декоративная, сложная. Затем отдельно ищите отсутствующие alt, одинаковые шаблонные тексты, изображения со ссылками без названия действия, недоступные URL и повторное использование одного изображения в разных контекстах. Для больших сайтов отберите типы шаблонов — карточка товара, категория, статья, лендинг — и проверьте правила генерации на каждом.
Не исправляйте ошибки массовой подстановкой Title или H1: одно название страницы не описывает все фото. После внедрения проверьте страницу клавиатурой и скринридером, а также посмотрите, как изображение проходит по реальному HTML, а не только по визуальному редактору CMS.
Краткий чек-лист перед публикацией
- У важного изображения есть содержательный
alt, у декоративного —alt="". - У иконки-ссылки описано действие, у графика есть текстовый эквивалент.
- Нет фраз «изображение», «фото» без смысловой необходимости и бессмысленного повторения ключа.
- Файл доступен роботам и отображается на мобильном устройстве.
- Размеры указаны для снижения CLS, главное изображение не откладывается неоправданным lazy loading.
- Изменения протестированы на одной типовой странице до массового внедрения.
Распространённые ситуации в интернет-магазине и блоге
Карточка товара с галереей: главное изображение, боковой ракурс, упаковка и схема размеров требуют разных альтернативных описаний, если показывают действительно разные полезные сведения. Но десять почти идентичных фотографий не обязаны получать десять искусственных уникальных SEO-абзацев. Лучше назвать отличающийся ракурс или оставить пустую альтернативу у заведомо повторного декоративного кадра в контексте галереи, если сценарий доступности это допускает.
В блоге скриншот отчёта важнее текста «аналитика»: опишите, что пользователь должен заметить, например «В отчёте виден резкий рост 404 после смены структуры URL». Цифры и причинный вывод повторите обычным текстом под изображением. В схемах из нескольких блоков одного короткого alt может быть недостаточно — нужна полноценная текстовая инструкция с шагами.
Отдельно различайте <img alt> и CSS background-image. Для декоративных фонов текстовая альтернатива часто не нужна, но если важная надпись существует лишь как background-image, её следует продублировать обычным HTML-текстом. Текстовые изображения в интерфейсе особенно трудно переводить, масштабировать и адаптировать к контрастным режимам.
Приёмочный пример для разработчика
Предположим, вы внедряете новый шаблон каталога. Сформируйте выборку из товара с одной фотографией, товара с галереей, карточки без фото, кнопки с изображением, баннера и статьи с графиком. Для каждой проверьте HTML, произнесение скринридером, работу ссылки, реальный текст альтернативы и отсутствие ненужного повторения названия раздела.
После внедрения сравните долю изображений без нужной альтернативы по типам шаблонов, а не одним числом по сайту: декоративные alt="" не должны считаться ошибкой. Полезный результат аудита — исправленное поведение компонентов CMS и доступность материалов, а не формально 100% непустых alt.
Полезные материалы
Смежная тема — Google PageSpeed Insights и Core Web Vitals и микроразметка Product. Первоисточники: W3C WAI — правила для alt и Google — SEO изображений.
Архивные иллюстрации и первоначальные наблюдения
Это материалы из первоначальной версии статьи. Скриншоты и старые интерфейсы сохранены как часть истории публикации; они не доказывают актуальность показанных функций и результатов.
Показать архивные изображения (1)
Следующие страницы вас также могут заинтересовать:
- Робототехника
- Промышленные роботы: что это, виды, устройство и применение
- SEO-продвижение образовательного сайта: 7 лет — от старого HTML до AI Search
- Аутсорсинг: что это такое и как он может помочь вашему бизнесу?
- Паллетирование: что это такое, технологии, оборудование и роботизация
Обновлено: 11.10.2026