Лучшие практики SEO для изображений в Google

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

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

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

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

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

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

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

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

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

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

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

Поиск Google поддерживает изображения, на которые ссылается атрибут src элемента img в следующих форматах файлов:

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

в виде строки, закодированной в Base64, в следующем формате:
Хотя встраивание изображений может уменьшить количество HTTP-запросов, тщательно оценивайте, когда их использовать, так как это может значительно увеличить размер страницы. Подробнее об этом см. в разделе о преимуществах и недостатках встраивания изображений на нашей странице web.dev.

Оптимизируйте для скорости и качества

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

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

Оптимизируйте целевые страницы изображений

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

Укажите предпочтительное изображение с помощью метаданных

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

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

• Укажите свойство schema.org primaryImageOfPage
  с помощью URL или ImageObject.

  Или укажите свойство изображения URL или ImageObject и прикрепите его к основной сущности (используя свойства schema.org mainEntity
  или mainEntityOfPage ):
• Укажите тег meta og:image При выборе предпочтительного изображения для использования в разметке schema.org или теге

meta
og:image следуйте этим передовым методам: Выберите изображение, которое является релевантным и репрезентативным для страницы.

• Избегайте использования общего изображения (например, логотипа вашего сайта) или изображения с текстом в разметке schema.org или теге
• meta og:image Избегайте использования изображения с экстремальным соотношением сторон (например, слишком узкие или слишком широкие изображения). По возможности используйте высокое разрешение.
• Проверьте заголовок и описание вашей страницы
• Поиск Google автоматически генерирует ссылку на заголовок и фрагмент, чтобы наилучшим образом объяснить каждый результат и то, как он относится к запросу пользователя. Это помогает пользователям решить, стоит ли нажимать на результат. Вот два примера того, как могут выглядеть ссылки на заголовки и фрагмент на странице результатов поиска Google:

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

title

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

и snippet Добавьте структурированные данные
Если вы включите структурированные данные, Google сможет отображать ваши изображения в определенных расширенных результатах

, включая

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

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

my-new-black-kitten.jpg

лучше, чем

IMG00023.JPG
. Избегайте использования общих имен файлов, таких как image1.jpg pic.gif1.jpg когда это возможно. Если на вашем сайте тысячи изображений, вы можете рассмотреть возможность автоматизации именования изображений. Если вы локализуете свои изображения, не забудьте также перевести имена файлов, помня о том, что, ru, ru ru
Рекомендации по кодированию URL если вы используете нелатинские или специальные символы.

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

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

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

Плохо (отсутствует замещающий текст):

<img src=”puppy.jpg”/>

Плохо (переспам ключевыми словами):

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

Лучше:

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

Лучший:

<img src=”puppy.jpg” alt=”Щенок далматинца играет в апортировку“/>

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

Мы рекомендуем тестировать ваш контент путем
аудита доступности
и
использования эмулятора медленного сетевого соединения.

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

Отказ от встроенных ссылок в Google Картинках

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

1. Когда запрашивается ваше изображение, проверьте
   заголовок HTTP-реферера
   в запросе.
2. Если запрос поступает с домена Google, ответьте с помощью 200 кода состояния HTTP 204 или

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

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

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

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