Фотографии и картинки — не только способ сделать сайт красивым визуально или представить контент в формате инфографики. Уделив внимание поисковой оптимизации изображений, можно получать дополнительный трафик из поиска по картинкам в Яндексе и Google.

Смысл оптимизации фото в том, чтобы поисковики могли понимать, что изображено на картинке и ранжировать ее в поиске по соответствующему запросу. Продвижение в Яндекс.Картинках и Google Images особенно важно в тех тематиках, где пользователи часто прибегают к поиску фото для решения своего вопроса — например, Одежда, Мебель, Ландшафтный дизайн и т.д.

В этой статье мы приведем 11 пунктов, необходимых для оптимизации изображений — чтобы поисковики «полюбили» ваши картинки. А также покажем, как анализировать трафик с картинок и поделимся своим кейсом.

  1. Заполнение alt
  2. Добавление подписей
  3. Создание sitemap
  4. Релевантные картинки
  5. Названия файлов
  6. Форматы файлов
  7. Оптимизация загрузки
  8. Качество изображения
  9. Оригинальный контент
  10. Микроразметка в поиске по картинкам
  11. Хранение файлов
  12. Анализируем трафик с картинок
  13. Кейс с результатами оптимизации изображений для сайта

1. Заполните атрибут alt для всех изображений

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

Этот атрибут также поможет пользователям при веб-серфинге с отключенными изображениями или если картинка не смогла быть загружена из-за низкой скорости соединения.

Вместо самой фотографии отображается значение Alt

Кроме того, люди с нарушениями зрения при просмотре сайтов часто используют программы-дикторы с экрана. Они зачитывают именно содержимое Alt, поэтому, если хотите обеспечить комфортный доступ к своему сайту, наличие этого атрибута необходимо.

Если у вас много ссылок-картинок, то текст в Alt будет считаться текстом этой ссылки. Это важно для перелинковки страниц внутри сайта.

Что писать в альте? Его содержимое должно кратко описывать изображение и не быть переспамлено ключевыми словами, как когда-то было очень популярно в SEO продвижении картинок.

Подсказки по заполнению Alt Гугл дает в своих рекомендациях по работе с Google Картинками. Пример:

Неудачный вариант (злоупотребление ключевыми словами):
<img src="koshka.jpg" alt="кот котенок котята кошка скоттиш фолд персидская британская сфинкс котэ корм для кошек дешевый корм для кошек еда для кошек">

Более удачный вариант:
<img src="koshka.jpg" alt="кошка">

Лучший вариант:
<img src="koshka.jpg" alt="кошка ест корм из миски">

2. Добавьте подписи к фотографиям по возможности

На ранжирование картинок в Яндекс и Гугл влияет не только замещающий текст в alt, но и весь остальной текст со страницы. При этом наиболее важным будет тот, что расположен ближе всего к тегу <img>. Для этого сделайте подписи к фотографиям, если это вписывается в дизайн.

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

В подписи можно не только описать изображенное, но и предоставить пользователям дополнительную информацию. Не стоит делать одинаковыми alt и подпись к фотографии.

3. Создайте sitemap для изображений

Поисковый робот точно найдет и проиндексирует все нужные изображения, если указать ссылки на них с помощью файла sitemap.xml.

Удобнее делать сайтмап для картинок отдельным файлом, но можно добавить ссылки на изображения и в существующий со своим пространством имен xmlns:image="http://www.google.com/schemas/sitemap-image/1.1". Оно одинаковое для Яндекс и Google, соответственно, достаточно сделать один sitemap, который будут понимать оба поисковика. Больше про формирование файла и описание тегов читайте в инструкции Яндекса или Google.

Пример кода:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>http://example.com/primer.html</loc>
    <image:image>
      <image:loc>http://example.com/kartinka.jpg</image:loc>
      <image:geo_location>Место съемки</image:geo_location>
      <image:title>Заголовок</image:title>
      <image:caption>Подпись к изображению</image:caption>
    </image:image>
    <image:image>
      <image:loc>http://example.com/photo.jpg</image:loc>
    </image:image>
  </url>
</urlset>

Если вы создаете отдельный файл, на который нет ссылки в корневом sitemap, то укажите ссылку на него в файле robots.txt с помощью директивы Sitemap или воспользуйтесь инструментами Яндекс.Вебмастер и Google Search Console — сообщите роботу о картиночном sitemap.

4. Используйте релевантные картинки

Размещайте в тексте только подходящие по смыслу картинки, которые соответствуют содержимому страницы. При этом не забывайте про заголовок и мета-описание самой страницы:

Сервис "Google Картинки" автоматически создает заголовки и описания для изображений, чтобы пользователь понимал, как тот или иной результат соотносится с его запросом. Это помогает пользователям решить, нажимать на результат или нет.
Нужные сведения мы получаем из разных источников, в числе которых заголовок и метатеги каждой страницы.

