Alt для изображений: как заполнять альтернативный текст

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

Иногда alt содержит описание, а иногда должен оставаться пустым: alt="". Решение зависит от роли изображения на странице.

Зачем нужен альт у изображения

Альтернативный текст заменяет изображение, когда оно недоступно, и передает его назначение программам экранного доступа. Яндекс и Гугл также учитывают alt при анализе картинки.

При этом alt не заменяет обычный текст. Если важная информация есть только на баннере или схеме, ее нужно повторить в содержании страницы. Пользователь должен получить смысл без обязательного просмотра картинки.

Когда alt должен описывать изображение

Содержательный alt нужен, если картинка добавляет информацию. Это фотография товара, схема подключения, снимок результата работы, график или изображение с важным текстом.

Описание зависит от контекста. Для карточки товара фраза «черные кожаные ботинки с высокой подошвой» полезнее, чем «фото товара». В статье о ремонте изображение можно описать как «трещина на месте соединения водосточной трубы».

Не перечисляйте все детали кадра. Достаточно передать информацию, ради которой изображение добавлено на страницу. Общий принцип HTML звучит так: если заменить картинку текстом из alt, смысл материала не должен измениться.

Когда нужно оставить alt пустым

Декоративным изображениям задают пустой атрибут alt="". К ним относятся узоры, разделители, фоновые иллюстрации и значки, которые повторяют стоящий рядом текст. Программы экранного доступа смогут пропустить такую картинку.

Пустой alt и отсутствие атрибута не равнозначны. Если атрибут пропущен, некоторые программы могут прочитать имя файла. Вместо чистой страницы пользователь услышит что-то вроде image17.svg.

Как оформлять alt у ссылки и кнопки

Если картинка служит ссылкой или кнопкой, alt должен объяснять действие или назначение перехода. Для изображения корзины подойдет «Перейти в корзину», а не «Значок тележки».

Когда рядом уже есть текстовая ссылка с тем же действием, изображение можно оставить декоративным. Гугл также может использовать alt изображения как анкор, если картинка является ссылкой. Проблемы таких элементов отдельно разобраны в статье про ссылки без анкоров и alt.

На что влияет alt в SEO

Alt помогает поисковому роботу понять объект на изображении и его связь со страницей. Это полезно для поиска по картинкам и для общей ясности документа. Яндекс рекомендует заполнять атрибут, чтобы роботу было проще определить содержание файла.

Но наличие ключевой фразы не гарантирует позиции. Гугл предупреждает, что заполнение alt повторяющимися запросами ухудшает восприятие и может выглядеть как поисковый спам.

Какие ошибки встречаются чаще всего

• одинаковый alt у всех изображений товара;
• перечень ключевых запросов вместо описания;
• формулировки «картинка», «фото» и «изображение» без смысла;
• текст у декоративных значков и разделителей;
• отсутствие alt у информативной схемы или кнопки.

При проверке шаблона разделяйте пустые и отсутствующие значения. Пустой атрибут может быть правильным решением, а его отсутствие у значимой картинки требует исправления.

Как проверить alt на сайте

Откройте исходный код страницы и найдите элементы img (изображение). Для каждой картинки определите ее роль: информативная, функциональная или декоративная. После этого проверьте, соответствует ли значение атрибута этой роли.

На крупном сайте используйте SEO-аудит, но не исправляйте все пустые значения автоматически. Сервис находит отклонение, а решение зависит от контекста. Фото товара требует описания, элемент оформления требует alt="".

Результаты такой проверки стоит оценивать вместе с другими замечаниями. Порядок работ поможет определить статья о критичности SEO-ошибок.

Часто задаваемые вопросы про alt (FAQ)

Что такое alt простыми словами?
Это альтернативный текст, который передает смысл или назначение изображения.

Зачем нужен alt?
Он помогает пользователям, которые не видят изображение, и дает поисковым системам дополнительную информацию о картинке.

Можно ли оставлять alt пустым?
Да. Для декоративных и дублирующих изображений правильным вариантом будет alt="".

Нужно ли добавлять ключевые слова в alt?
Только когда они естественно описывают изображение. Перечень запросов вместо нормального описания использовать не нужно.

Чем пустой alt отличается от отсутствующего?
Пустой атрибут сообщает, что изображение можно пропустить. При отсутствии атрибута программа экранного доступа может прочитать имя файла.