Рекомендации по поисковой оптимизации контента для Google Картинок

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

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

Как оптимизировать изображения, чтобы они показывались в результатах поиска Google:

  1. Помогайте нам обнаруживать и индексировать ваши изображения
  2. Улучшите целевые страницы, связанные с изображениями

Помогайте нам обнаруживать и индексировать ваши изображения

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

Вставляйте изображения с помощью элементов HTML

Стандартные HTML-элементы помогают поисковым роботам находить и обрабатывать изображения. Google может находить изображения в атрибуте src элемента <img>, даже от является дочерним по отношению к другим элементам, таких как <picture>. Google не индексирует изображения CSS.

Рекомендуемый вариант

<img src="puppy.jpg" alt="Щенок золотистого ретривера" />

Нежелательный вариант:

<div style="background-image:url(puppy.jpg)">Щенок золотистого ретривера</div>

Используйте файлы Sitemap для изображений

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

Файлы Sitemap для изображений, в отличие от обычных файлов такого типа, могут содержать URL из других доменов в элементах <image:loc>. Это позволяет использовать для размещения картинок сети доставки контента (CDN). При использовании CDN рекомендуем подтверждать право собственности на доменное имя CDN в Search Console, чтобы мы могли уведомлять вас о выявленных ошибках сканирования.

Адаптивные изображения

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

Адаптивные изображения добавляются с помощью элемента <picture> или атрибута srcset элемента img. Однако они распознаются не всеми браузерами и поисковыми роботами. Поэтому рекомендуем всегда добавлять в код резервный URL с помощью атрибута src.

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

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

Элемент <picture> представляет собой контейнер, с помощью которого группируются теги <source> для разных версий одного и того же изображения. Браузер может выбрать подходящий вариант изображения с учетом характеристик устройства, таких как плотность пикселей и размер экрана. Кроме того, элемент picture удобно использовать с новыми графическими форматами: если они не поддерживаются тем или иным клиентом, изображение будет загружено в более старом формате.

Согласно разделу 4.8.1 стандарта HTML, при использовании элемента picture элемент img должен быть представлен в качестве резервного с атрибутом src. 

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

Используйте поддерживаемые графические форматы

В Google Поиске поддерживаются изображения, на которые задана ссылка в атрибуте src тега img. В число совместимых форматов файлов входят: BMP, GIF, JPEG, PNG, WebP, SVG и AVIF . Также старайтесь, чтобы расширение файла всегда соответствовало его типу.

Вы также можете встраивать изображения при помощи URI с данными. Для этого укажите в качестве значения атрибута src элемента img строку следующего формата (в кодировке Base64): 

<img src="data:image/svg+xml;base64,[data]">

Встроенные изображения позволяют уменьшить количество HTTP-запросов, но использовать их следует с осторожностью, поскольку в результате объем кода на странице может существенно возрасти. Более подробно о плюсах и минусах встроенных изображений рассказывается в специальном разделе на сайте web.dev.

Повысьте скорость загрузки и качество контента

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

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

Улучшите целевые страницы, связанные с изображениями

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

Уделите внимание заголовку и описанию страницы

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

Иллюстрация, на которой показаны заголовки и описания в результатах поиска картинок

Нужные сведения мы получаем из разных источников, в числе которых теги title и meta каждой страницы.

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

Как добавить структурированные данные

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

Соблюдайте общие рекомендации в отношении структурированных данных, а также правила, касающиеся конкретного типа этих данных. В противном случае такая разметка не будет использоваться для показа расширенных результатов в Google Картинках. Чтобы в Google Картинках показывались значки и расширенные картинки, структурированные данные любого типа должны содержать атрибут image. Ниже приведены примеры того, как расширенные результаты могут быть представлены в Google Картинках:

Как могут выглядеть расширенные результаты в Google Картинках

Используйте информативные названия файлов, заголовки и текст в атрибутах alt

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

Название файла может выполнять практически ту же функцию, что и заголовки с подписями. Названия должны быть короткими и информативными (например, my-new-black-kitten.jpg лучше, чем IMG00023.JPG). Старайтесь не использовать шаблонные и бессмысленные названия, такие как image1.jpg, pic.gif, 1.jpg. Если на сайте тысячи изображений, попробуйте автоматизировать их именование. Если вы переводите текст на изображениях, то необходимо переводить и названия файлов. При использовании нелатинских или специальных символов учитывайте рекомендации по кодировке URL.

Атрибут, который играет наиболее важную роль при предоставлении метаданных для изображения, – альтернативный текст (описание изображения). Он делает контент доступным для пользователей, которые не видят изображения на веб-страницах. Например, когда используют программы для чтения с экрана, или из-за медленного подключения к интернету.

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

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

Нежелательный вариант (нет атрибута alt):

<img src="puppy.jpg"/>

Нежелательный вариант (слишком много ключевых слов):

<img src="puppy.jpg" alt="собака щенок собачка маленькая собачка ретривер лабрадор волкодав сеттер пойнтер корм для собак дешевый корм для собак еда для собак"/>

Более удачный вариант:

<img src="puppy.jpg" alt="щенок"/>

Рекомендуемый вариант:

<img src="puppy.jpg" alt="Щенок далматина играет с мячиком"/>

Добавляя атрибут alt для улучшения доступности изображений, следуйте рекомендациям консорциума W3. Для элемента <img> можно добавить атрибут alt, а для встроенных элементов <svg> подойдет вариант <title>. Пример: 

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

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

Отключите интерактивные ссылки в Google Картинках

Вы можете запретить показ интерактивных ссылок в результатах поиска Google Картинок, и тогда на странице с результатами не будут отображаться полноразмерные изображения. Инструкции

  1. При запросе вашего изображения проверяйте заголовок HTTP Referer.
  2. Если запрос исходит из домена Google, отправляйте ответ с кодом статуса HTTP 200 или 204 (Нет контента).

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

Вы также можете полностью запретить показ изображения в результатах поиска.

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