Я Максим, веб-разработчик. И я до сих пор удивляюсь, как часто на сайтах — даже крупных и хорошо оптимизированных — картинки висят без заполненных alt-тегов. Это бесплатный источник трафика из поиска по картинкам Яндекса и Google, который просто игнорируют. А ведь заполнение alt-тегов — это буквально пятнадцать-тридцать минут работы на среднюю страницу. Разбираю подробно: что такое alt, как он влияет на SEO, как правильно писать описания, какие ошибки совершают чаще всего и как массово проверить весь сайт.

Что такое alt-тег и зачем он создан

Атрибут alt в HTML-теге img — это текстовое описание изображения. Изначально он создавался для целей веб-доступности: если картинка не загрузилась из-за медленного соединения, ошибки на сервере или блокировки браузером — вместо неё отображается текст из alt. Если пользователь использует скринридер (программу чтения экрана, которой пользуются незрячие люди), скринридер зачитывает именно alt-текст, чтобы человек понял, что изображено на картинке.

Но для SEO alt играет ещё более важную роль. Поисковые системы до сих пор не могут «видеть» изображения так, как их видит человек. Да, нейросети становятся всё лучше в распознавании объектов на фотографиях, но основным источником информации о содержании картинки для Яндекса и Google по-прежнему остаются три вещи: alt-текст, окружающий текст на странице и имя файла изображения. Из этих трёх параметров alt — самый весомый.

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

Как alt-теги реально влияют на трафик

На одном из моих проектов — интернет-магазин мебели — мы провели простой эксперимент. Заполнили alt-теги для 1 200 фотографий товаров по шаблону: «[Название товара] [материал] [цвет] — фото». Через два месяца трафик из поиска по картинкам Яндекса вырос на 340 визитов в месяц. Это не гигантские цифры, но это бесплатный целевой трафик — люди, которые ищут конкретный товар и видят его фото.

Для интернет-магазинов с визуальным товаром (одежда, мебель, декор, ювелирные изделия, цветы) поиск по картинкам может давать до 10–15% органического трафика. Для сайтов услуг (ремонт, строительство, дизайн интерьеров) — портфолио с качественными alt-тегами тоже приводит клиентов через поиск по изображениям.

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

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

За годы работы я выработал набор принципов, которые дают лучшие результаты.

Описывайте буквально то, что изображено. Если на фото — кухня после ремонта, пишите: «Кухня после капитального ремонта в новостройке ЖК Центральный». Не нужно абстракций типа «красивый результат работы» или «фото 1». Чем конкретнее описание — тем точнее поисковик поймёт содержание.

Добавляйте ключевое слово, если оно уместно. Для страницы про ремонт кухонь: «Ремонт кухни под ключ — фото готового проекта в стиле минимализм». Ключевое слово вплетено естественно, описание остаётся информативным. Но не впихивайте ключевое слово насильно — если на фото крупный план розетки, не нужно писать «ремонт квартир под ключ недорого Москва». Пишите то, что реально видно на картинке.

Оптимальная длина — от трёх до десяти слов. Слишком короткий alt (одно слово) не даёт достаточно контекста. Слишком длинный (целое предложение на двадцать слов) — перегружает и может быть расценён как спам. Три-десять слов — золотая середина.

Не начинайте с «Изображение...» или «Фото...». Поисковик и скринридер и так знают, что это картинка — атрибут стоит внутри тега img. Начинать с «изображение» — пустая трата символов.

Каждый alt должен быть уникальным. Даже если на странице десять фотографий одного интерьера — каждая показывает разный ракурс или деталь. Опишите, что конкретно видно на каждом фото: «Кухня — общий вид», «Кухня — зона мойки с каменной столешницей», «Кухня — встроенная подсветка под шкафами».

Alt-теги для интернет-магазинов: шаблоны и практика

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

Я использую простой шаблон для товарных изображений: «[Название товара] [бренд] [ключевая характеристика]». Примеры: «Кроссовки Nike Air Max 90 белые мужские», «Сумка Michael Kors Jet Set коричневая кожаная», «Диван угловой Askona велюр серый». Для дополнительных фотографий товара добавляю контекст: «Кроссовки Nike Air Max 90 белые — вид сбоку», «Кроссовки Nike Air Max 90 — подошва крупным планом».

Для баннеров и изображений категорий: «Каталог мужских кроссовок Nike — весенняя коллекция». Для декоративных элементов категории — оставляю пустой alt (alt=""), чтобы не засорять индекс и не мешать скринридерам.

Разница между alt и title

Эти два атрибута часто путают. Alt — текстовое описание для поисковиков и доступности. Он обязателен и напрямую влияет на SEO. Title — всплывающая подсказка, которая появляется при длительном наведении курсора мыши на картинку. Он необязателен, на SEO влияет минимально и больше полезен для UX — например, чтобы показать дополнительную информацию о товаре.

Я заполняю оба атрибута, но приоритет всегда — alt. Если времени мало и нужно выбирать — заполняйте alt и не тратьте время на title.

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

Вручную проверять сотни и тысячи изображений — нереально. Для этого есть инструменты.

Screaming Frog SEO Spider — мой основной инструмент. Запускаете сканирование сайта, переходите на вкладку Images. Там видно все изображения, наличие alt, его содержимое. Можно отфильтровать картинки с пустым alt и экспортировать список в таблицу для дальнейшей работы.

Яндекс Вебмастер тоже показывает проблемы с изображениями в разделе «Диагностика». Для WordPress есть плагины (Media Library Alt Text), которые находят изображения без alt прямо из админки и позволяют заполнять их массово.

Мой подход для больших сайтов: сначала сканирую весь сайт через Screaming Frog, получаю список всех изображений без alt. Сортирую по важности страниц (главная, категории, топ-товары — приоритет). Заполняю alt для приоритетных страниц, потом постепенно добираюсь до остальных.

Распространённые ошибки

Первая и самая частая — alt равен имени файла. «IMG_20240315_143022.jpg» в качестве alt-текста — это бессмысленно и для поисковика, и для пользователя. Перед загрузкой изображений на сайт я всегда переименовываю файлы в человекочитаемые названия: krossovki-nike-air-max-90-belye.jpg.

Вторая — одинаковый alt для всех картинок на странице. Десять фотографий, и у каждой alt «ремонт квартиры». Это не помогает поисковику различить изображения и может быть расценено как переоптимизация.

Третья — спам-alt, набитый ключевыми словами: «ремонт квартир москва ремонт квартир цена ремонт квартир недорого ремонт». Это прямая дорога к пессимизации — Яндекс отлично распознаёт такие попытки манипуляции.

Четвёртая — alt для декоративных элементов. Разделители, фоновые узоры, иконки соцсетей — для них правильный вариант alt="" (пустой атрибут). Скринридер пропустит их, а поисковик не получит бесполезного мусора. Но именно пустой атрибут, а не отсутствие атрибута — это разные вещи в HTML.

Заполнение alt-тегов — это рутина, но рутина с высокой отдачей. Пятнадцать-тридцать минут на страницу — и вы получаете дополнительный канал трафика, который работает бесплатно и постоянно.