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

Полезное

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

Синтаксис и базовая структура alt-атрибута

Добавить alt-текст технически очень просто — достаточно прописать атрибут alt внутри тега <img>. Базовый синтаксис выглядит следующим образом:

Важно понимать, что атрибут alt обязателен с точки зрения стандарта HTML5. Валидатор W3C фиксирует его отсутствие как ошибку разметки. Даже если изображение декоративное, атрибут должен присутствовать — просто с пустым значением (alt="").

Тип изображения
Рекомендуемое значение alt

Информационное (фото товара, иллюстрация)
Описательный текст, отражающий суть

Декоративное (фоновый узор, разделитель)
Пустой атрибут: alt=""

Кнопка или ссылка-изображение
Функциональное описание действия

Логотип компании
Название компании + слово «логотип»

Инфографика или диаграмма
Краткое содержание данных на изображении

Требования к длине и содержанию alt-текста

Нет единого официального стандарта длины, однако существуют практические ориентиры, которые подтверждаются рекомендациями Google, рекомендациями WCAG 2.2 (актуальная редакция на 2025–2026 год) и анализом SEO-инструментов.

Оптимальная длина alt-текста — от 5 до 15 слов (50–125 символов).
Максимально допустимая длина, после которой скринридеры обрезают текст — 125 символов.
Alt-текст не должен начинаться со слов «изображение», «картинка», «фото» — скринридеры сами сообщают пользователю, что это изображение.
Ключевые слова должны вписываться органично, а не быть перечислены через запятую.
Нельзя дублировать один и тот же alt-текст для разных изображений на одной странице.

Alt-текст и SEO: как поисковики используют атрибут

По данным исследований Ahrefs и Semrush 2024–2025 годов, изображения с корректно заполненным alt-текстом попадают в Google Images в 3–4 раза чаще, чем изображения без него. Для интернет-магазинов трафик из поиска по картинкам составляет в среднем 12–22% от общего органического трафика.

Фактор
Влияние на ранжирование

Наличие alt-текста
Прямой сигнал для индексации изображения

Вхождение ключевого слова в alt
Умеренный положительный эффект

Соответствие alt-текста контексту страницы
Усиливает тематическую релевантность страницы

Спамное заполнение alt (keyword stuffing)
Риск санкций, снижение доверия

Добавление alt-текста в CMS без редактирования кода

Большинство популярных CMS позволяют добавлять alt-текст через интерфейс, не касаясь HTML напрямую. Рассмотрим основные платформы актуального стека 2025–2026 года:

WordPress: при загрузке изображения в медиабиблиотеку есть отдельное поле «Альтернативный текст» в правой панели.
Tilda: в настройках блока или элемента изображения предусмотрено поле Alt. Путь: кликнуть на изображение → «Контент» → поле Alt.
Shopify: в разделе Products → выбрать изображение → нажать «Edit alt text».
Bitrix: в редакторе страниц при добавлении изображения появляется всплывающее окно с полем «Альтернативный текст».
Webflow: при выборе элемента Image в панели Element Settings есть поле Alt Text.

Доступность и WCAG 2.2: требования к alt-тексту

Стандарт WCAG 2.2, опубликованный W3C, напрямую регулирует использование alt-атрибутов. Критерий успеха 1.1.1 Non-text Content относится к уровню A — минимально обязательному уровню доступности.

Все нетекстовые элементы должны иметь текстовую альтернативу.
Декоративные изображения должны быть скрыты от assistive technology через alt="" или role="presentation".
Сложные изображения (графики, схемы) требуют расширенного описания — через атрибут longdesc или примечание рядом с изображением.
Несоответствие WCAG 2.2 уровня A является нарушением европейского стандарта EN 301 549, обязательного для государственных сайтов в ЕС с 2025 года.

Типичные ошибки при заполнении alt-текста

Анализ 10 000+ сайтов, проведённый инструментом Screaming Frog в 2024 году, показал следующее распределение ошибок:

Ошибка
Доля сайтов с проблемой

Отсутствующий alt-атрибут
68%

Alt = имя файла (например, «img_0045.jpg»)
21%

Одинаковый alt для разных изображений
17%

Слишком длинный alt (более 150 символов)
9%

Keyword stuffing в alt
6%

Инструменты для проверки alt-текстов на сайте

Для аудита изображений используют как платные, так и бесплатные решения. Ниже — актуальный список инструментов на 2026 год:

Screaming Frog SEO Spider — сканирует весь сайт, выводит список изображений без alt или с пустым alt. Бесплатная версия — до 500 URL.
Google Search Console → Отчёт об удобстве использования — косвенно указывает на проблемы с доступностью.
Lighthouse (Chrome DevTools) — аудит accessibility, включает проверку alt-атрибутов. Даёт оценку от 0 до 100.
WAVE (wave.webaim.org) — визуально отмечает изображения без alt прямо на странице.
Ahrefs Site Audit — в разделе «Images» показывает все изображения с отсутствующим или дублированным alt.

Alt-текст для изображений в разных форматах

Разные форматы изображений имеют свои нюансы при написании alt-описаний:

SVG: если SVG встроен инлайново (<svg>), используют <title> внутри SVG-кода. Если подключён через <img>, alt работает стандартно.
WebP и AVIF: формат не влияет на синтаксис alt — атрибут прописывается так же, как для JPG и PNG.
Анимированный GIF: alt должен описывать действие или содержание анимации, а не просто первый кадр.
Изображение с текстом (баннер, инфографика): текст на изображении необходимо воспроизвести в alt-атрибуте полностью, либо продублировать в видимом тексте рядом.