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

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

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

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

<img src="koshka.jpg" alt="Рыжая кошка сидит на подоконнике">

Важно понимать, что атрибут 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-атрибуте полностью, либо продублировать в видимом тексте рядом.