Alt текст: что это и зачем нужен

Alt текст (атрибут alt) — текстовое описание изображения для поисковиков и экранных читалок. Влияет на SEO изображений и доступность сайта.

Что такое Alt текст

Alt текст (alternative text, атрибут alt) — текстовое описание изображения, которое добавляется в HTML-тег <img> через атрибут alt:

<img src="seo-audit.jpg" alt="Скриншот результатов SEO-аудита сайта в reChecker" />

Alt текст выполняет три функции:

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

Зачем нужен Alt текст

SEO изображений: Google Images — значимый источник трафика. Без alt текста изображение практически невидимо для поисковиков.

Ранжирование страницы: релевантный alt текст с ключевыми словами усиливает тематическую релевантность страницы.

Доступность (Accessibility): WCAG 2.1 требует alt текст для всех значимых изображений. Без него сайт недоступен для людей с нарушением зрения.

Core Web Vitals: правильные alt атрибуты помогают избежать сдвигов макета (CLS) при загрузке изображений.

Юридические требования: в ряде стран (США, ЕС) отсутствие доступности сайта может нарушать законодательство.

Как написать хороший Alt текст

Правила написания

Описывайте конкретно — что изображено, а не "картинка" или "фото"
Включайте ключевые слова — органично, не спамить
Длина 5-15 слов — достаточно для описания, не перегружайте
Не начинайте с "Изображение..." — поисковики и читалки сами знают что это изображение
Пунктуация — в конце точка помогает экранным читалкам сделать паузу

Примеры

Плохо:

<img src="img123.jpg" alt="фото" />
<img src="product.jpg" alt="купить товар дешево Москва" />

Хорошо:

<img src="seo-audit.jpg" alt="Анализ SEO-аудита сайта с результатами по скорости и мета-тегам." />
<img src="iphone15.jpg" alt="iPhone 15 Pro в цвете Natural Titanium." />

Когда alt должен быть пустым

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

<img src="divider.png" alt="" role="presentation" />

Пустой alt сообщает экранным читалкам: "это декоративное изображение, пропустите его".

Alt для кнопок-изображений

Если изображение — кнопка или ссылка, alt должен описывать действие:

<a href="/contact"><img src="contact-icon.png" alt="Перейти на страницу контактов" /></a>

Проверка Alt текстов на reChecker

Используйте Проверку изображений для аудита всех изображений на сайте. Инструмент покажет:

Изображения без alt атрибута
Изображения с пустым alt (может быть нормально для декоративных)
Слишком длинные или слишком короткие alt тексты
Общее количество изображений на странице

FAQ

Нужен ли alt для всех изображений? Да, атрибут alt должен присутствовать у всех <img> тегов. Для декоративных изображений значение должно быть пустым (alt=""), но атрибут обязателен.

Влияет ли alt текст на рейтинг в Яндексе? Да. Яндекс.Картинки также индексирует изображения и использует alt текст при определении тематики картинки. Правильный alt увеличивает видимость изображений в поиске Яндекс.

Сколько ключевых слов добавлять в alt? Одно-два тематически релевантных ключевых слова. Не набивайте ключевые слова — это spam. Google может наказать за переоптимизацию alt атрибутов.