Alt (альтернативный текст)

Что такое alt

Alt (от англ. alternative) — это атрибут тега img, который задаёт текстовое описание изображения. Он отображается в трёх случаях: если картинка не загрузилась, если пользователь использует скринридер (для незрячих), и когда поисковый робот анализирует страницу. HTML-код выглядит так:

<img src="product.jpg" alt="Красные кроссовки Nike Air Max на белом фоне">

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

Поисковые роботы не «видят» изображения. Для них картинка — это просто путь к файлу и несколько байт метаданных. Атрибут alt — единственный способ передать роботу смысл изображения. Вот что он даёт для SEO:

• Участвует в ранжировании в Google Images — при правильном заполнении картинка может появляться в выдаче по релевантным запросам.
• Повышает релевантность страницы — если alt содержит ключевые слова, это дополнительный сигнал для основного поиска.
• Улучшает доступность (accessibility) — сайты с корректными alt получают лояльность пользователей и могут иметь преимущество в поведенческих факторах.
• Контекст для внутренней перелинковки — изображение с alt может передавать ссылочный вес, если на него ведёт ссылка.

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

Основное правило: alt должен точно и кратко описывать изображение. Вот несколько принципов:

• Будьте конкретны — вместо «кроссовки» напишите «синие беговые кроссовки Asics Gel-Kayano 30».
• Не спамьте ключевыми словами — «купить кроссовки дешёво кроссовки москва» — это наказуемо.
• Учитывайте контекст страницы — если изображение декоративное, ставьте пустой alt="".
• Длина — 50-120 символов обычно достаточно для сохранения естественности.
• Избегайте фраз «изображение», «картинка» — скринридер и так объявит, что это графика.

Примеры хорошего и плохого alt

Рассмотрим одно и то же изображение — ноутбук Dell XPS 13 на столе. Варианты alt:

❌ Плохо: 'ноутбук' (слишком общее) 
❌ Плохо: 'купить ноутбук dell xps 13 дешёво ноутбук москва' (спам) 
✅ Хорошо: 'Dell XPS 13 серебристый на деревянном столе' 
✅ Отлично: 'Ноутбук Dell XPS 13 с открытой крышкой, рядом кофе и блокнот — рабочее место программиста'

Лучшие практики

• Всегда добавляйте alt к значимым изображениям (товары, графика, фото блога).
• Для декоративных изображений (фоны, иконки без смысла) ставьте alt="" и не забудьте про роль presentation, если нужно.
• Используйте то же описание, что и для title картинки при наведении — но не копируйте слепо, title обычно длиннее и более творческий.
• Проверяйте сайт с помощью скринридера (VoiceOver, NVDA) — слышно ли описание?
• Избегайте одинакового alt для разных изображений на одной странице — это снижает информативность.