Alt-текст

Как работает

Атрибут прописывается прямо в теге картинки — коротким текстом, описывающим, что на ней:

<img src="/img/kettle-bosch-twk7203.jpg" alt="Электрический чайник Bosch TWK 7203 в стальном корпусе">

Screen reader зачитывает это описание пользователю с нарушением зрения вместо самой картинки. Браузер показывает alt в качестве плейсхолдера, если картинка не загрузилась. Поисковики используют alt как один из сигналов о содержимом изображения — наряду с именем файла, окружающим текстом и микроразметкой.

Для декоративных картинок, которые ничего не сообщают (разделители, паттерны фона, чисто визуальные элементы), правильно ставить пустой alt:

<img src="/img/divider.svg" alt="">

Пустая строка — валидное значение, и она сигнализирует screen reader'у пропустить картинку без комментария. Отсутствие атрибута вообще — не то же самое: screen reader попробует зачитать имя файла, что почти всегда плохо звучит.

Почему важно для SEO

Google Images — второй по объёму источник поискового трафика после обычной SERP. Ранжирование там строится на комбинации alt-текста, имени файла, размера, окружающего текста и микроразметки. Правильный alt в разы повышает шансы попасть в топ по картинкам — для интернет-магазинов и каталогов это заметный дополнительный канал.

В основной выдаче Google alt тоже участвует: поисковик использует его как контекст для оценки релевантности страницы запросу, особенно на страницах с малым текстом (карточки товара, галереи). Яндекс.Вебмастер отдельно ведёт раздел «Изображения» и учитывает alt при определении, о чём страница.

Плюс — alt влияет на Core Web Vitals косвенно. Плохо описанные картинки чаще получают низкий CTR в Google Images, а картинки без alt страдают при потере визуальной части: если ресурс не загрузился, пользователь видит пустое место вместо описания, что портит впечатление.

Частые ошибки

• Alt-текст скопирован из имени файла: alt="IMG_20240315_123456.jpg" — бесполезен и для доступности, и для SEO.
• Alt переспамлен ключами: alt="купить чайник электрический недорого Москва доставка" — Google понижает страницы с таким шаблоном.
• Alt отсутствует на важных контентных картинках (фото товара, инфографика) — минус к доступности и минус трафик из Google Images.
• Декоративные картинки без пустого alt="" — screen reader читает пустоту или имя файла.
• Один и тот же alt на десятках картинок в галерее товара — Google игнорирует дубли.
• Alt как альтернатива подписи под картинкой — вместо этого нужны и alt, и <figcaption>.

Как проверить

В Chrome DevTools вкладка Elements → поиск по <img покажет все теги на странице; отсутствующий или пустой alt виден сразу. Google Lighthouse отдельно валидирует alt в блоке Accessibility — вернёт ошибку, если у контентной картинки нет описания. Расширения типа Axe DevTools или WAVE подсвечивают проблемы прямо на странице.

SEO Crawler при обходе сайта фиксирует все <img> и статус их alt: отсутствует, пустой, дубли между картинками одной страницы, длина, наличие переспама ключами. В отчёте это блок «Изображения» — с процентом покрытия по сайту и приоритизацией правок по количеству затронутых страниц.

Вывод

Alt — простой атрибут, за которым стоят и доступность, и позиции в Google Images. Пишите короткое человеческое описание содержимого картинки, для декоративных ставьте пустой alt="", не переспамьте ключами и не копируйте один текст на всю галерею. Проверка через Lighthouse — 30 секунд после релиза, окупается стабильным трафиком из картинок.