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

Что такое атрибут alt и зачем он вообще нужен Атрибут alt — это текстовое описание изображения, которое прописывается прямо в HTML-коде тега <img>.

Что такое атрибут alt и зачем он вообще нужен

Атрибут alt — это текстовое описание изображения, которое прописывается прямо в HTML-коде тега <img>. Выглядит это так:

<img src='photo.jpg' alt='Красный деревянный стул на белом фоне'>

Изначально атрибут создавался для двух целей. Первая — доступность: если у пользователя отключены изображения, или он использует скринридер, alt-текст озвучивает или показывает, что именно находится на картинке. Вторая — техническая страховка: если файл не загрузился, браузер отобразит текстовую заглушку вместо сломанной иконки.

Со временем добавилась третья, не менее важная функция — поисковая оптимизация. Роботы Google, Яндекс и других поисковых систем не умеют «видеть» картинки так, как это делает человек. Они читают alt, чтобы понять содержание изображения и учесть его при ранжировании страницы и поиске по картинкам. Именно поэтому SEO alt текст для изображения давно стал обязательным элементом технической оптимизации.

Как атрибут alt влияет на SEO

Влияние alt-атрибута на позиции страницы — косвенное, но реальное. Вот конкретные механизмы:

  • Поиск по картинкам. Грамотно заполненный alt помогает изображению попасть в Google Images и Яндекс.Картинки. Для интернет-магазинов, фотостоков, медиа и портфолио это самостоятельный источник трафика.
  • Релевантность страницы. Поисковик учитывает текстовое окружение изображения, включая alt, при определении тематики страницы. Изображения с описательным alt усиливают семантику материала.
  • Core Web Vitals и UX. Корректный alt снижает число «битых» визуальных элементов, что косвенно влияет на поведенческие метрики.
  • Доступность как сигнал качества. Google открыто говорит, что сайты, удобные для всех пользователей, получают преференции. Заполненные alt-атрибуты — один из критериев доступности по стандарту WCAG.

Если на сайте сотни или тысячи изображений без alt — это типичная проблема, которую выявляет SEO-аудит. Исправление таких пробелов нередко даёт заметный прирост трафика из поиска по картинкам.

Правила написания хорошего alt-текста

Универсальный принцип: alt должен описывать то, что изображено, в контексте страницы. Не просто «что нарисовано», а зачем эта картинка здесь и что она добавляет к материалу.

Несколько практических правил:

  • Конкретность важнее общности. «Белая кофейная кружка с логотипом на деревянном столе» лучше, чем «кружка» или «фото продукта».
  • Длина — до 125 символов. Скринридеры обрезают alt длиннее этого порога. Ёмко и по делу.
  • Ключевое слово — органично, не насильно. Если страница о продаже офисных кресел, alt «Офисное кресло с поясничной поддержкой, модель X» — нормально. Alt «офисное кресло купить недорого Москва офисное кресло» — спам.
  • Не начинайте с «Изображение...» или «Фото...». Скринридеры и так сообщают пользователю, что это картинка. Начинайте сразу с описания.
  • Декоративные изображения — пустой alt. Если картинка чисто декоративная (фоновый паттерн, разделитель), пишите alt=''. Это сигнализирует скринридеру: «пропусти это». Отсутствие атрибута вообще — ошибка.

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

На практике встречаются одни и те же проблемы — независимо от размера сайта и тематики.

  • Alt отсутствует полностью. Самая распространённая ошибка. Особенно часто встречается на страницах, сгенерированных CMS автоматически, или при массовой загрузке изображений через медиабиблиотеку.
  • Alt = имя файла. «IMG_4521.jpg» или «photo_2024_03_15» — бесполезная информация ни для пользователя, ни для поисковика.
  • Одинаковый alt для всех изображений на странице. Если у пяти фотографий товара одинаковый alt — это дубли, которые не несут уникальной информации.
  • Переспам ключевыми словами. Набивать alt одними ключами — не оптимизация, а нарушение рекомендаций Google. Может привести к фильтру или ручным санкциям.
  • Слишком длинное описание. Alt на 300 символов — уже не alt, а подпись. Для развёрнутых описаний существует атрибут title или текст рядом с изображением.
  • Игнорирование контекста. Alt «собака» для фото на странице о породах — слабо. Alt «Немецкая овчарка в стойке, демонстрация стандарта породы» — полезно и для SEO, и для пользователя.

Alt-текст в разных типах проектов: специфика

Подход к заполнению alt зависит от типа сайта и назначения изображений.

Интернет-магазины. Для карточек товаров alt должен содержать название товара, модель, ключевые характеристики. Пример: «Смартфон Samsung Galaxy A55 синий, вид спереди». При наличии нескольких фото одного товара — каждое должно иметь уникальный alt с указанием ракурса или детали.

Статьи и блоги. Изображения иллюстрируют текст, поэтому alt дополняет содержание, а не дублирует заголовок. Для инфографики стоит кратко описать её суть: «Схема воронки продаж: осведомлённость, интерес, желание, действие».

Портфолио и галереи. Описывайте технику, объект, контекст. «Интерьер гостиной в скандинавском стиле, проект 2024, г. Москва» — такой alt будет работать и в поиске по картинкам.

Новостные и медиасайты. Alt для фотографий людей, событий, мест должен отвечать на вопросы: кто/что, где, когда (если важно). Это особенно ценно для индексации в Google Discover.

Если хотите системно выстроить оптимизацию изображений на сайте — начните с понимания общей стратегии продвижения. Об этом подробнее на странице SEO-продвижения сайтов.

Как проверить и исправить alt-атрибуты на существующем сайте

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

  • Google Search Console → раздел «Улучшения» → «Доступность» иногда сигнализирует об отсутствующих alt.
  • Screaming Frog SEO Spider — сканирует все изображения сайта и выдаёт список: без alt, с пустым alt, с alt длиннее 100 символов.
  • Яндекс.Вебмастер → «Качество сайта» → раздел доступности.
  • Расширение Wave (WebAIM) — визуально подсвечивает проблемы доступности прямо на странице, включая отсутствующие alt.
  • Встроенные инструменты CMS. В WordPress, например, можно фильтровать медиафайлы без alt через медиабиблиотеку или плагины вроде WP Accessibility Helper.

После аудита расставьте приоритеты: сначала исправляйте alt на коммерческих страницах (категории, карточки товаров, лендинги), затем — на информационных. Декоративные изображения получают alt='' в последнюю очередь.

Частые вопросы

Обязательно ли заполнять alt для каждого изображения на сайте?

Не для каждого. Декоративные изображения (фоны, разделители, иконки без смысловой нагрузки) должны иметь пустой атрибут alt='' — это правильно с точки зрения доступности. Заполненный alt нужен для всех изображений, несущих информацию: фото товаров, иллюстрации к статьям, инфографика, портретные фото.

Можно ли использовать одно ключевое слово в alt для всех изображений страницы?

Нет. Повторяющийся alt на одной странице — это дубли, которые не дают поисковику дополнительной информации. Каждое изображение должно описываться уникально, даже если это несколько фото одного товара с разных ракурсов.

Влияет ли alt-текст на ранжирование основных страниц или только на поиск по картинкам?

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

Заявка

Обсудить проект

Оставьте имя и удобный номер — Дмитрий или менеджер Divitio перезвонит в течение рабочего дня, уточнит задачу и предложит шаги: SEO, GEO, интеграция или разработка CRM, AI для маркетинга.