Что такое alt-текст у изображения и как его правильно заполнять

Alt-текст — это краткое описание изображения, которое добавляют в атрибут alt тега <img>. Он нужен не только на случай, если картинка не загрузилась, но и для поисковых систем и программ экранного доступа.

Зачем нужен alt-текст

Альтернативное описание выполняет сразу несколько задач:

• помогает людям с нарушениями зрения понять, что изображено на странице;
• дает поисковикам дополнительную информацию о содержимом картинки;
• отображается вместо изображения, если файл не загрузился;
• улучшает качество SEO, особенно в поиске по картинкам и в интернет-магазинах.

Если alt заполнен правильно, страница становится и понятнее для роботов, и доступнее для пользователей.

Бесплатный экспресс аудит

Проведём SEO аудит без оплаты. Акция действует до конца августа.

Заказать аудит

Как писать хороший alt

Главное правило — описывать не картинку вообще, а ее смысл в контексте страницы.

Хороший alt-текст:

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

Пример:

<!-- Плохо -->
<img src="gsc.jpg" alt="seo аудит, seo, аудит сайта">

<!-- Хорошо -->
<img src="gsc.jpg" alt="Отчет об индексировании в Google Search Console">

Обычно достаточно 80–125 символов, но жесткого лимита нет. Лучше писать кратко и по делу.

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

Не всем изображениям нужно описание. Если картинка используется только для оформления и не несет смысла, ставят пустой атрибут:

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

Это касается декоративных иконок, линий, фонов и других элементов, которые не важны для понимания страницы.

Alt для кнопок и ссылок

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

<a href="/catalog"><img src="banner.jpg" alt="Перейти в каталог"></a>

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

<button><img src="search.svg" alt="Найти"></button>

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

При заполнении alt чаще всего встречаются такие проблемы:

• атрибут вообще отсутствует;
• для важных изображений стоит пустой alt="";
• текст состоит из набора ключевых слов;
• у разных картинок одинаковые описания;
• в alt автоматически подставлено имя файла;
• описание слишком общее и не объясняет, что именно изображено.

Например, alt="собака" — слабый вариант, а alt="Щенок бигля лежит на ковре в гостиной" — уже намного лучше.

Полезные рекомендации

Чтобы alt действительно работал, придерживайтесь простых правил:

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

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

Проверить наличие и качество альтернативных описаний можно несколькими способами:

• через DevTools в браузере;
• с помощью расширений вроде Web Developer;
• через краулеры Screaming Frog или Sitebulb;
• в инструментах доступности: Lighthouse, axe DevTools, WAVE;
• вручную со скринридером, например NVDA или VoiceOver.

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

Краткий вывод

Alt-текст — это небольшой элемент HTML, который влияет и на доступность, и на SEO. Он помогает поисковым системам понимать изображения, а пользователям — получать информацию даже без визуального восприятия страницы.

Если описание точное, краткое и уместное, сайт становится удобнее и получает дополнительное преимущество в поиске.