Оптимизация изображений для поисковых систем

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

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

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

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

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

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

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

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

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

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

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

Поисковый робот точно найдет и проиндексирует все нужные изображения, если указать ссылки на них с помощью файла 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

Подготовьте несколько размеров одной и той же картинки и загружайте их при помощи тега <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)-версию изображений для дисплеев с высоким разрешением, а также для добавления других форматов изображений, не поддерживаемых всеми браузерами.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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