5. Называйте файлы с изображениями осмысленно

Google также советует давать файлам имена в соответствии с тем, что изображено на картинке. Например, если на детальной картинке на странице товара изображен миксер определенной модели, то лучшим названием для картинки будет “миксер-бренд-название модели.jpg”, а не “detail_photo.jpg” или ”big_image.jpg”.

Значение имеет и структура хранения файлов. В руководстве по оптимизации изображений Google заявляет:

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

6. Используйте поддерживаемые расширения файлов

Чтобы и поисковики, и пользователи не испытывали проблем с доступом к графическим файлам, используйте распространенные типы файлов. Для веб-сайтов это JPG, GIF, PNG, SVG или WebP.

JPG — самый распространенный растровый формат, подходит для большинства изображений: фото товаров, сотрудников и т.д.

GIF и PNG — чаще используются в случаях, когда нужно изображение с прозрачным фоном. При этом более современный PNG позволяет делать яркие и четкие изображения, но не поддерживает анимацию, в отличие от GIF. Для баннеров PNG может быть предпочтительнее JPG за счет особенностей сжатия изображения.

SVG — формат векторной графики, используемый обычно для размещения логотипов и иконок.

WebP — самый новый из перечисленных формат, предложенный компанией Google в 2010 году. Он обеспечивает то же качество картинки, что и JPEG и PNG, при гораздо более легком весе файла. При очевидных достоинствах, минус данного формата в том, что он пока не поддерживается браузером Safari.

7. Оптимизируйте вес изображений для быстрой загрузки

Вес картинки напрямую влияет на скорость загрузки графического контента. Задержка в данном случае не идет на пользу владельцам сайта, особенно, если речь идет об изображении товаров. В среднем верхняя граница для файла находится в районе 100 кб, но в зависимости от типа изображения (иллюстрация в статье, детальное фото) может быть и больше — особенно, если хватает мощности сервера.

В любом случае оптимизация изображений для web крайне важна. Чтобы они загружались быстро:

  • используйте сжатие: файлы в формате JPG могут быть уменьшены на 60-80% без визуальной потери качества. Для этого существует множество сервисов, в том числе бесплатных.
  • настройте превью: например, для листинга товаров сделайте маленькие изображения 300х300 пикселей, а большие картинки загружайте только в карточках по клику.
  • загружайте картинки по размерам: не ресайзьте одно и то же огромное изображение средствами HTML и CSS, а создавайте несколько размеров изображений под разные типы страниц.
  • используйте скрипт отложенной загрузки: для страниц с большими изображениями при медленной скорости подойдет скрипт lazy load (“ленивая загрузка”). В этом случае картинки будут подгружаться с сервера только в том случае, если будет выполнено событие, инициирующее загрузку: клик, скролл или фоновая загрузка. Данный способ позволяет уменьшить начальный вес страницы, время загрузки, использование системных ресурсов и расход трафика у пользователя, что в целом положительно сказывается на производительности. При внедрении Lazy Load убедитесь, что контент будет доступен роботу.

8. Изображение должно быть качественным на всех типах устройств

Одна и та же картинка будет выглядеть по-разному в зависимости от того устройства, с которого пользователь просматривает сайт: маленькое разрешение, отлично подходящее для смартфонов, будет смотреться значительно хуже на десктопах. Чтобы решить эту проблему, используйте адаптивные изображения.

Подготовьте несколько размеров одной и той же картинки и загружайте их при помощи тега <picture> или атрибута <img srcset>. В sitemap не надо выгружать все адреса, достаточно ссылки на самое большое/качественное изображение.

<img srcset>

Атрибут srcset позволяет указывать несколько версий одного изображения для экранов разных размеров.

<img srcset="example-320w.jpg 320w,
     example-480w.jpg 480w,
     example-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
      (max-width: 480px) 440px,
      800px"
src="example-800w.jpg" alt="адаптивное изображение">

URL, указанный в атрибуте src, используется в качестве резервного в том случае, если браузер не поддерживает srcset.

<picture>

Контейнер <picture> содержит один или более элементов <source> и один элемент <img>. User-agent анализирует атрибуты srcset, media и type элемента <source> и выбирает изображение, наиболее соответствующее макету страницы и типу устройства.

<picture>
  <source type="image/svg+xml" srcset="kartinka.svg">
  <source type="image/webp" srcset="kartinka.webp">
  <img src="kartinka.png" alt="большое изображение в PNG">
</picture>

Элемент <picture> часто используют для того, чтобы обеспечить HiDPI (Retina)-версию изображений для дисплеев с высоким разрешением, а также для добавления других форматов изображений, не поддерживаемых всеми браузерами.

9. Создавайте оригинальный контент

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

