Атрибут alt — это текстовая альтернатива для картинки в HTML-коде. Его читает скринридер, он появляется вместо разорванного файла и помогает поисковой системе понять, о чём изображение. Многие ошибочно считают его элементом, который сам по себе приносит трафик из Google Images, но на практике alt — это вспомогательный сигнал: правильно написанный атрибут улучшает контекст страницы и доступность, а перебор с ключевыми словами наоборот вредит. Разбираем, как писать alt у изображений чтобы он работал на SEO, а не против него.
Что такое alt и зачем он для SEO изображений
alt (alternative text) — это краткое описание содержимого изображения, которое прописывается прямо в теге <img>. У атрибута сразу несколько функций: браузер показывает этот текст, если картинка не загрузилась; скринридер произносит его вслух для пользователей со слабым зрением; а поисковик использует его как один из сигналов при интерпретации смысла страницы.
Важно понимать главную границу: alt не делает изображение источником органического трафика сам по себе. Это не замена хорошей картинке и не площадка для списка запросов. Его задача — дать контекст, а не накрутить частотность.
Атрибут действительно полезен, когда изображение несёт смысловую нагрузку:
| Тип изображения | Что передавать в alt |
|---|---|
| Товар или результат работы | Коротко описать предмет и заметное отличие (цвет, материал, размер) |
| Инфографика с цифрами | Передать главный вывод, иначе без картинки теряется смысл |
| Кнопка-картинка | Описать действие, а не цвета и пиксели элемента |
| Декоративная иконка | Пустой alt, если смысл он не добавляет |
Простой пример из кода:
<!-- осмысленный, полезный alt -->
<img src="/sofa-green.jpg" alt="Зелёный двухместный диван с деревянными ножками">
<!-- декоративный разделитель, текст не нужен -->
<img src="/wave.svg" alt="">
Обратите внимание: не стоит начинать описание со слов «изображение» или «фото». Скринридер и так сообщает пользователю тип элемента, поэтому в alt важнее само содержание, а не уточнение, что перед вами картинка.
Как правильно писать alt — ключи, описание, без спама
Начинайте с роли изображения в конкретном блоке. Для фото товара достаточно названия и одной характерной детали; для диаграммы важнее вывод, который теряется без визуала. Единого шаблона нет, но есть набор правил, которые работают на SEO и не выглядят как спам.
- Пишите естественными фразами, а не перечислениями. «Красная кроссовка для бега» читается хуже, чем «красные кроссовки для бега по асфальту». Поисковики научились понимать живой язык, а скринридеру короче слушать связный текст.
- Включайте релевантный ключ естественно, если он вытекает из описания. Не нужно вставлять «купить недорого Москва» туда, где ему не по теме.
- Не дублируйте один и тот же alt у разных изображений. Одинаковый текст «картинка» или «товар» у десятка картинок путает и пользователя, и поисковик.
- Не делайте alt слишком длинным. Один абзац текста скринридеру слушать неудобно, а поддерживать его в CMS сложно.
Хороший приём — мысленно проговорить атрибут вслух, как его прочитает скринридер. Если фраза звучит естественно и без повторов, скорее всего alt написан правильно. Вариант «красная кроссовка, красные кроссовки для бега, купить» читается как набор ключей и сразу бьёт по восприятию.
Практический пример переписывания alt
| Плохо | Хорошо | Почему |
|---|---|---|
alt="товар" |
alt="Зелёный диван-книжка с отделением для белья" |
Конкретика помогает и поиску, и пользователю |
alt="фото" |
alt="Схема: рост трафика +40% после аудита" |
Передаёт смысл, а не тип файла |
alt="купить недорого москва" |
alt="Кожаный стул с мягкой обивкой" |
Ключи не подменяют описание реального предмета |
Особое внимание — инфографике и сложных схемам. Если на картинке много данных, коротким alt назовите график и главный вывод, а цифры продублируйте в таблице или абзаце рядом. Так информацию получают все посетители — включая тех, кто не видит изображение. Отдельно отмечу три типичные ошибки:
- пустой
alt=""на значимой схеме или фото; - одинаковый текст «картинка» у всех элементов страницы;
- переспам ключевыми запросами в одном атрибуте.
Когда alt не нужен — декоративные изображения и пустой атрибут
Не всякая картинка несёт смысл. Декоративные разделители, фоны, повторяющиеся элементы дизайна часто вообще не должны сопровождаться текстом. Для них ставят пустой alt="" — так скринридер пропускает элемент и не зачитывает лишний шум, а браузер всё равно показывает графику.
Это особенно актуально для иконок: значки навигации, декоративные favicon-иконки и мелкие графические элементы обычно убирают из голосового сопровождения именно через пустой alt. Подробнее о том, как подбираются иконки, какие у них размеры и где их размещать, рассказываем в статье про favicon и иконки на сайте.
Решение зависит от функции картинки, а не от желания CMS заполнить все поля формы. Но грань тонкая: если иконка выполняет роль кнопки («дом» — на главную), текст нужен, иначе пользователь скринридера не поймёт, куда ведёт переход. Пустой alt здесь станет ошибкой доступности.
Влияние alt на Google Images и доступность
Многие считают, что правильный alt выводит изображение в топ Google Images. На деле здесь работает скорее соответствие имени файла, окружения картинки и окружающего текста, чем сам атрибут. Тем не менее alt остаётся ключевым фактором доступности: для слабовидящих пользователей именно он заменяет весь визуальный ряд.
С точки доступа у атрибута есть конкретное требование: стандарт WCAG 2.1 (пункт 1.1.1 «Alternative text for images») предписывает давать текстовую альтернативу всем недекоративным изображениям. На практике это значит, что без alt не пройдут проверку ни валидаторы доступности, ни аудит по стандартам, а site рискует потерять часть аудитории. Имя файла тоже работает на контекст: green-sofa.jpg информативнее, чем безликий IMG_1234.jpg.
Отдельного упоминания заслуживает связь с общей оптимизацией страницы. Поисковик оценивает сайт комплексно: наряду с alt он учитывает верстку и стабильность макета. Например, верстковые сдвиги (Layout Shifts) могут ухудшить поведение посетителей и показатели скорости загрузки. Как найти и оптимизировать такие сдвиги на странице, рассказываем в отдельном материале, потому что alt стоит рассматривать в связке с другими параметрами, а не как изолированную «волшебную» настройку.
Ещё один нюанс: alt не спасает битое изображение. Атрибут показывает текстовую замену, но не возвращает потерянный файл и не восстанавливает облик карточки. Если картинка не открывается, сначала проверьте путь, код ответа сервера и CDN — а осмысленный alt уже дополняет исправление, а не заменяет его.
Как проверить отсутствие alt — инструменты
Найти изображения без альтернативы можно по-разному. Простой способ — открыть страницу в браузере и посмотреть на разорванные файлы или элементы, которые скринридер игнорирует. Но так легко упустить сотни картинок на большом сайте, поэтому для реальных проектов нужен автоматизированный подход.
Надёжный путь — аудит с помощью инструментов:
- SEO-аудиты выделяют страницы с картинками без
altи показывают объём проблемы; - Проверки вёрстки и ресурсов демонстрируют, какие изображения не несут смысла;
- Ручная выборка через DevTools (раздел Images) помогает убедиться, что атрибуты проставлены и написаны осмысленно.
Почти все такие проверки заодно смотрят и микроразметку — например, schema.org помогает поисковым системам точнее понять структуру страницы, поэтому alt разумно проверять в комплексе с другими структурными сигналами. Комбинация автоматики и ручной оценки даёт самый точный результат: бот находит все нарушения, а человек проверяет качество текста.
Как проверить в seoquest.ru (/check/free)
Бесплатная проверка сайта на seoquest.ru запускает полный SEO-аудит и сразу показывает проблемы с метаданными, ссылками и ресурсами, включая изображения без альтернативы. На странице /check/free вы получаете Health Score — сводную оценку здоровья страницы — и список рекомендаций, которые можно закрыть по одному.
Как использовать результат:
- Откройте отчёт и найдите раздел с изображениями или техническими ошибками.
- Выберите страницы с самым большим количеством нарушений.
- Пройдитесь по списку: поставьте осмысленный alt там, где он пустой, и уберите переспам где текст перегружен.
- Перепроверьте страницу после правок — статус в аудите обновится.
Это занимает минуты и помогает не только с alt, но и с другими скрытыми ошибками, которые мешают росту трафика.
Часто задаваемые вопросы
Нужно ли заполнять alt у каждой картинки?
Нет. Декоративным изображениям, которые ничего не добавляют к содержанию, обычно ставят пустой alt. А вот у значимых фото, схем и кнопок текстовая альтернатива нужна. Зависит это от функции элемента, а не от стремления заполнить все поля в CMS.
Можно ли вставить в alt несколько ключевых запросов?
Не стоит превращать атрибут в список запросов: такой текст плохо читается и не объясняет, что на картинке. Опишите объект, действие или вывод естественными словами — если релевантная фраза получается сама собой, этого достаточно для контекста.
Что писать для графика с большим количеством данных?
Короткий alt должен назвать график и главный вывод, а цифры лучше продублировать в тексте или таблице рядом. Так информацию получают все посетители, включая тех, кто не видит изображение. Длинный неструктурированный alt неудобно слушать.
Поможет ли alt вывести картинку в Google Images?
Сам по себе он не гарантирует попадания в картинки — там важнее соответствие имени файла, окружения и окружающего текста. Но alt улучшает доступность и общий контекст страницы, что полезно для SEO в целом.
Исправит ли alt битое изображение?
Нет. Атрибут показывает текстовую замену, но не восстанавливает отсутствующий файл. Проверьте путь, код ответа сервера и CDN отдельно; доступный файл и осмысленный alt дополняют друг друга, а не заменяют.
Хотите убедиться, что ни одна важная картинка не потеряна без alt? Запустите бесплатную проверку сайта на seoquest.ru и посмотрите найденные ошибки в своём аудите — это займёт несколько минут.