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

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

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

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

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

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

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

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

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

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

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

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

Для WordPress

  1. Медиафайлы → выберите картинку → поле «Атрибут alt». В записи — клик по картинке в редакторе → «Альтернативный текст». Для товаров WooCommerce alt берётся из названия товара, если поле пустое.

Общее для любого сайта

  1. Для содержательных картинок (товары, схемы, фото по теме) пишите короткое описание того, что на картинке, 5–12 слов, без «картинка» и «фото».
  2. Декоративные картинки (линии, фоны, иконки) оставляйте с пустым alt="" — тогда их пропустят программы чтения с экрана.
  3. Начните с самых посещаемых страниц и товарных карточек.

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

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