Как оптимизировать картинки для SEO-выдачи

Картинки с вашего сайта могут попадать в Google — в миниатюры результатов, расширенные сниппеты, Knowledge Panels и Google News. В Яндексе они могут появиться в «Картинках» и тоже принести дополнительный трафик. Поэтому есть смысл заняться SEO-оптимизацией изображений. Рассказываем, как это сделать.

1. Что нужно сделать для SEO-оптимизации изображений
   • Используйте уникальные изображения и выкупите на них авторские права
   • Загрузите изображения в подходящем формате, оптимизируйте вес и размер
   • Пропишите понятные метатеги, подписи, имена файлов и используйте в них ключевики
   • Оптимизируйте EXIF-данные
2. Коротко: как оптимизировать изображения для SEO

Что нужно сделать для SEO-оптимизации изображений

На практике оптимизация картинок складывается из нескольких шагов. Нужно проверить права и уникальность, выбрать правильный формат и вес файла, прописать alt и подписи, очистить метаданные и добавить картинки в sitemap. Разберем каждый из этих этапов.

Используйте уникальные изображения и выкупите на них авторские права

У изображений ситуация схожая с текстом — поисковики ценят уникальный контент. Если у вас те же стоковые иллюстрации, что у десятков других сайтов, поиск объединит такие копии в одну картинку в выдаче. А в финальную выдачу попадет изображение с самого сильного домена.

Поэтому есть смысл добавлять на сайт уникальные изображения. Собственные фотографии, авторские иллюстрации и инфографика с большей вероятностью попадут в «Картинки» и приведут дополнительный трафик.

Уникальность изображений можно проверить на сервисах вроде TinEye. Если найдете десятки совпадений, лучше заменить картинку на менее используемую или отредактировать ее — обрезать, изменить фон или цвета.

Если нет собственного фотографа или дизайнера, можно купить изображения на стоках — Freepik, Pexels, Pixabay, Mockupfree. После покупки на случай претензий сохраните подтверждение права: чек или сертификат, ID картинки, текст лицензии.

Важный нюанс: не используйте изображения с пометкой «Editorial use only» — только для редакционного использования — в коммерческих проектах. Вы нарушите авторские права, и появится риск судебных разбирательств. Также не стоит брать первые попавшиеся картинки из Google — это чревато юридическими проблемами.

В Google Картинки можно отфильтровать результаты по лицензиям — например, показать только изображения с лицензией Creative Commons. Именно такой тип лицензии позволяет использовать изображения в коммерческих целях. В настройках поиска есть пункт «Права использования», где можно выбрать тип лицензии — Commercial или Creative Commons.

Загрузите изображения в подходящем формате, оптимизируйте вес и размер

Чем быстрее открывается страница, тем выше шанс занять хорошие позиции в выдаче и удержать пользователя. На уровне картинок ключевой показатель LCP — Largest Contentful Paint. Это время, за которое появляется самый крупный видимый элемент страницы. Обычно это большая обложка или главное фото товара. Нормой считается LCP до 2,5 секунд.

Проверить показатель можно на сервисах вроде PageSpeed Insights. Если проверка показывает больше 2,5 секунд, значит, что картинка грузится долго и, соответственно, снижает оценку страницы.

Оптимизировать изображения можно через три параметра: формат, размер в пикселях, вес файла.

Формат. По умолчанию лучше использовать AVIF или WebP — они не портят качество картинки, поддерживают прозрачность, но при этом весят меньше других вариантов. PNG подойдет для изображений с прозрачным фоном и четкими границами — скриншотов интерфейсов, схем, пиктограмм. Логотипы и иконки лучше грузить в SVG.

В старых браузерах, например, в Safari до версии 14 или в Internet Explorer, AVIF и WebP не поддерживаются. На верстке для них стоит подключать запасной вариант в формате JPEG. Вот как это выглядит в коде:

Размер. Картинки стоит экспортировать под фактическую ширину контейнера — ту, с которой они реально отображаются в вашей CMS. Для этого откройте в браузере инструменты разработчика, наведите мышку на изображение и посмотрите Rendered size — например, 800×533. 800 — это и есть фактическая ширина контейнера, под нее нужно экспортировать изображение.

Не стоит грузить в контейнеры шириной 800 пикселей более широкие картинки — так вы добавите изображению лишний вес и понизите LCP. Ширина контейнера должна соответствовать ширине изображения. 

Для экранов с высокой плотностью пикселей (Retina, 2×) нужна версия крупнее, иначе картинка будет выглядеть размыто. В нашем случае при базовой ширине 800 пикселей стоит добавить вариант 1600 px. Вот как это может выглядеть на верстке для фиксированной ширины в 800 пикселей:

Вес. Его стоит сжимать до уровня, где артефакты не бросаются в глаза. Обложке обычно достаточно веса в 150–250 KB, иллюстрациям — 80–150 KB, превью — 30–80 KB.

