ВойтиРегистрация

Описания картинок (alt)

пошаговая инструкция · Около часа

← Все инструкции

1. Что произошло

Текст-подсказка к картинкам нужен слабовидящим и поисковикам.

2. Почему это важно

Картинки не попадают в поиск по картинкам, сайт менее доступен. После исправления: Трафик из поиска по картинкам, доступность.

3. На каких страницах обнаружено

Атрибут alt у тегов img. Страницы с картинками без alt перечислены в аудите страниц и глубоком обходе.

Чтобы увидеть адреса на вашем сайте, откройте инструкцию из отчёта или добавьте домен в адрес: /fix/alt/ваш-сайт.ru.

4. Как исправить

Шаги

  1. Для содержательных картинок (товары, схемы, фото по теме) пишите короткое описание того, что на картинке, 5–12 слов, без «картинка» и «фото».
  2. Декоративные картинки (линии, фоны, иконки) оставляйте с пустым alt="" — тогда их пропустят программы чтения с экрана.
  3. Начните с самых посещаемых страниц и товарных карточек.
WordPress
  1. Медиафайлы → выберите картинку → поле «Атрибут alt». В записи — клик по картинке в редакторе → «Альтернативный текст». Для товаров WooCommerce alt берётся из названия товара, если поле пустое.
1С-Битрикс
  1. В инфоблоках у картинок есть поле «Alt» в свойствах файла; в шаблонах выводите alt="<?=htmlspecialcharsbx($item['PREVIEW_PICTURE']['ALT'])?>".
phpBB
  1. Картинки в сообщениях вставляйте с подписью. В шаблонах styles/…/template проверьте атрибуты img.
Конструкторы (Tilda, Wix…)
  1. В Tilda: клик по картинке → «Настройки → Alt». В Wix: «Изменить изображение → Alt-текст».

5. Готовый код

Замените example.com на свой домен. Перед правкой конфигурации сделайте резервную копию файла.

Любой сайт

Хорошо и плохо
<img src="/img/sofa.webp" alt="Угловой диван серого цвета в гостиной">
<img src="/img/line.webp" alt="">  <!-- декоративная -->
<!-- плохо: <img src="/img/sofa.webp" alt="диван купить диван недорого диван москва"> -->

6. Как проверить результат

  1. Команда ничего не выводит.
  2. Запустите аудит страниц или глубокий обход повторно.
Картинки без alt
curl -s https://example.com/page/ | grep -oiP '<img(?![^>]*\balt=)[^>]*>' | head

Чтобы перепроверить сайт, откройте отчёт и нажмите «Проверить заново».