Alt-атрибут — обязательная подпись к изображению на странице. Он отвечает сразу за три задачи: ранжирование картинки в Google Картинках и Яндекс Картинках, текстовый сигнал релевантности страницы по теме изображения, доступность сайта для незрячих пользователей через скринридеры. Title-атрибут у тега img работает иначе — показывает подсказку при наведении и почти не влияет на SEO. Эта пара часто путается с метатегом Title в <head>, поэтому развязка трёх элементов — отдельная задача редактуры.
Что такое атрибуты Alt и Title у изображения
Alt (от alternative) и Title — два атрибута тега <img>, которые задают текстовые подписи к изображению. Они не отображаются на странице рядом с картинкой, но используются браузером, поисковыми системами и вспомогательными технологиями для понимания того, что изображено.
<img src="/images/plastikovye-okna-rehau.jpg"
alt="Установка пластикового окна Rehau в квартире в Минске"
title="Окно Rehau Blitz, белый профиль">Принципиальная разница между Alt и Title:
- Alt — обязательный атрибут. По стандарту HTML5 каждый тег
<img>должен иметь Alt. Если картинка декоративная — Alt оставляется пустым (alt=""), но сам атрибут должен быть. - Title — опциональный атрибут. Не обязателен. Показывается во всплывающей подсказке при наведении мыши на десктопе. На мобильных устройствах не работает.
- Alt отображается, если картинка не загрузилась. При ошибке загрузки или отключённых изображениях браузер показывает текст из Alt на месте картинки.
- Alt-текст читают скринридеры. Голосовые программы для незрячих пользователей озвучивают содержимое Alt, потому что само изображение для них недоступно.
В большинстве задач Alt — главное, Title — дополнительное. Заполнение Alt обязательно на каждой картинке сайта, Title — только там, где есть смысловой повод для подсказки.
SEO-функции атрибута Alt
Атрибут alt с точки зрения SEO имеет три функции, и каждая работает на свою метрику. Тема «alt-атрибут SEO» обычно делится на эти три направления: индексация изображения в Картинках, текстовый сигнал релевантности страницы, доступность для незрячих пользователей. Корректно прописанный alt для img — основа всех трёх эффектов.
Индексация в Google Картинках и Яндекс Картинках
Google Картинки и Яндекс Картинки — отдельные поисковые сервисы со своими алгоритмами и своим объёмом трафика. Это не побочный канал — для коммерческих ниш с визуальной составляющей (мебель, одежда, ремонт, кулинария, недвижимость) Картинки могут давать заметную долю органических переходов на сайт. По данным Search Engine Journal, для нишевых тем доля трафика с Google Картинок доходит до 20–25%.
Алгоритмы Картинок распознают изображение не только через визуальный анализ, но и через окружающий контекст: имя файла, Alt-текст, окружающий текст на странице, заголовок ближайшего H2 или H3. Alt — самый прямой и контролируемый сигнал из этого набора.
Текстовый сигнал релевантности для страницы целиком
Alt-тексты учитываются поисковой системой как часть текстового контента страницы. Они не равны обычному тексту по весу — для Google и Яндекса это технический атрибут, он учитывается с меньшим весом, чем основной текст (переспам Alt-текстов классифицируется как признак оптимизации, а не информативности). Но в сумме Alt-тексты дают дополнительный контекст темы страницы.
На странице категории интернет-магазина с 30 карточками товаров Alt-тексты картинок — это 30 коротких подписей, которые суммарно описывают ассортимент. Алгоритм считывает их как часть тематического контента страницы наряду с заголовками и описаниями.
Доступность сайта для пользователей с нарушениями зрения
Скринридеры — голосовые программы, которые озвучивают содержимое страницы незрячим пользователям. Когда программа доходит до тега <img>, она зачитывает текст из Alt. Без Alt пользователь слышит только «изображение, изображение, изображение» — теряет смысл части страницы.
Доступность учитывается через общие сигналы пользовательского опыта и качества страницы, хотя самостоятельным ранжирующим фактором не является. Page Experience signals Google покрывают Core Web Vitals, HTTPS, mobile-friendly и отсутствие интерстициалов — доступность в этот набор напрямую не входит. Lighthouse в Chrome DevTools проводит отдельный accessibility-аудит: его баллы — не сигнал ранжирования сами по себе, но низкие баллы по доступности часто коррелируют с другими проблемами страницы, которые на позиции влияют.
SEO-функции атрибута Title у картинки
Title-атрибут у тега <img> (его также называют title атрибут картинки, без дефиса) — это всплывающая подсказка, которая показывается при наведении курсора на изображение на десктопе. На мобильных устройствах Title не работает: подсказки нет, и атрибут не задействован.
SEO-влияние Title-атрибута картинки — слабое. Google в официальной документации Search Central указывает, что использует Title как дополнительный сигнал, но Alt важнее. Эмпирические исследования показывают, что Title-атрибут картинки не влияет на ранжирование в Картинках напрямую и слабо учитывается в общем тексте страницы.
Где Title-атрибут реально работает:
- Подсказка пользователю при наведении. Если у изображения есть нюанс, который полезен для понимания, но не нужен в основном Alt — Title уместен.
- Дополнительный контекст для поисковика при отсутствии хорошего Alt. Если Alt минимальный, Title даёт второй текстовый сигнал.
- Подпись к иконкам и интерактивным элементам. Особенно для кнопок-картинок без текстовой подписи.
На большинстве проектов заполнять Title у каждой картинки не имеет смысла — это удваивает работу с минимальной отдачей. Title пишется выборочно, там, где есть смысловой повод.
Title-атрибут картинки и метатег Title страницы
Слово Title в HTML встречается в двух разных контекстах, и эти контексты часто смешиваются.
| Параметр | Метатег Title страницы | Title-атрибут у img |
|---|---|---|
| Где расположен в HTML | <title> внутри <head> | Атрибут title="" у тега <img> |
| Влияние на ранжирование | Прямое, один из сильных факторов | Минимальное, слабый дополнительный сигнал |
| Где виден пользователю | Сниппет в выдаче, вкладка браузера, шеринг | Всплывающая подсказка на десктопе при наведении |
| Что отображается на мобильных | В сниппете выдачи | Не отображается совсем |
| Обязательность | Один на страницу, обязателен для каждой страницы | Опционален, можно не заполнять |
| Длина-ориентир | 50–60 символов для Google | До 100 символов |
Когда специалист говорит «настроить Title», нужно уточнить контекст: метатег страницы или атрибут картинки. На практике под Title без уточнения почти всегда подразумевается метатег страницы — это более частая задача с большим влиянием.
Правила составления Alt
Правила alt — шесть пунктов, которые отрабатываются при заполнении подписи к каждому изображению. Чтобы понять, как написать alt для конкретной картинки, достаточно последовательно пройти эти правила. Часть из них касается текстового SEO, часть — доступности для незрячих пользователей.
Описание содержимого, а не ключевые слова
Alt описывает то, что изображено, — содержимое картинки, а не списком запросов, по которым хочется ранжироваться. Это базовое отличие хорошего Alt от плохого. Описание содержимого — естественный текст, понятный человеку и скринридеру. Перечисление ключей — переспам, который снижает вес Alt-сигнала.
Слабо: alt="пластиковые окна Минск купить установка под ключ"
Сильно: alt="Установка пластикового окна Rehau в квартире в Минске"
Ключевое слово — если оно естественно входит в описание. Тема «alt и ключевые слова» часто обсуждается на старте оптимизации: можно ли вписывать ключи в Alt? Если изображение действительно показывает тему, под которую страница продвигается, ключевое слово попадёт в Alt естественно. На странице категории «Пластиковые окна» Alt картинки окна будет содержать слово «окно» — потому что это и есть окно. Специально втискивать ключ в Alt не нужно.
Длина Alt — 100–125 символов
Скринридеры зачитывают Alt полностью, без обрезки. Слишком длинный Alt замедляет навигацию для незрячих пользователей. Слишком короткий — теряет смысл.
Рабочий ориентир — 100–125 символов, что соответствует одному короткому предложению. Один-два значимых слова — мало (если только это не действительно простая иконка). Три-четыре строки описания — много.
Декоративные изображения — пустой Alt
Если изображение чисто декоративное (фоновая текстура, разделитель, элемент стилевого оформления) — Alt оставляется пустым: alt="". Это не отсутствие Alt, а явное указание скринридеру, что картинку нужно пропустить, не озвучивая.
<img src="/images/divider-line.png" alt="">Заполнять Alt у декоративных картинок словами «декоративная линия» или «разделитель» — ошибка: программа озвучит ненужный текст и снизит качество чтения для незрячих пользователей.
Язык Alt — язык целевой аудитории
Alt пишется на языке, на котором написан основной контент страницы. Для русскоязычных проектов в Беларуси и СНГ — на русском. Транслит ключевых слов латиницей в Alt (alt="plastikovye okna minsk") — устаревшая практика времён ранней индексации, сейчас она не работает. Google и Яндекс понимают русские слова в Alt напрямую.
Для двуязычных белорусских сайтов с белорусской и русской версиями — Alt на каждой версии своим языком.
Имя файла изображения тоже работает
Имя файла картинки — дополнительный сигнал релевантности для алгоритмов Картинок. Имя пишется латиницей через дефис, отражает содержание изображения, не содержит случайных номеров и хешей.
Слабо: IMG_8754.JPG
Сильно: plastikovye-okna-rehau-minsk.jpg
Это правило относится не к Alt напрямую, но работает в связке с ним. Алгоритмы Картинок суммируют сигналы из имени файла, Alt-текста и окружающего контекста на странице.
Правила Title-атрибута картинки
Title-атрибут заполняется выборочно — там, где есть смысловой повод для подсказки при наведении. Три случая, когда Title-атрибут уместен:
- Дополнительный контекст к Alt. Если Alt описывает изображение коротко, а есть полезный нюанс — Title раскрывает деталь, которая не нужна в Alt.
- Иконки и кнопки-картинки. Социальные иконки, кнопки оплаты, элементы интерфейса без текстовой подписи — Title даёт пользователю подсказку о функции.
- Карточки товаров с дополнительной информацией. На большой галерее изображений Title может содержать артикул, цвет, размер — то, что полезно при наведении, но не нужно в основном тексте Alt.
Title-атрибут не должен дублировать Alt. Если оба содержат одинаковый текст — Title теряет смысл, а скринридер дважды получает один сигнал.
Длина Title-атрибута — до 100 символов. Если подсказка длиннее, она частично обрезается в зависимости от браузера.
Типичные ошибки в Alt и Title
Восемь распространённых ошибок alt и title встречаются на проверках чаще всего. Типичные ошибки alt можно сгруппировать в две категории: ошибки SEO-плана (пустой Alt, переспам, дубли) и ошибки доступности (Alt транслитом, ненужный Alt у декоративных картинок). Каждая снижает либо SEO-эффект, либо доступность сайта для пользователей со скринридерами.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Alt отсутствует | Скринридер не озвучивает изображение, картинка не индексируется в Картинках, теряется текстовый сигнал | Заполнить Alt для каждой содержательной картинки |
| Alt пустой у содержательных изображений | То же, что отсутствие — но менее очевидно при автоматических аудитах | Различать декоративные (пустой Alt) и содержательные (заполненный Alt) |
| Переспам ключевых слов в Alt | Алгоритм снижает вес Alt-сигналов, картинка хуже ранжируется в Картинках | Описывать содержимое естественным языком, ключ упоминать один раз |
| Alt = имя файла | Шаблонный Alt вида «IMG_8754.JPG» — не несёт информации, скринридер озвучивает нерелевантный текст | Переписать Alt вручную или через шаблон CMS с подстановкой характеристик |
| Alt транслитом | Латиница в Alt для русскоязычной страницы — снижает релевантность, скринридер озвучивает «плэстиковье окна» побуквенно | Перевести на русский, оставить латиницу только для брендов и моделей |
| Alt длиннее 200 символов | Замедляет чтение скринридером, теряет смысл для пользователя, выходит за рекомендованную границу | Сократить до 100–125 символов, оставить главное |
| Дубль Alt-текста на разных изображениях | Одинаковый Alt на 10 картинках товаров — упущенная возможность дифференциации в Картинках | Каждому изображению — уникальный Alt с конкретикой |
| Title-атрибут дублирует Alt | При наведении пользователь видит то же, что слышит скринридер — нет смысла в подсказке | Либо разнести содержание Title и Alt, либо убрать Title |
Как проверить Alt и Title на сайте
Алгоритм аудита Alt-атрибутов на всём сайте — четыре шага, каждый с конкретным инструментом.
- Сканирование сайта краулером. Screaming Frog SEO Spider или Netpeak Spider пройдут по всем URL и соберут список всех тегов
<img>с указанием значения Alt. Видны пропуски, дубли и слишком длинные значения. - Точечная проверка через DevTools браузера. На конкретной странице открыть инструменты разработчика (F12), найти тег
<img>, посмотреть значение Alt и Title в инспекторе элементов. - Проверка индексации в Картинках. Запрос в Google:
site:domain.byс переходом в раздел «Картинки». В Яндекс.Картинках — аналогично через оператор. Видно, какие изображения сайта проиндексированы и какие подписи к ним подтянулись. - Проверка доступности через автоматические инструменты. Lighthouse в Chrome DevTools, axe DevTools, WAVE — все они показывают изображения без Alt как нарушение доступности с указанием URL и тега.
Полезные инструменты для работы с Alt:
- Screaming Frog SEO Spider. Краулит сайт, отчёт «Images» — все изображения с Alt-текстами, длиной, статусом.
- Netpeak Spider. Аналогичная функциональность с поддержкой проектов на русском, отдельный раздел по картинкам в результатах сканирования.
- Lighthouse. Встроен в Chrome DevTools, проверяет страницу на доступность, отмечает изображения без Alt.
- Search Console, отчёт «Покрытие» по картинкам. Показывает индексацию картинок и проблемы с ними.
- Яндекс.Вебмастер, раздел «Индексирование» по картинкам. Аналог отчёта Search Console для Яндекс.Картинок.
Часто задаваемые вопросы
Нужно ли заполнять Alt для картинок с ленивой подгрузкой (lazy loading) и через CDN?
Да, обязательно. Атрибут Alt — это часть HTML на стороне страницы, он индексируется независимо от того, когда и откуда загружается само изображение. Lazy loading через атрибут loading="lazy" или JavaScript-библиотеку не влияет на доступность Alt для поисковика — алгоритм считывает HTML, видит тег <img> с заполненным Alt и обрабатывает его так же, как обычные изображения. То же с CDN: путь до картинки в атрибуте src ведёт на CDN-сервер, но Alt остаётся в HTML основной страницы. Единственное исключение — картинки, добавляемые на страницу через JavaScript уже после загрузки DOM: их Alt поисковая система может не увидеть, если рендеринг JS не запустился. Для таких случаев нужен серверный рендеринг (SSR) или статическая генерация (SSG) с Alt в исходном HTML.
Можно ли использовать в Alt одну фразу из ключевых слов?
Можно, если эта фраза описывает то, что действительно изображено. Если ключевая фраза не отражает содержание картинки — её не нужно ставить в Alt. На странице категории интернет-магазина «Пластиковые окна» Alt каждой картинки окна естественно содержит слово «окно». Это и есть органичное вхождение ключа, а не переспам.
Что делать с большим архивом картинок без Alt на старом сайте?
Приоритизировать. Сначала Alt на главной странице, страницах услуг и категорий — это страницы с наибольшим SEO-потенциалом. Затем карточки товаров. Затем статьи блога. Старые архивные страницы без трафика — в последнюю очередь или вообще пропустить. Можно использовать массовую генерацию Alt через CMS-плагины или подрядную работу копирайтеров с шаблонами под каждый тип изображения.
Можно ли автоматически генерировать Alt через нейросети?
Технически — можно. Современные модели (GPT-4 Vision, Gemini, YandexGPT с распознаванием изображений) генерируют осмысленные Alt для типовых картинок. Проблема — точность для нишевых изображений: на специфических товарах, профессиональных терминах, локальных объектах модель может ошибаться. На двуязычных белорусских сайтах добавляется отдельный риск: модель может перепутать русский и белорусский, особенно на близких словах и устойчивых выражениях, и сгенерировать смешанный Alt. Рабочая практика — генерация через нейросеть с последующей ручной редактурой 20–30% результатов. Полностью автоматическая генерация без проверки — рискованно для серьёзных проектов.
Нужно ли заполнять Alt у иконок социальных сетей и логотипов?
У логотипа — да, обычно с названием компании: alt="Cropas — SEO-агентство". У иконок социальных сетей — да, с указанием платформы: alt="ВКонтакте", alt="Telegram". У интерфейсных иконок типа кнопок «закрыть», «меню» — Alt описывает функцию: alt="Открыть меню", alt="Закрыть". Скринридер озвучивает эти подписи, и без них пользователь не понимает, для чего кнопка.
Что важнее для SEO: Alt или имя файла картинки?
Alt важнее. Имя файла — дополнительный сигнал, который усиливает Alt, но сам по себе слабее. Имя файла полезно для тех картинок, где Alt не получится сделать осмысленным — например, для сгенерированных миниатюр. На основном контенте сайта приоритет — Alt, имя файла — приятный бонус с минимальной дополнительной работой.
Можно ли использовать один и тот же Alt на нескольких разных изображениях?
Не желательно. Если на странице товаров десять однотипных карточек, и у всех Alt «Пластиковое окно» — это упущенная возможность. Каждому изображению лучше дать уникальный Alt с конкретикой: модель профиля, цвет, размер, контекст использования. В случае большого однотипного каталога с тысячами товаров — допустим шаблон с подстановкой характеристик из карточки товара.
Учитывают ли Alt-атрибут белорусские поисковые сервисы и партнёры Яндекса?
Да, основные поисковые сервисы, работающие в Беларуси (Google и Яндекс), учитывают Alt одинаково. Доли поисковиков в Беларуси — примерно 65–75% Google и 25–30% Яндекса, и оба используют Alt как сигнал релевантности для картинок. Отдельные локальные белорусские агрегаторы и каталоги (Onliner-каталог, katalog.by) индексируют изображения по своим правилам — обычно с приоритетом на имя файла и Alt-текст, реже на окружающий контекст. Их роль в общем органическом трафике небольшая, но для нишевых ресурсов в этих каталогах визуальная составляющая важна. В практике продвижения сайтов в Беларуси Alt-разметка работает синхронно для всех каналов — отдельные настройки под белорусские каталоги обычно не требуются.
Как Alt связан с микроразметкой Schema.org для изображений?
Это два разных механизма. Alt — атрибут HTML на уровне тега <img>, описывает содержимое для скринридеров и алгоритмов. Schema.org разметка ImageObject — структурированные данные в JSON-LD или микроформате, описывают изображение в формате, понятном для расширенных сниппетов в выдаче. Обе работают в связке, не заменяют друг друга. На большинстве проектов достаточно правильно заполненного Alt, разметка ImageObject добавляется выборочно — для важных изображений на коммерческих страницах или для статей с уникальной авторской графикой.
