Что такое альтернативный текст для изображения: зачем он нужен и как его прописать

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

Шпаргалка: alt‑текст за 60 секунд

Alt — текстовое описание сути картинки в атрибуте img alt. Его читают скринридеры и поисковые системы; он отображается при сбое загрузки. Разобраться с базовыми правилами можно буквально за минуту.

• опишите суть и контекст: кто, что, действие, зачем элемент находится на странице;
• сохраняйте лаконичность: оптимальная длина составляет 80–125 символов (без жестких лимитов, но длинные строки плохо воспринимаются скринридерами);
• внедряйте ключевые слова только по смыслу, без спама;
• не начинайте фразу со слов «изображение» или «фото»;
• декоративным элементам задавайте пустое значение: alt="";
• не путайте alt с title: title — это всплывающая подсказка, она не влияет на доступность и не заменяет основной атрибут;
• сохраняйте HTML-документ в кодировке UTF-8 и всегда используйте кавычки.

<!-- Плохо -->
<img src="gsc.jpg" alt="seo аудит, seo, аудит сайта">
<!-- Хорошо -->
<img src="gsc.jpg" alt="Отчет об индексировании в Google Search Console: проиндексировано 124 страницы, 17 исключены">
<!-- Плохо -->
<img src="logo.png" alt="логотип">
<!-- Хорошо (изображение-ссылка) -->
<a href="/catalog/vacuums"><img src="logo.png" alt="Перейти в каталог пылесосов"></a>

Что такое alt-текст и зачем он нужен

Альтернативный текст — это содержимое атрибута alt, описывающее конкретное изображение в HTML-коде. Изначально атрибут альт выполнял сугубо техническую задачу. При медленном интернете или ошибке сервера пользователи видели текстовое описание на пустом месте. Сегодня подобные сбои редки, но наличие этого поля стало стандартом разработки.

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

• помогает людям с нарушениями зрения узнать о содержимом графики через скринридеры;
• помогает краулерам понять смысл картинки и окружающий контекст.

Как и любой инструмент оптимизации, alt seo часто применяют с ошибками, допуская переспам или игнорируя синтаксис.

А на вашем сайте техничка в порядке?

• Подарим чек-лист по внутренней оптимизации
• Проконсультируем по SEO-вопросам

Получить чек-лист

Почему альтернативный текст так важен

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

Важность для SEO

Оптимизация alt img html напрямую влияет на ранжирование в поиске по картинкам. В нишах электронной коммерции пользователи часто ищут товары именно через визуальный поиск. Поисковые системы снижают видимость карточек товаров, если атрибут отсутствует или заполнен некорректно. Это ведет к потере целевого трафика.

Согласно актуальным рекомендациям Google Search Central (Image best practices), для улучшения видимости в Google Discover следует использовать изображения шириной не менее 1200 пикселей, внедрять мета-тег max-image-preview:large и отдавать предпочтение привлекательным фотографиям, а не логотипам.

Важность для доступности

Видимость в выдаче важна, но доступность (Accessibility) выходит на первый план. Стандарт WCAG 2.2 (Success Criterion 1.1.1) требует, чтобы нетекстовый контент имел текстовую альтернативу. Если описание передает реальный смысл, а не состоит из набора ключей, скринридеры (JAWS, NVDA, VoiceOver) корректно озвучат страницу.

Например, в руководстве по SEO-аудиту со скриншотами интерфейсов необходимо описать данные на каждом графике, а не писать везде дежурное «SEO-аудит».

Примеры alt-текста

Разберем хороший подход. В статье используются скриншоты из Google Search Console и Screaming Frog. Корректный код выглядит так:

5 классных SEO-кейсов

Круче, чем Гудини: как мы вырастили трафик в 2,2 раза

Все вы прекрасно знаете Гарри Гудини: этот фокусник мог выбраться из закрытой бочки, брошенной в воду. Примерно в таких же рамках оказались и мы, начиная работу с сайтом Eurorepar. Узкий функционал, жесткие требования. Но мы справились без магии, увеличив трафик х2!

Читать кейс

Читать кейс

Как выжать максимум из двадцатилетнего сайта

Можно ли выжать максимум из 20-летнего сайта и докрутить его до современных стандартов? А если есть отягчающие обстоятельства — накрутка поведенческих факторов, антиботы, да еще и админка капризничает и сама удаляет категории?

Читать кейс

Читать кейс

Долгая дорога в SEO и мощный прорыв

Наш клиент — интернет-магазин B2B промышленной тематики. Он достался нам после предыдущих подрядчиков, и первые год-два мы исправляли их ошибки. А потом началась долгая кропотливая работа, которая в итоге принесла желанный результат.

Читать кейс

Читать кейс

Qugo: вырастили трафик из блога платформы b2b в 9,7 раз!

Молодой сайт, сложная тематика b2b, крупные конкуренты — с такими вводными трафик и позиции оставляли желать лучшего. Но бы добились цели: повысили трафик и позиции, улучшили узнаваемость бренда

Читать кейс

Читать кейс

Эффективное ссылочное продвижение для федеральной аптечной сети

Федеральная аптечная сеть пришла в Kokoc Performance (входит в Kokoc Group) за ссылочным продвижением. Интересно, что в компании есть своя in-house команда по SEO, которая подготовила ссылочную стратегию, а за ее реализацией обратилась к нам.

Читать кейс

Читать кейс

1/5

