Alt-атрибут у картинок: SEO и доступность

Атрибут alt — это текстовое описание картинки, спрятанное в HTML-коде. Его не видят зрячие посетители, но видят поисковый робот и программа экранного доступа, которой пользуются люди с нарушениями зрения. Заполнить alt — дело пяти секунд, но именно эти секунды отделяют сайт, который индексируется в Яндекс.Картинках и доступен слабовидящим, от сайта, на котором половина контента «невидима».

01Что такое alt и зачем он нужен

Alt (от англ. alternative text) — это атрибут тега <img>, в который вы пишете короткое описание содержимого картинки. Выглядит так: <img src="kuhnya.jpg" alt="Светлая кухня из массива дуба">.

У атрибута две большие задачи. Первая — доступность: программа экранного доступа (скринридер) озвучивает alt вслух, и незрячий пользователь понимает, что за картинка перед ним. Вторая — SEO: поисковая система не «смотрит» на изображение глазами, она читает alt и по нему понимает, что показано, чтобы выдать картинку в Яндекс.Картинках и учесть в общем смысле страницы.

Есть и третья, бытовая ситуация: картинка не загрузилась — у пользователя медленный интернет или сбой на сервере. На месте изображения браузер покажет именно текст из alt. Это маленький, но реальный сценарий.

02Как написать хороший alt

Хороший alt — это короткое и честное описание того, что на картинке, в контексте страницы. Без штампов вроде «красивое фото» и без перечисления ключевых слов через запятую. Несколько правил, которые работают почти всегда:

• Описывайте суть, а не очевидное. Если на странице фото товара — назовите товар и важную деталь: «Межкомнатная дверь, эмаль белая, со стеклом». Не нужно писать «фотография двери на белом фоне».
• Учитывайте контекст. Один и тот же снимок офиса на странице «О компании» и на странице вакансий описывается по-разному: в первом случае — как офис, во втором — как рабочее место будущего сотрудника.
• Короче — лучше. Ориентир — 5–12 слов. Если описание длинное, вынесите его в подпись к изображению, а в alt оставьте суть.
• Без слов «картинка», «изображение», «фото». Скринридер сам сообщает, что это изображение. Дублировать не нужно.
• Без ключевых слов «в лоб». Поисковик давно умеет отличать описание от спама. Текст вида «купить дверь Москва дёшево доставка» — это сигнал переоптимизации.

03Когда alt оставляют пустым

Не у каждой картинки должно быть описание. Если изображение чисто декоративное — фоновый паттерн, разделитель, иконка рядом с уже подписанным текстом — alt оставляют пустым: alt="". Это правильная запись: она говорит скринридеру «здесь нечего читать, пропусти» и не нарушает доступность.

Совсем убирать атрибут alt нельзя. Если его нет, скринридер обычно начинает читать вслух имя файла — а это, как правило, что-то вроде «IMG underscore 4521 точка jpg». Для незрячего пользователя страница превращается в мусор.

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

04Особые случаи: логотипы, кнопки, инфографика

Логотип

Для логотипа в шапке сайта подойдёт alt вида «BrandEvo, логотип» или просто «BrandEvo». Если логотип одновременно ссылка на главную, скринридер прочтёт alt как название этой ссылки — поэтому название компании здесь уместно.

Иконка-кнопка

Если кнопка обозначена только иконкой (например, лупа поиска или крестик закрытия), alt должен описывать действие: «Поиск», «Закрыть». Без этого незрячий пользователь не поймёт назначение кнопки.

Инфографика и схемы

Сложную инфографику невозможно уместить в одну строку. В alt пишут краткую суть («Схема: путь клиента от заявки до заказа в 4 шага»), а подробное описание дублируют рядом обычным текстом или в подписи. Это и доступнее, и полезнее для SEO — поисковик любит, когда контент картинки продублирован текстом на странице.

05Alt и SEO: что реально влияет

Грамотно заполненный alt помогает странице ранжироваться в общей выдаче и попадать в Яндекс.Картинки. Но он работает не один: важны имя файла (kuhnya-iz-massiva.jpg вместо IMG_4521.jpg), вес и формат картинки, подпись рядом и общая структура страницы.

Если планируете системно подтягивать органический трафик через изображения, alt — обязательная часть базовой технической оптимизации. Подробнее о работе с поиском мы пишем в материале «Как писать SEO-тексты, которые читают люди и любит Яндекс» и в разделе про SEO-продвижение.

06Как быстро проверить свой сайт

Большие сайты не получится проверить руками, поэтому начните с выборочной диагностики:

• Откройте 5–10 ключевых страниц (главная, услуги, карточки товаров, статьи блога).
• Через инструменты разработчика в браузере посмотрите все теги <img> и убедитесь, что у смысловых картинок есть осмысленный alt, а у декоративных — пустой.
• Запустите страницы через любой автоматический чек-лист доступности (Lighthouse в Chrome или встроенные инструменты Яндекс.Вебмастера) — они подсветят картинки без alt.
• Включите скринридер на 5 минут и попробуйте «послушать» свою главную страницу. Это самый честный тест.

Если на сайте сотни изображений, удобнее закрыть задачу в рамках общей программы по доступности и SEO — вместе с шаблонами, формами и навигацией.

Официальная документация по теме — Справка Яндекс.Вебмастера.