Если вы представляете товары или услуги, проведите фотосессии (с профессиональным фотографом или без) и воспользуйтесь помощью дизайнера для обработки результатов.

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

Важное значение имеет ссылка на качественное изображение и разрешение файла — чем больше, тем лучше. С точки зрения поисковиков, фотографии с бОльшим разрешением с большей вероятностью являются первоисточниками.

Найти дубликаты своих изображений можно с помощью сервисов TineEye или поиска в Google — достаточно указать ссылку на своем сайте или загрузить файл. Таким же способом можно убедиться, что ваша картинка достаточно оригинальна)

10. Микроразметка в поиске по картинкам

Внедрение на сайте микроразметки затрагивает и изображения. Например, разметка товаров Schema.org, часто используется в Google для создания сниппетов не только в текстовой выдаче, но и в поиске по картинкам.

Разметка Product в поиске по картинкам

В настоящий момент структурированные данные отображаются в поиске по картинкам для 3 типов данных: товары, рецепты, видео. Подробнее о внедрении микроразметки читайте в руководстве Google для вебмастеров.

11. Храните изображения на своем хостинге

Лучше размещать медиаконтент на своем хостинге. В этом случае вы всегда контролируете его доступность и, теоретически, скорость загрузки.
Но если графических файлов слишком много — используйте CDN. Сети доставки контента (Content Delivery Network) позволяют увеличить скорость и решить проблему нагрузки на сервер. Их применение имеет смысл для крупных порталов и сайтов с ежедневной многотысячной аудиторией, которые не хотят терять посетителей из-за медленной загрузки страниц. Адреса изображений в CDN также можно выгружать в sitemap для картинок.

Минус данной технологии в том, что физически картинки хранятся не на вашем сайте: если кто-то поделится ссылкой на ваше изображение, это не будет ссылкой на ваш сайт, а вы потеряете часть ссылочной массы. Так что для небольших сайтов имеет смысл оптимизация собственного ресурса, а не внедрение CDN.

Как посмотреть трафик с картинок

Отслеживать топ поиска по картинкам можно только в ручном режиме. Но чтобы зафиксировать поисковый трафик на изображения и следить за его ростом, можно воспользоваться инструментом Google Search Console. Зарегистрируйтесь в нем и добавьте свой ресурс — сбор статистики начнется с этого момента. Каждое зеркало отслеживается отдельно, поэтому добавьте варианты с www и без www, версии на разных протоколах (если сайт уже переведен на HTTPS). В этом случае у вас будут самые полные данные.

Чтобы увидеть данные по переходам из Google Картинок, откройте отчет Эффективность и установите в фильтре Тип поиска: Изображение.

Настройка отчета Эффективность в Search Console

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

Настройка фильтрации в отчете Эффективность

Помните, что данные начинают собираться только после добавления ресурса в Search Console, поэтому важно добавить его до проведения работ по оптимизации картинок, чтобы корректно оценить их результат.

При анализе данных убедитесь, что просматриваете данные по основному зеркалу в Google.

Search Console — отличный инструмент, но в нем доступна статистика только по поисковой системе Google и, соответственно, Google Images. Чтобы оценить трафик из Яндекс Картинок, можно воспользоваться Метрикой.

Откройте отчет Поисковые системы по своему сайту. Настройте группировку по источнику трафика. Для этого кликните по кнопке Группировки.

Управление данными в отчете производится сменой группировки

В открывшемся окне выберите Источники > Поиск > Поисковая система (детально). Иерархия группировки отобразится справа, при желании ее можно изменить, поменяв пункты местами.

Изменение группировки в настройках отчета Яндекс.Метрики

Теперь в отчете, раскрыв выпадающий список нажатием на значок “+” рядом с названием поисковой системы, вы увидите детальную информацию о переходах из поиска и популярных поисковых фразах.

Просмотр отчета по переходам с Яндекс.Картинок

Кейс по оптимизации изображений

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

Мы реализовали лишь часть представленных рекомендаций и вот результат: 2 месяца до сео оптимизации картинок и контрольные 2 месяца, спустя некоторое время. Число показов увеличилось более чем в 1,5 раза, рост кликов и CTR выдачи в 2 раза, средняя позиция по всему сайту в Google Images тоже выросла.

Рост CTR и трафика в Google Images

А что с Яндексом? Традиционно поиск по картинкам в Гугле более популярен, но некоторые пользователи предпочитают Яндекс. Как видно на скриншоте из Метрики, оптимизация изображений дала результат и в этом поисковике.

Рост числа визитов из поиска по картинкам Яндекса

Мы продолжаем работу над этим и другимии проектами для роста поискового трафика с изображений, ведь посетителей много не бывает🤗 Воспользуйтесь нашими рекомендациями, чтобы оценить влияние картинок в своей тематике. И обязательно сделайте это, если на вашем сайте много уникальных и качественных изображений!