Название файла также имеет значение. Использование осмысленных имен (вместо photo1.jpg) — базовое правило гигиены кода. Фоновый рисунок, заданный через CSS, не требует атрибута alt, так как не выводится через тег <img>.

Теперь превратим хорошие примеры в плохие, добавив спам и игнорируя правила:

Эти варианты не дают пользователю и роботу никакой полезной информации о визуальном объекте.

Типичные ошибки с альтернативным текстом

Переспам — не единственная проблема. Разберем частые ошибки и шаблоны их быстрого исправления:

• Отсутствие атрибута или пустое значение для информативной картинки. Решение: добавьте осмысленный текст для всех значимых элементов; для декоративных строго используйте alt="" без пробелов.
• Дублирование описаний для разных файлов. Решение: делайте текст уникальным. Используйте формулу: объект + отличительная деталь/ракурс + контекст.
• Слишком общие формулировки. Слово «собака» не описывает происходящее. Решение: уточните детали — «Щенок бигля нюхает кроссовок на ковре в гостиной».
• Автоматическая подстановка имени файла. Значения вида googlesearchconsole или IMG_2323 недопустимы. Решение: перепишите вручную, указав суть («Отчет Coverage с ошибками 404»).

Советы по написанию alt-текста

1. Откажитесь от перечисления ключей. Набор фраз через запятую не улучшит позиции страницы, но приведет к санкциям за спам.
2. Соблюдайте лимит длины. Технические ограничения скринридеров (например, JAWS) приводят к тому, что длинные строки разбиваются или читаются некорректно. Ориентир — 80–125 символов. Подробности выносите в основной текст страницы.
3. Вписывайте ключи естественно. Если запрос не соответствует визуальному ряду, откажитесь от него.
4. Не заменяйте текст картинками. Важная типографика должна верстаться HTML-кодом, а не вшиваться в графический файл.
5. Исключите вводные слова. Поисковики понимают тип файла по тегу. Писать «На этой фотографии изображено...» — тратить лимит символов впустую.
6. Проводите мысленный тест. Прочитайте написанное и попробуйте визуализировать объект. Если картинка в голове совпадает с оригиналом — задача выполнена.
7. Разделяйте функции. Для функциональных элементов описывайте действие (кнопка лупы получает alt="Поиск").

Особые случаи: когда alt пустой, а когда описывает действие

Правила заполнения меняются в зависимости от роли элемента в интерфейсе. Выделяют четыре основных сценария.

Декоративные элементы и иконки

Разделители, паттерны и абстрактные формы не несут смысловой нагрузки. Оставляйте атрибут пустым. Для надежности добавляйте aria-hidden="true", чтобы скринридер полностью проигнорировал узел.

<img src="divider.svg" alt="" aria-hidden="true">

Функциональные кнопки

Для input type="image" и графических кнопок требуется указывать совершаемое действие, а не внешний вид иконки.

<button type="submit"><img src="search.svg" alt="Найти товар"></button>
<input type="image" src="/buy.png" alt="Оформить заказ">

Изображения-ссылки

Здесь текст описывает цель перехода. Если рядом сверстана видимая текстовая ссылка, дублировать анкор в картинке не нужно — оставляем значение пустым.

<a href="/blog"><img src="banner.jpg" alt="Перейти в корпоративный блог"></a>
<a href="/blog"><img src="icon.svg" alt=""> Читать блог</a>

Логотипы компаний

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

<a href="/" class="logo"><img src="logo.svg" alt="Kokoc Group"></a>
<img src="logo.svg" alt="" aria-hidden="true"><span>Kokoc Group</span>

Эффективное SEO

• Гарантия результатов
• Комплексное развитие
• При любом тарифе отслеживаем динамику заявок и звонков с сайтов
• Регулярный пересмотр семантического ядра

Узнать больше

Как проверить, что на страницах используется альтернативный текст

Аудит визуального контента — обязательный этап технического SEO. Проверить код можно несколькими способами.

Для точечной проверки кликните правой кнопкой мыши по элементу и выберите «Просмотреть код» (Inspect). В панели DevTools подсветится нужный узел. Убедитесь, что атрибут присутствует и заполнен корректно.

Для быстрого анализа текущего URL в браузере Google Chrome установите расширение Web Developer. Перейдите по пути Images → Display Alt Attributes. Плагин выведет содержимое поверх всех графических блоков.

Для массового аудита всего сайта используйте краулеры Screaming Frog SEO Spider или Sitebulb. Запустите сканирование, перейдите на вкладку Images и отфильтруйте пустые или отсутствующие значения. Также обращайте внимание на размер файла — тяжелая графика замедляет загрузку.

Дополнительно проводите проверку на соответствие стандартам доступности:

• Lighthouse (вкладка Accessibility) — автоматически находит пропущенные теги и ошибки синтаксиса.
• axe DevTools или WAVE — подсвечивают проблемы с ролями элементов и кодировкой.
• NVDA (Windows) или VoiceOver (macOS/iOS) — ручной прогон страницы скринридером. Это золотой стандарт аудита, позволяющий услышать сайт так, как его воспринимают незрячие пользователи.

Коротко о главном

• Качественный текстовый контент работает в связке с визуальным. Подобрав релевантные иллюстрации и снабдив их точным техническим описанием, вы закрываете сразу две задачи: улучшаете поведенческие факторы и даете поисковым системам четкий сигнал о тематике страницы.
• Внимательное отношение к HTML-разметке упрощает восприятие информации любыми устройствами. Чем прозрачнее структура и семантика документа, тем стабильнее рост позиций в результатах поиска.