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

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

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

Сделайте сайт удобным для пользователей

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

  • Используйте релевантные изображения. Следите за тем, чтобы ваши визуальные материалы соответствовали теме страницы. Желательно использовать только такие изображения, которые дополняют по смыслу остальной контент. Настоятельно не рекомендуется размещать на странице неуникальные тексты и изображения.
  • Продумайте, где именно должны находиться изображения. По возможности размещайте их рядом с текстом, который они иллюстрируют. Иногда имеет смысл расположить главное изображение в верхней части страницы.
  • Не размещайте важный текст на изображениях. В первую очередь это касается таких текстовых элементов, как заголовки страниц и пункты меню. Помните, что в таком виде он доступен не всем пользователям. Помимо прочего, текст на изображениях не распознают инструменты для перевода на другие языки. Чтобы ваш контент был максимально доступным, добавляйте текст на страницу только в разметке HTML, а также не забывайте указывать описания к изображениям в атрибутах alt.
  • Создавайте удобные, интересные и информативные сайты. Содержание веб-страницы в целом не менее важно при поиске в Google Картинках, чем визуальный контент, поскольку позволяет эффективнее его обрабатывать. Например, в качестве описаний к найденным картинкам могут быть использованы фрагменты текста страницы. При определении рейтинга изображений в результатах поиска Google учитывает также качество контента страницы.
  • Создавайте сайты, оптимизированные для мобильных устройств. Пользователи чаще выполняют поиск в Google Картинках с мобильных устройств, чем с компьютеров. Поэтому важно сделать свой сайт удобным для просмотра на устройствах любых типов и размеров. Проверка оптимизации для мобильных устройств поможет узнать, правильно ли показываются страницы и нет ли на них ошибок.
  • Продумайте структуру URL для изображений. Помимо названий файлов, Google при обработке визуального контента учитывает пути URL. Постарайтесь выработать логическую схему для URL изображений.

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

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

Отдельный результат поиска в Google Картинках Страница результатов поиска в Google Картинках

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

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

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

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

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

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

Ускорьте загрузку своих страниц

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

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

Добавьте качественные фотографии

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

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

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

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

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

Включите в атрибут alt дополнительное описание

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

Определяя тему изображения, 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 найти ваши страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример: <img 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>

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

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

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

Инструкции:

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

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

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

Дополнительная информация

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