Для сжатия подойдут сервисы Squoosh, TinyPNG/TinyJPG, Optimizilla, Compressor.io. Для работы с картинками на WordPress пригодится Smush. 

Пропишите понятные метатеги, подписи, имена файлов и используйте в них ключевики

Поисковики пока не умеют «видеть» содержимое картинки в полной мере — они во многом опираются на текстовые подсказки. Поэтому правильно заполненные атрибуты и подписи — ключ к тому, чтобы SEO-картинка попадала в релевантную выдачу.

Основные элементы здесь — alt-текст, подпись под изображением и имя файла. Проверить их наличие или отсутствие можно в сервисе Screaming Frog SEO Spider. 

Alt картинки. Описание изображения для поисковых роботов и пользователей с нарушением зрения. Оно должно кратко пояснять, что изображено и как это относится к контексту страницы. Например:

Не оставляйте alt пустым, иначе поисковик просто не поймет, о чем ваша картинка. Не лишним будет добавить в него один-два ключевых слова по теме страницы, но без переспама.

Если на странице несколько похожих изображений, пропишите им разные alt — например, вид спереди, вид сзади. Иначе поисковик посчитает их дубликатами и покажет в выдаче только одно из них.

Title. Он появляется при наведении курсора на картинку. На ранжирование title практически не влияет, поэтому добавлять его необязательно. Но можно использовать, чтобы дать читателю дополнительное пояснение. Например:

Если решили добавить title, убедитесь, что он отличается от alt — не дублируйте текст дословно.

Подпись. Это текст непосредственно под картинкой на странице. Обычно он не является атрибутом HTML, вы просто оформляете его визуально в тексте. Нередко именно подписи анализируют боты Яндекса и Google на предмет соответствия картинки теме страницы.

Напишите под изображением краткое описание или пояснение. Если уместно, включите туда ключевой запрос или синоним, связанный с темой. Пример подписи: «Схема устройства фильтра кофемашины: на изображении показаны основные детали и их расположение».

Имена файлов и URL картинок. Название изображения попадает в URL и учитывается при индексации. Поэтому прежде чем загрузить файл, дайте ему понятное имя на латинице.

Недопустимо оставлять что-то вроде IMG_001.jpg или nbvfh3478.png — так бот не поймет, о чем файл. Не нужно дублировать стоп-слова вроде image или picture.

Лучше использовать 3–6 слов через дефис, без спецсимволов и пробелов. Примеры хороших имен: kofemashina-filter-scheme.webp, red-sneakers-nike.jpg. И избегайте откровенного переспама — не стоит называть файл kupit-kofemashinu-deshevo-seo.webp.

Оптимизируйте EXIF-данные

EXIF — служебные данные внутри изображения: камера, дата, геометки, эскизы, история правок. Они полезны фотографам или полицейским, но для веба чаще избыточны. Кроме того, дополнительные метаданные увеличивают размер файла. Поэтому перед загрузкой на сайт стоит очистить изображения от всего лишнего багажа.

Что стоит убирать:

• Геолокацию и личные данные. Фотоаппараты и смартфоны часто записывают координаты GPS снимка. Если вы не фотографируете достопримечательности для туристического блога, хранить геометки на сайте незачем.
• Миниатюры, превью, данные редактирования. Иногда в файл сохраняются эскизы (thumbnails) или история изменений (в XMP/IPTC метаданных). Эти данные добавляют лишний вес, их тоже лучше вычистить.
• Профиль цвета и ориентация. Оставьте минимально необходимое: встроенный цветовой профиль (ICC, например sRGB) и параметр ориентации изображения. Они важны для корректного отображения цветов и поворота кадра. Эта пара килобайт себя оправдывают.
• Авторство и права. Если вы являетесь автором изображения и хотите это обозначить, можно сохранить в IPTC-метаданных имя или информацию о лицензии.

Если хотите плашку Licensable в Google Картинках, добавьте к файлу IPTC-поля со ссылкой на условия лицензии (Web Statement of Rights, Licensor) или укажите лицензию в разметке Schema.org.

Очистить EXIF можно с помощью сервисов — тот же Squoosh и TinyPNG удаляют метаданные по умолчанию. Для полного контроля можно использовать утилиты вроде ExifTool — это консольная программа, способная удалять и редактировать любые теги. Либо десктоп-приложения типа ImageOptim (для macOS) — они легко чистят файлы от метаданных.

Создайте sitemap изображений

После того, как вы оптимизировали картинки на сайте, нужно позаботиться об их индексировании. Если у вас десятки или сотни изображений, особенно когда они загружаются через сложные скрипты, поисковым ботам бывает непросто их найти. Решение — создать Sitemap и помочь поисковикам.

Принцип следующий: для каждой страницы вы прописываете ссылки на ключевые картинки страницы: обложку, фото в галерее, важные иллюстрации. Добавляете блоки <image:image> с абсолютными ссылками — т.е. полным адресом с протоколом и доменом. 

Вот как это может выглядеть в файле карты сайта:

Коротко: как оптимизировать изображения для SEO