Alt текст для изображений - это первое, что проверяют по любому SEO-чек-листу, и первое, что делают для галочки: вставляют название файла или оставляют поле пустым. За годы работы с сайтами на Tilda, WordPress и кастомными интернет-магазинами я вижу одну и ту же картину - карточки товаров без единого осмысленного alt-атрибута, баннеры с alt=“banner1”, инфографика без слова описания. От этого атрибута зависит позиция картинок в поиске, понимание содержимого страницы человеком со скринридером и даже то, что покажет браузер, если картинка не догрузилась.
Зачем нужен alt-атрибут картинки
Alt-атрибут - это текстовое описание, которое браузер подставляет вместо изображения, если оно не загрузилось, и которое озвучивает программа экранного доступа незрячему пользователю. У поисковых роботов своих глаз нет, они читают код страницы, и alt - это единственный внятный источник информации о том, что нарисовано на картинке, помимо имени файла и подписи рядом.
На практике я вижу три конкретных эффекта от нормально заполненных alt-текстов:
- трафик из поиска по картинкам - у клиентов на WooCommerce с 500+ товарами он обычно дает 5-12% от общих переходов на сайт, и без alt-текстов Google Images эти карточки просто не показывает;
- доступность для людей с нарушениями зрения - по данным WebAIM, свыше 25 млн взрослых в США сталкиваются с проблемами зрения, и без alt-атрибутов такие посетители физически не понимают, что изображено в каталоге или на лендинге;
- устойчивость страницы к сбоям загрузки - на медленном мобильном интернете картинки грузятся не всегда, и осмысленный alt показывает пользователю, что должно было быть на этом месте, вместо пустого прямоугольника.
Как описание изображений влияет на доступность и позиции в поиске одновременно
Здесь два требования пересекаются, и это удобно - одна и та же работа закрывает обе задачи. Для доступности критично описать смысл изображения так, как его описал бы человек собеседнику по телефону: не “фото1”, а “мужчина в синей куртке спускается по горнолыжному склону”. Для поиска по картинкам важно то же самое плюс контекст страницы - если это карточка товара, в alt логично упомянуть модель и ключевую характеристику, а не только общее описание сцены.
В Евросоюзе и ряде штатов США отсутствие alt-текстов на коммерческих сайтах уже становилось поводом для исков по доступности - это не абстрактный риск, а реальная судебная практика последних лет. Для российского рынка юридических рисков пока нет, но с точки зрения репутации и конверсии разница ощутима: у одного из моих клиентов на Tilda после проработки alt-текстов для 200+ изображений в каталоге органический трафик на карточки товаров вырос примерно на 18% за три месяца - без единой правки текста самих страниц, только за счет попаданий в выдачу картинок.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Как писать alt-текст для изображений - рабочие правила
Правила простые, но именно их обычно нарушают в 90% случаев, которые я проверяю у новых клиентов.
- Длина - ориентируюсь на 80-125 символов. Экранные дикторы обрезают более длинные описания, а поисковик игнорирует лишний хвост как переспам.
- Никогда не начинаю с “изображение”, “картинка”, “фото” - скринридер сам объявляет тег img, дублировать не нужно.
- Описываю то, что важно в контексте страницы, а не вообще всё видимое на снимке.
- Ключевые слова вписываю естественно, ровно один раз, без повторов через запятую.
- Для декоративных элементов - разделителей, орнаментов, фоновых текстур без смысловой нагрузки - оставляю alt пустым (alt=“”), это официально корректный вариант по WCAG, лучше пустого поля будет только пустая строка, а не “декор” или “разделитель”.
| Тип изображения | Плохой alt | Рабочий alt |
|---|---|---|
| Карточка товара | photo_0234.jpg | Кроссовки Nike Air Zoom Pegasus 40, синие, мужские |
| Баннер акции | banner | Скидка 20% на зимнюю коллекцию курток до 1 марта |
| Инфографика | infografika‑1 | Схема этапов оформления возврата товара за 5 шагов |
| Аватар автора | avatar | Никита Калинкин, автор блога о веб-разработке |
Типичные ошибки в alt-атрибутах изображений
Самые частые ошибки, которые я встречаю при аудите сайтов:
- keyword stuffing - alt вида “купить кроссовки недорого кроссовки мужские кроссовки Москва”, за такое Google скорее занизит доверие к странице, чем поднимет её в выдаче;
- одинаковый alt на все изображения товара - если в карточке 5 фото с разных ракурсов, а alt у всех “Кроссовки Nike”, поисковик и скринридер не различают их между собой;
- пустой alt на информативных изображениях - графики, скриншоты интерфейса, схемы без alt-текста для незрячего пользователя выглядят как дыра в контенте;
- alt как точная копия подписи под картинкой - дублирование не добавляет ценности, для скринридера это как услышать одно предложение дважды подряд;
- перевод названия файла в alt автоматическим плагином без проверки - получаются описания вида “img 20240512 154233”, это хуже, чем вообще ничего не делать, потому что создает иллюзию, что работа сделана.
Alt-текст для разных типов сайтов - практика на Tilda и WooCommerce
На Tilda штатного поля alt в редакторе картинок долго не было в удобном виде, и я решал это через кастомный JS-скрипт в нулевом блоке: скрипт проходит по DOM после загрузки страницы и проставляет alt-атрибуты по таблице соответствия “имя файла - описание”, которую клиент ведет в отдельной табличке. Это разовая настройка на 2-3 часа работы, дальше владелец сайта просто добавляет строку в таблицу при загрузке новой картinki.
В WooCommerce ситуация другая - там alt заполняется в медиабиблиотеке WordPress, но при каталоге в 300‑4000 SKU вручную это нереально. У одного клиента с интернет-магазином стройматериалов я собирал alt-тексты скриптом на Python: он брал название товара, категорию и ключевой атрибут (материал, размер, цвет) из карточки и по шаблону формировал уникальный alt для каждой из фотографий, включая ракурсы. На каталоге в 4000 товаров это заняло около 6 часов работы скрипта вместо условных 150 часов ручного заполнения. Похожие готовые заготовки для автозаполнения alt-текстов есть у меня в библиотеке готовых скриптов - можно взять за основу и адаптировать под структуру конкретного каталога.
Для инфографики с большим объемом данных одного alt часто мало - я дополнительно вывожу текстовую расшифровку графика прямо на странице под картинкой или в скрытом блоке с aria-describedby, чтобы человек со скринридером получил всю цифру, а не только общую формулировку из alt.
Как проверить и автоматизировать заполнение alt-текстов
Перед тем как что-то писать вручную, сначала смотрю масштаб проблемы. Screaming Frog или Sitebulb за один краулинг покажут список всех изображений без alt и с дублирующимися описаниями - на сайте в 1000 страниц это 10-15 минут работы вместо ручного просмотра каждой карточки.
Для больших каталогов я обычно строю пайплайн: скрипт на Python выгружает список товаров через API магазина, для каждого формирует черновой alt по шаблону из названия и характеристик, а там, где шаблона недостаточно (сложные фото, коллажи, инфографика), черновик генерирует языковая модель по фото и описанию товара - но финальную версию всегда просматривает человек перед заливкой обратно в CRM или CMS. Похожий процесс несложно собрать и в n8n: сценарий подхватывает новый товар из CRM, отправляет фото и текст карточки в LLM, получает черновой alt и записывает его обратно в WooCommerce через REST API - без ручного экспорта таблиц туда-сюда. Стоимость такой автоматизации на Python обычно от 20 000 ₽ в зависимости от объема каталога и сложности шаблонов описания.
Чтобы сайт работал без сбоев
Техподдержка
от 15 000 ₽/мес
Подробнее →Частые вопросы
Нужен ли alt-текст декоративным изображениям?
Нет, для чисто декоративных элементов - разделительных линий, фоновых узоров, иконок без самостоятельного смысла - правильный вариант оставить alt=”” (пустую строку). Скринридер в этом случае просто пропускает изображение и не отвлекает пользователя описанием ненужной детали. Ошибка - вообще убрать атрибут alt из тега img, тогда браузер и скринридер начинают озвучивать имя файла.
Сколько символов должно быть в alt-тексте?
Я ориентируюсь на 80-125 символов как на рабочий диапазон. Более длинные описания часть скринридеров и поисковых систем обрезает, а слишком короткие (“кроссовки”, “дом”) не дают достаточно контекста ни человеку, ни роботу. Для сложной инфографики лучше короткий alt плюс развернутая текстовая расшифровка рядом на странице, а не попытка втиснуть все данные в один атрибут.
Влияет ли alt-текст на позиции в обычной выдаче, а не только в картинках?
Прямого веса как у текста заголовка у alt нет, но косвенно влияние есть - Google использует его как один из сигналов релевантности страницы теме запроса, особенно если на странице мало текстового контента. На практике страницы с грамотно заполненными alt-текстами у меня стабильно получают дополнительный трафик именно за счет блока картинок в обычной выдаче Google и Яндекса, а не только через отдельный поиск по изображениям.
Можно ли заполнять alt-тексты автоматически через ИИ?
Можно и на больших каталогах это единственный реалистичный вариант, но черновик от модели стоит проверять хотя бы выборочно перед публикацией - модели иногда путают цвет, материал или ракурс на фото, особенно на однотипных товарных снимках. Я обычно генерирую черновики автоматически, а финальную вычитку оставляю на клиента или беру на себя как отдельный этап работы.