Поисковик не видит фотографию так, как видите её вы. Он угадывает содержание по файлу, окружающему тексту и атрибуту alt. Незрячий посетитель с экранной читалкой узнаёт, что на картинке, тоже из alt. Одна строка в коде работает сразу на поиск по картинкам, доступность и понимание страницы.
Как выглядит
<img src="/upload/grohe-eurosmart.jpg" alt="Смеситель Grohe Eurosmart для ванной, хром, вид спереди">
Как писать alt
| Тип изображения | Пример alt |
|---|---|
| Фото товара | Кастрюля Tefal Emotion 3 л с крышкой, нержавеющая сталь |
| Фото работы, кейса | Кабинет УЗИ в клинике после ремонта |
| Схема, график | График визитов из поиска до и после переезда сайта |
| Фото сотрудника | Евгений Баев, руководитель агентства |
| Декоративный элемент, иконка | alt="": пустой, чтобы читалки его пропускали |
Частые ошибки
- Alt пустой у содержательных картинок: товаров, схем, фото работ.
- Во всех alt одно и то же: название компании или главный запрос.
- Переспам: «купить смеситель недорого смеситель Красноярск смеситель».
- Alt «image», «фото1», «DSC_0042».
- Текст внутри картинки без дублирования в alt или на странице: поисковик его может не прочитать.
На одном из проверенных корпоративных сайтов краулер нашёл 660 изображений без alt из 4 116. Большая часть: логотипы клиентов и иконки блоков, часть, картинки в статьях. Логотипам и иконкам достаточно пустого alt или названия компании, а картинкам в статьях нужны нормальные описания.
Alt и title
Атрибут title у картинки показывает всплывающую подсказку при наведении. Для SEO он почти ничего не даёт и на телефонах не виден. Главное: alt. Title можно не заполнять или дублировать alt, если так удобнее вашей CMS.
Массовое заполнение в магазине
Для тысяч фото товаров alt генерируют шаблоном: «Название товара, фото N», плюс цвет или ракурс, если есть в данных. В 1С-Битрикс шаблоны alt для анонсовых и детальных картинок задаются в SEO-настройках инфоблока рядом с шаблонами title и description.
Изображения и скорость
Alt это только часть работы с картинками. Не меньше влияет их вес: фото на 3 МБ, уменьшенное браузером до превью 300 пикселей, замедляет страницу и бьёт по Core Web Vitals. Базовые правила: сохранять изображения в нужном размере, использовать WebP или AVIF, указывать width и height, загружать лениво всё, что ниже первого экрана. Имя файла тоже лучше делать понятным: smesitel-grohe-eurosmart.jpg вместо IMG_4521.jpg.
Поиск по картинкам как источник трафика
Для некоторых ниш поиск по картинкам, заметный канал: мебель, интерьеры, одежда, стройматериалы, сантехника, дизайн, рецепты. Люди ищут идею глазами, а потом переходят на сайт. Чтобы получать этот трафик, нужны собственные качественные фото (стоковые картинки есть у тысяч сайтов), понятные alt и подписи, быстрая загрузка и доступность изображений для робота, без запрета папки с картинками в robots.txt. Проверьте в Вебмастере и Search Console, есть ли у вас переходы из поиска по картинкам: если ниша визуальная, а их нет, это недоработанный источник.
Чек-лист изображения
- Описательный alt для содержательных картинок и пустой для декоративных.
- Понятное имя файла.
- Формат WebP или AVIF и размер под место на странице.
- Указаны width и height.
- Lazyload для картинок ниже первого экрана.
Вопросы про alt
Какой длины должен быть alt?
Влияет ли alt на позиции страницы?
Нужен ли alt у фоновых изображений в CSS?
Изображения без alt находим в техническом аудите, а подписи и тексты готовим в копирайтинге.
Источники
- Google Search Central: «Рекомендации по работе с изображениями в Google Поиске»
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2, критерий 1.1.1
См. также: Мета-тег title, Скорость сайта, Микроразметка.
