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

Вы переработали структуру сайта, написали тексты, собрали семантику — и всё равно часть страниц не выходит туда, где должна быть. Знакомо? Одна из причин, которую часто пропускают, лежит буквально в каждом теге <img>. Пустой или бессмысленный атрибут alt — и поисковик просто не понимает, о чём ваши картинки.

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

Что такое атрибут 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-аудит. Исправление таких пробелов нередко даёт заметный прирост трафика из поиска по картинкам.

Пример. Допустим, у вас интернет-магазин мебели на 600 карточек товаров. У каждой — по 3–5 фотографий, и почти все с пустым или автоматически сгенерированным alt вроде «IMG_3847». Поисковик не понимает, что изображено, и не индексирует эти фото в «Картинках». После заполнения alt по модели «Диван угловой серый, ткань велюр, раскладной» карточки начинают появляться в визуальном поиске — и это отдельный канал трафика, который раньше просто не работал.

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

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

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

  • Конкретность важнее общности. «Белая кофейная кружка с логотипом на деревянном столе» лучше, чем «кружка» или «фото продукта».
  • Длина — до 125 символов. Скринридеры обрезают alt длиннее этого порога. Ёмко и по делу.
  • Ключевое слово — органично, не насильно. Если страница о продаже офисных кресел, alt «Офисное кресло с поясничной поддержкой, модель X» — нормально. Alt «офисное кресло купить недорого Москва офисное кресло» — спам.
  • Не начинайте с «Изображение...» или «Фото...». Скринридеры и так сообщают пользователю, что это картинка. Начинайте сразу с описания.
  • Декоративные изображения — пустой 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, и для пользователя.
Частая ошибка. При массовой загрузке фотографий через медиабиблиотеку WordPress или похожие CMS alt часто заполняется автоматически именем файла — «product-image-1», «banner_main» и подобным. Это лучше, чем ничего, но всё равно бесполезно. Не забывайте редактировать alt вручную хотя бы для коммерческих страниц.

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

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

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

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

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

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

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

Дмитрий Сериков
Дмитрий Сериков · основатель Divitio

На проектах чаще всего вижу одну и ту же картину: alt либо пустой, либо заполнен по принципу «главное, чтобы было». Когда начинаем аудит, первым делом смотрю на коммерческие страницы — категории и карточки товаров. Именно здесь потери трафика из «Картинок» наиболее ощутимы, и именно здесь правки дают результат быстрее всего. Здесь обычно спорят: стоит ли тратить время на alt для сотен изображений вручную? Моя позиция — да, для ключевых страниц это обязательно. Для остального можно выстроить шаблон на уровне CMS, который хотя бы подставляет название товара и его основные характеристики. Это уже в разы лучше, чем «IMG_0042».

Как проверить и исправить 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 не дублирует имя файла (IMG_XXXX, photo_2024 и подобное)
  • Длина alt не превышает 125 символов
  • На одной странице нет двух изображений с одинаковым alt
  • Ключевые слова вписаны естественно, без повторов и перечислений
  • Alt не начинается со слов «Изображение», «Фото», «Картинка»
  • Для товаров с несколькими фото — каждое фото описывает свой ракурс или деталь

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

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

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

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

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

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

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

Заявка

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

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