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

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

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

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

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

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

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

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

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

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

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

Для phpBB

  1. Картинки в сообщениях вставляйте с подписью. В шаблонах styles/…/template проверьте атрибуты img.

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

  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

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