Картинки без подписи (alt): как и зачем подписывать изображения
Что это значит
Подпись alt — это короткое описание картинки в коде страницы: <img src="kirpich.jpg" alt="Кирпич облицовочный красный">. Посетитель её не видит, пока картинка загружается нормально. На проверенных страницах есть картинки без подписи совсем, картинки-ссылки с пустой подписью и без другого текста или подписи, которые просто повторяют имя файла (IMG_1234.jpg).
Чем мешает
По подписи Яндекс и Google понимают, что изображено, и показывают картинку в поиске по картинкам: оттуда тоже приходят посетители. Программы для незрячих зачитывают подпись вслух, без неё они читают имя файла или пропускают картинку. У картинки-ссылки без подписи у ссылки вообще нет названия. Это не срочно, но для магазинов и сайтов с фото работ подписи дают дополнительный трафик.
Как исправить
WordPress
- Откройте «Медиафайлы → Библиотека», выберите картинку и заполните поле «Атрибут alt» (или «Альтернативный текст»). Для картинок внутри записей: выделите блок «Изображение» и заполните «Альтернативный текст» в настройках справа.
- У товаров WooCommerce подпись берётся из того же поля «Атрибут alt» в медиатеке. Плагины вроде Yoast и Rank Math подсвечивают картинки без alt при редактировании записи.
Tilda
- Откройте блок с картинкой → «Контент» → у каждой картинки заполните поле «Описание картинки (alt)» или «SEO: alt». В Zero Block: выделите картинку → в настройках элемента поле «Alt». Опубликуйте страницу.
1С-Битрикс
- В карточке элемента инфоблока (товар, новость) у поля картинки есть «Описание» — его шаблон обычно выводит в alt. Заполните описания у главных картинок товаров и разделов.
- Если описание заполнено, а alt на сайте пустой, шаблон компонента не выводит его. Попросите разработчика выводить в alt описание картинки или название элемента.
OpenCart
- В стандартной теме alt у картинок товара и категории — это их название, отдельно заполнять не нужно. Если alt пустой, его убрал шаблон или модуль: нужен разработчик.
- Для картинок в описаниях и баннерах: в редакторе описания нажмите на картинку → «Свойства» → поле «Альтернативный текст».
Другой движок или свой сервер
- Добавьте атрибут
altк картинкам с содержанием:<img src="photo.jpg" alt="Монтаж кровли из металлочерепицы, Минск">. - Украшениям (фоны, иконки, разделители) оставьте пустую подпись
alt="": так программы для незрячих их пропустят. - У картинки-ссылки (логотип, баннер) подпись должна говорить, куда ведёт ссылка:
<a href="/"><img src="logo.svg" alt="Главная страница"></a>.
Пример кода
Замените example.by на адрес своего сайта.
<img src="/upload/kirpich-m150.jpg" alt="Кирпич облицовочный М150, красный" width="800" height="600">
<img src="/img/divider.svg" alt="">Подпись — это описание того, что видно, а не список ключевых слов. Хватит 5–10 слов.
Можно не исправлять, если есть более важные проблемы.
Если сайт делал подрядчик
Перешлите ему ссылку на отчёт и эту просьбу:
Добавьте, пожалуйста, понятные подписи alt к картинкам с содержанием (товары, фото, логотип-ссылка), а украшениям оставьте alt="".
Как проверить, что всё исправлено
Откройте страницу, нажмите правой кнопкой на картинку → «Просмотреть код»: у тега <img> должен быть атрибут alt с описанием. Проверьте сайт снова на yasnoseo.by.