У Пошуку 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 Search автоматично створює посилання-заголовки та описи для зображень, щоб користувач розумів, чому показаний той чи інший результат і чи варто на нього натискати. Нижче наведено приклади того, як посилання-заголовки та описи можуть бути представлені на сторінці з результатами пошуку Google:

Потрібні відомості ми отримуємо з різних джерел, серед яких теги title та meta кожної сторінки.

Дотримуйтесь наших рекомендацій щодо заголовків та описів, щоб зробити їх максимально інформативними.

Як додати структуровані дані

Якщо ви додасте структуровані дані, ваші зображення будуть відображатися в Google Pictures у вигляді розширених результатів (зокрема, супроводжуватися добре помітними значками). Це дозволить користувачам отримати уявлення про ваш сайт, завдяки чому його будуть відвідувати найбільш зацікавлені з них.

Дотримуйтесь загальних рекомендацій щодо структурованих даних, а також правил, що стосуються конкретного типу цих даних. В іншому випадку така розмітка не буде використовуватися для показу розширених результатів у Google Картинках. Щоб значки та розширені картинки відображалися в Google Pictures, структуровані дані будь-якого типу повинні містити атрибут image. Нижче наведено приклади того, як розширені результати можуть бути представлені в 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>

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

Якщо посилання на зображення є на декількох сторінках сайту, подивіться, який загальний ліміт на сканування на ньому встановлено. Зокрема, послідовно вкажіть зображення з одним і тим же URL. Тоді Google зможе кешувати зображення для багаторазового використання і не запитувати його кілька разів.

Вимкніть інтерактивні посилання в Google Pictures

Ви можете заборонити показ інтерактивних посилань у результатах пошуку Google Pictures, і тоді повнорозмірні зображення не відображатимуться на сторінці з результатами. Інструкції:

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

Google все ще зможе виявляти зображення під час сканування сторінки, але в результатах пошуку буде відображатися зменшене зображення, створене під час сканування. До такої заборони можна вдатися в будь-який момент, причому повторна обробка зображень на сайті не знадобиться. Це не вважається маскуванням і не спричинить санкцій.

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

Оптимізуйте зображення для безпечного пошуку

Користувачі, які не хочуть бачити в результатах пошуку Google сайти, зображення та відео для дорослих, можуть включити Безпечний пошук. У цьому випадку відображаються розмиті зображення або застосовується фільтр, щоб приховати небажаний контент. Щоб ми могли застосувати функцію безпечного пошуку до ваших сторінок, якщо це необхідно, переконайтеся, що система Google правильно визначає їх тематику. Детальніше про розмітку сторінок для безпечного пошуку…