Что такое атрибут alt и зачем он вообще нужен
Атрибут alt — это текстовое описание изображения, которое прописывается прямо в HTML-коде тега <img>. Выглядит это так:
<img src='photo.jpg' alt='Красный деревянный стул на белом фоне'>
Изначально атрибут создавался для двух целей. Первая — доступность: если у пользователя отключены изображения, или он использует скринридер, alt-текст озвучивает или показывает, что именно находится на картинке. Вторая — техническая страховка: если файл не загрузился, браузер отобразит текстовую заглушку вместо сломанной иконки.
Со временем добавилась третья, не менее важная функция — поисковая оптимизация. Роботы Google, Яндекс и других поисковых систем не умеют «видеть» картинки так, как это делает человек. Они читают alt, чтобы понять содержание изображения и учесть его при ранжировании страницы и поиске по картинкам. Именно поэтому SEO alt текст для изображения давно стал обязательным элементом технической оптимизации.
Как атрибут alt влияет на SEO
Влияние alt-атрибута на позиции страницы — косвенное, но реальное. Вот конкретные механизмы:
- Поиск по картинкам. Грамотно заполненный alt помогает изображению попасть в Google Images и Яндекс.Картинки. Для интернет-магазинов, фотостоков, медиа и портфолио это самостоятельный источник трафика.
- Релевантность страницы. Поисковик учитывает текстовое окружение изображения, включая alt, при определении тематики страницы. Изображения с описательным alt усиливают семантику материала.
- Core Web Vitals и UX. Корректный alt снижает число «битых» визуальных элементов, что косвенно влияет на поведенческие метрики.
- Доступность как сигнал качества. Google открыто говорит, что сайты, удобные для всех пользователей, получают преференции. Заполненные alt-атрибуты — один из критериев доступности по стандарту WCAG.
Если на сайте сотни или тысячи изображений без alt — это типичная проблема, которую выявляет SEO-аудит. Исправление таких пробелов нередко даёт заметный прирост трафика из поиска по картинкам.
Правила написания хорошего alt-текста
Универсальный принцип: alt должен описывать то, что изображено, в контексте страницы. Не просто «что нарисовано», а зачем эта картинка здесь и что она добавляет к материалу.
Несколько практических правил:
- Конкретность важнее общности. «Белая кофейная кружка с логотипом на деревянном столе» лучше, чем «кружка» или «фото продукта».
- Длина — до 125 символов. Скринридеры обрезают alt длиннее этого порога. Ёмко и по делу.
- Ключевое слово — органично, не насильно. Если страница о продаже офисных кресел, alt «Офисное кресло с поясничной поддержкой, модель X» — нормально. Alt «офисное кресло купить недорого Москва офисное кресло» — спам.
- Не начинайте с «Изображение...» или «Фото...». Скринридеры и так сообщают пользователю, что это картинка. Начинайте сразу с описания.
- Декоративные изображения — пустой alt. Если картинка чисто декоративная (фоновый паттерн, разделитель), пишите
alt=''. Это сигнализирует скринридеру: «пропусти это». Отсутствие атрибута вообще — ошибка.
Типичные ошибки при заполнении alt для картинок
На практике встречаются одни и те же проблемы — независимо от размера сайта и тематики.
- Alt отсутствует полностью. Самая распространённая ошибка. Особенно часто встречается на страницах, сгенерированных CMS автоматически, или при массовой загрузке изображений через медиабиблиотеку.
- Alt = имя файла. «IMG_4521.jpg» или «photo_2024_03_15» — бесполезная информация ни для пользователя, ни для поисковика.
- Одинаковый alt для всех изображений на странице. Если у пяти фотографий товара одинаковый alt — это дубли, которые не несут уникальной информации.
- Переспам ключевыми словами. Набивать alt одними ключами — не оптимизация, а нарушение рекомендаций Google. Может привести к фильтру или ручным санкциям.
- Слишком длинное описание. Alt на 300 символов — уже не alt, а подпись. Для развёрнутых описаний существует атрибут
titleили текст рядом с изображением. - Игнорирование контекста. Alt «собака» для фото на странице о породах — слабо. Alt «Немецкая овчарка в стойке, демонстрация стандарта породы» — полезно и для SEO, и для пользователя.
Alt-текст в разных типах проектов: специфика
Подход к заполнению alt зависит от типа сайта и назначения изображений.
Интернет-магазины. Для карточек товаров alt должен содержать название товара, модель, ключевые характеристики. Пример: «Смартфон Samsung Galaxy A55 синий, вид спереди». При наличии нескольких фото одного товара — каждое должно иметь уникальный alt с указанием ракурса или детали.
Статьи и блоги. Изображения иллюстрируют текст, поэтому alt дополняет содержание, а не дублирует заголовок. Для инфографики стоит кратко описать её суть: «Схема воронки продаж: осведомлённость, интерес, желание, действие».
Портфолио и галереи. Описывайте технику, объект, контекст. «Интерьер гостиной в скандинавском стиле, проект 2024, г. Москва» — такой alt будет работать и в поиске по картинкам.
Новостные и медиасайты. Alt для фотографий людей, событий, мест должен отвечать на вопросы: кто/что, где, когда (если важно). Это особенно ценно для индексации в Google Discover.
Если хотите системно выстроить оптимизацию изображений на сайте — начните с понимания общей стратегии продвижения. Об этом подробнее на странице SEO-продвижения сайтов.
Как проверить и исправить alt-атрибуты на существующем сайте
Ручная проверка каждого изображения на большом сайте — нереально. Используйте инструменты:
- Google Search Console → раздел «Улучшения» → «Доступность» иногда сигнализирует об отсутствующих alt.
- Screaming Frog SEO Spider — сканирует все изображения сайта и выдаёт список: без alt, с пустым alt, с alt длиннее 100 символов.
- Яндекс.Вебмастер → «Качество сайта» → раздел доступности.
- Расширение Wave (WebAIM) — визуально подсвечивает проблемы доступности прямо на странице, включая отсутствующие alt.
- Встроенные инструменты CMS. В WordPress, например, можно фильтровать медиафайлы без alt через медиабиблиотеку или плагины вроде WP Accessibility Helper.
После аудита расставьте приоритеты: сначала исправляйте alt на коммерческих страницах (категории, карточки товаров, лендинги), затем — на информационных. Декоративные изображения получают alt='' в последнюю очередь.
Частые вопросы
Обязательно ли заполнять alt для каждого изображения на сайте?
Не для каждого. Декоративные изображения (фоны, разделители, иконки без смысловой нагрузки) должны иметь пустой атрибут alt='' — это правильно с точки зрения доступности. Заполненный alt нужен для всех изображений, несущих информацию: фото товаров, иллюстрации к статьям, инфографика, портретные фото.
Можно ли использовать одно ключевое слово в alt для всех изображений страницы?
Нет. Повторяющийся alt на одной странице — это дубли, которые не дают поисковику дополнительной информации. Каждое изображение должно описываться уникально, даже если это несколько фото одного товара с разных ракурсов.
Влияет ли alt-текст на ранжирование основных страниц или только на поиск по картинкам?
На обе зоны. Alt усиливает тематическую релевантность страницы в целом и одновременно помогает изображениям попасть в поиск по картинкам. Для некоторых тематик — e-commerce, дизайн, фотография, рецепты — трафик из поиска по картинкам сопоставим с основным органическим трафиком, поэтому оптимизация изображений SEO имеет прямой коммерческий смысл.