Писать alt как список ключей
Альтернативный текст перестаёт описывать изображение.
Практическое SEO · изображения
SEO изображений: alt, имена файлов, вес и индексация картинок
Изображение — это одновременно содержательный элемент, ресурс для браузера и отдельный объект для поиска по картинкам. Оптимизация начинается не с заполнения alt ради ключей, а с понятного смысла, доступности файла, правильного размера и связи с текстом страницы.
Основа
Поисковику нужен контекст изображения, а пользователю — быстрый и понятный ресурс
Яндекс рекомендует заполнять атрибут alt: он помогает понять содержание изображения и служит альтернативным текстом, если картинка недоступна. При этом текст, нарисованный внутри изображения, не должен заменять обычный HTML-текст страницы.
Для поиска по картинкам важны не только alt, но и окружающий текст, доступность файла и сам контекст страницы. Поэтому бессмысленный набор ключей в alt не компенсирует слабое изображение.
Рекомендации Яндекса по использованию графики отдельно советуют заполнять alt и дублировать важный текст из изображений обычным текстом.
Alt описывает изображение в контексте страницы. Это не дополнительное поле для списка запросов.
Шаг 1
Alt должен коротко описывать то, что важно на изображении
Для фотографии товара уместно название модели и значимый вариант. Для схемы — суть схемы. Для декоративного орнамента alt может быть пустым, чтобы ассистивные технологии не озвучивали бессмысленный элемент.
Не нужно начинать каждый alt со слов «картинка» или «фото», если тип изображения очевиден. И не стоит копировать один alt на десятки разных изображений.
| Изображение | Слабый alt | Лучше |
|---|---|---|
| Фото товара | купить товар цена | Синий IBC-контейнер 1000 л, вид спереди |
| Схема | seo схема оптимизация | Схема переноса URL: старый адрес → 301 → новая страница |
| Декор | фон сайта | Пустой alt, если изображение не несёт смысла |
| Скриншот | скриншот | Отчёт Вебмастера со статусами индексирования страниц |
Шаг 2
Стабильные понятные имена упрощают обслуживание, но не заменяют контекст
Файл IMG_8743.jpg технически работает, но понятное имя удобнее разработчику и редактору. Не нужно делать из имени файла длинную фразу из ключей — достаточно короткого описания.
Если изображения уже получают трафик, массовое переименование создаёт новые URL файлов. Такой рефакторинг нужен только при реальной пользе, а не ради косметики.
Для новых материалов лучше сразу использовать понятную систему имён; старую медиатеку не переименовывать без причины.
Шаг 3
Передаём изображение близкого к отображаемому размера
CSS может уменьшить картинку визуально, но не уменьшает скачиваемый файл. На карточке шириной 320 px не нужен оригинал 4000 px, если пользователь не открывает его отдельно.
Используем подходящий формат, адаптивные источники и разумное качество. Важно измерять итоговый вес страницы, а не спорить о формате в отрыве от конкретного файла.
Шаг 4
Ленивая загрузка полезна ниже первого экрана, но критическое изображение не стоит задерживать
Изображения далеко ниже viewport можно загружать по мере приближения пользователя. Это уменьшает конкуренцию за сеть на старте.
Главное изображение первого экрана, логотип или ключевая иллюстрация не должны случайно ждать lazy-события. Для JS-галерей проверяем, что реальные URL изображений доступны и не появляются только после сложного действия.
Шаг 5
Фоновые и скрытые скриптом изображения индексируются хуже обычных img
Яндекс указывает, что стандартные форматы изображений индексируются, а фоновые картинки и изображения, раскрываемые скриптом, обычно не индексируются. Если изображение важно для поиска и содержания, лучше не прятать его только в CSS-фоне.
Для труднодоступных изображений можно использовать Sitemap, но сначала стоит проверить обычную доступность и ссылки на файл.
Документация Яндекса по картинкам в поиске перечисляет поддерживаемые форматы и особенности обнаружения.
Шаг 6
Аудитируем изображения как набор ресурсов и как часть контента
Выгружаем URL изображений, HTTP-коды, вес, dimensions, alt и страницы-источники. Ищем 404, огромные файлы, одинаковые alt, изображения без размеров и ресурсы, загружаемые там, где они вообще не видны.
Отдельно проверяем первый экран мобильной версии: именно там тяжёлые изображения чаще всего заметно влияют на ощущение скорости.
Шаг 7
Важную информацию не оставляем только внутри графики
Схема, баннер или сертификат может содержать текст, который важен для понимания страницы. Ключевые факты стоит повторить обычным HTML-текстом рядом или в подписи.
Это улучшает доступность, позволяет копировать информацию и не делает смысл страницы зависимым от загрузки изображения.
Изображение дополняет текст, а не является единственным носителем критически важной информации.
Частые ошибки
Что обычно ломает эту часть SEO
Уменьшать только CSS
Пользователь всё равно скачивает тяжёлый оригинал.
Lazy для hero-изображения
Критический визуальный элемент появляется с лишней задержкой.
Оставлять текст только в баннере
Смысл страницы становится зависимым от графики.
Практический сценарий
Каталог выглядит лёгким, но mobile скачивает 18 МБ
Карточки товаров показывают миниатюры 280×280, однако шаблон подставляет оригиналы 3000×3000. Браузер уменьшает их CSS, поэтому визуально проблема незаметна на быстром офисном интернете.
Генерируем подходящие размеры, задаём srcset/sizes, оставляем крупный оригинал только для зума и включаем lazy loading ниже первого экрана. После этого вес стартовой загрузки падает в несколько раз без изменения дизайна.
| Ресурс | До | После |
|---|---|---|
| Миниатюра | 2,4 МБ оригинал | 70–120 КБ подходящего размера |
| Первый товар | lazy | Загружается сразу как важный |
| Ниже экрана | Сразу все изображения | Lazy loading |
| Alt | Название файла | Описание товара/ракурса |
Чек-лист
Проверка изображений для SEO и скорости
- Собрать изображения: URL, страница-источник, вес и dimensions.
- Проверить HTTP-коды: Файлы не отдают 404/5xx.
- Проверить alt: Он описывает смысл, а декоративные изображения не создают шум.
- Убрать переспам: Alt не превращён в список запросов.
- Сравнить размеры: Не отдавать огромный оригинал в маленький контейнер.
- Проверить форматы: Использовать эффективный формат без потери нужного качества.
- Настроить lazy разумно: Не задерживать критическое изображение первого экрана.
- Проверить JS-галереи: Важные изображения доступны без хрупкого сценария.
- Дублировать важный текст: Не оставлять смысл только внутри графики.
- Проверить mobile: Вес изображений соответствует реальному размеру экрана.
Вопросы
Короткие ответы
Нужно ли заполнять alt у всех изображений?
У содержательных — да. У чисто декоративных изображений пустой alt часто корректнее.
Нужно ли вставлять ключевые слова в alt?
Только если они естественно описывают изображение. Перечислять запросы не нужно.
WEBP всегда лучше JPG?
Не автоматически. Сравнивайте реальный размер и качество конкретного файла.
Можно ли использовать фоновые изображения для важного контента?
Для декоративных — да. Важные для содержания и поиска изображения лучше выводить обычным img.
Практика NIC-SEO
Изображение должно быть полезным, доступным и лёгким
Мы оптимизируем графику как часть содержания и производительности, а не заполняем alt ради формального SEO.