Зачем оформлять изображения
Изображение работает на статью, если читатель понимает, что на нём показано, а поисковая система — как оно связано с текстом. У картинки есть четыре «слоя» описания: имя файла, альтернативный текст, подпись и окружающий текст. Каждый решает свою задачу, и заполнять их стоит осознанно, а не механически.
Имена файлов
Имя файла — первое, что видит поисковая система. Используйте описательные слова латиницей через дефис, а не автоматические названия камеры:
| Плохое имя | Хорошее имя | Почему |
|---|---|---|
| IMG_4821.jpg | ugolovoj-divan-seryj.jpg | Имя описывает содержимое |
| фото 1.png | shema-perenapravleniya-301.png | Латиница и дефис вместо пробела и кириллицы |
| scr1234final2.jpg | nastrojka-cms-shag-3.jpg | Осмысленное название вместо служебного |
| image.jpg | primer-hlebnyh-kroshek.jpg | Уникальное и понятное имя |
Правила транслитерации имён — в статье про имена изображений и поиск по картинкам.
Alt и подпись
- Alt описывает, что изображено, тем, кто не может его увидеть: программам экранного доступа и поисковым системам. Пишите кратко и по делу, без перечисления ключевых слов.
- Подпись добавляет то, чего нет на картинке: пояснение, источник, вывод. Дублировать alt не нужно.
- Декоративные изображения получают пустой alt, чтобы программы экранного доступа их пропускали.
<figure>
<img src='/img/ugolovoj-divan-seryj.jpg' width='800' height='533'
alt='Серый угловой диван с независимым пружинным блоком'>
<figcaption>Угловой диван: вид в сложенном состоянии</figcaption>
</figure>Размеры и формат
- Указывайте ширину и высоту: это защищает страницу от смещений при загрузке: CLS.
- Подбирайте размер под реальный вывод, а формат — под содержание: оптимизация изображений.
- Первое крупное изображение не откладывайте, остальные загружайте лениво: ленивая загрузка.
Типичные ошибки
- Одинаковый alt у всех изображений статьи.
- Alt, набитый ключевыми словами: «диван купить недорого диваны цена».
- Текст на картинке, которого нет в основном тексте: поисковая система его не прочтёт.
- Изображение с чужого сайта без указания источника и права использования.
Изображения тоже можно направить в поиск. Для крупных проектов есть отдельная карта: карта сайта для изображений, а разметка описана в статье про ImageObject. Общий порядок публикации — в чек-листе публикации статьи.
Быстрый аудит изображений в статье
- Откройте статью и посчитайте изображения: нужно ли каждое?
- Проверьте имена файлов в исходном коде: не остались ли «IMG_0001»?
- Убедитесь, что у каждого содержательного изображения есть осмысленный alt.
- Посмотрите вес файлов: крупные картинки замедляют страницу.
Такой аудит занимает пять минут на статью, а для блога из сотен материалов его удобно автоматизировать краулером, который показывает изображения без alt и с большим весом.
Частые вопросы
Как называть файлы изображений?
Описательными словами латиницей через дефис, отражающими содержание, например ugolovoj-divan-seryj.jpg, а не автоматическими названиями камеры.
Чем alt отличается от подписи?
Alt описывает изображение для тех, кто его не видит, и работает как замена картинке; подпись дополняет её для всех читателей.
Нужен ли alt у декоративных изображений?
Атрибут нужен, но пустой: так программы экранного доступа пропустят картинку, не читая лишнего.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.