SEO-оптимізація зображень

SEO-оптимізація зображень може змінити правила гри для вашого бізнесу.

Щоб досягти успіху в SEO-оптимізації зображень, зверніть увагу на:

• Можливість виявлення, сканування та індексації ваших зображень.
• Авторитет сторінок, на яких розміщено ваші зображення.
• Актуальна релевантність цих сторінок.
• Підписи до зображень.
• Атрибути зображення (ім'я файлу, формат, розмір та атрибут alt).
• Як швидко завантажуються ваші зображення?
• Надає контекст зображень за допомогою розмітки Schema.

Що таке SEO-оптимізація зображень?

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

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

Навіщо оптимізувати зображення для SEO?

Є дві причини, щоб займатися пошуковою оптимізації зображень:

1. Зображення може бути величезним джерелом якісного органічного трафіку.
2. Коли ви займаєтеся пошуковою оптимізацією зображень, ви автоматично оптимізуєте його для програм читання з екрану, тим самим допомагаючи людям із порушеннями зору краще використовувати та розуміти ваш сайт.

Тепер ви запитуєте себе: "Чи дасть SEO-оптимізація зображень для мене багато трафіку?"

Чи це так, залежить від вашого бізнесу. Для нас насправді це лише частина нашого трафіку. Зазвичай люди, які шукають SEO, не шукають зображення. Пошукові системи знають про це, тому найчастіше видають у результатах звичайні сторінки.

Якщо зображення часто з'являються в результатах запитів, за якими ви намагаєтеся ранжуватися, SEO для зображень є важливим для вас. Тому, якщо у вас інтернет-магазин, сайт новин про знаменитостей або сайт з фотографіями, оптимізація зображень є надзвичайно важливою.

Що впливає на ранжування зображень?

Існує цілий список факторів, що впливають на ранжування ваших зображень:

• Виявлення та індексація
• Авторитет сторінки
• Актуальна релевантність цієї сторінки
• Спробувати
• Зображення, які пов'язані
• Підписи до зображень
• Атрибути зображення (ім'я файлу, формат, розмір та alt)
• Час завантаження зображення
• Використовуйте схему передачі контексту

Ми пояснимо все це докладно нижче.

Виявлення та індексація

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

Допоможіть пошуковим системам виявити ваші зображення за допомогою файлів Sitemap

Включення зображень у ваші XML-карти сайту полегшує пошуковим системам їх виявлення та розставляє пріоритети при скануванні та індексуванні ваших зображень.

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

Рекомендації щодо XML-карт сайту для зображень:

• Кожен <url> тег може містити до 1000 тегів. Іншими словами, ви можете вказати 1000 зображень на сторінку.
• Щоб вказати назву зображення, використовуйте image:caption.
• Щоб вказати географічне розташування зображення, використовуйте image: geo_location.
• Щоб вказати ліцензію зображення, використовуйте image:license.

Переконайтеся, що ваші зображення доступні для сканування та індексації

Що не можна просканувати, не можна проіндексувати. Тому переконайтеся, що неправильно налаштований файл robots.txt не блокує доступ пошукових систем до ваших зображень. Не перешкоджайте доступу роботів Googlebot-Image та Googlebot до ваших зображень у файлі robots.txt!

Якщо ви хочете, щоб ваші зображення індексувалися пошуковими системами, переконайтеся, що вони не мають директиви X-Robots-Tag HTTP Header noindex і не канонізовані за допомогою HTTP-заголовка.

Якщо ви використовуєте noindex директиву robots на сторінці, що містить зображення, зображення також не будуть проіндексовані.

Також переконайтеся, що на ваших сторінках немає noimageindex директиви robots, яка спеціально повідомляє пошуковим системам, що ви не хочете, щоб вони індексували зображення на вашій сторінці.

Якщо ви показуєте сторінки через HTTPS, забороніть показ зображень поверх HTTP, оскільки браузери можуть відображати в адресному рядку попередження про те, що ваш сайт не повністю захищений. А для пошукових систем ви просто додаєте ще одну перешкоду у пошуку правильного зображення для ранжування.

Авторитет зображень

У попередньому розділі ми згадали, що пошукові системи ранжуватимуть сторінки, на яких знаходяться зображення. Давайте візьмемо приклад, щоб проілюструвати це. Якщо ви шукаєте Дензела Вашингтона в пошуку картинок Google, ось що ви побачите:

Три найкращі результати:

1. wikipedia.org
2. kinopoisk

Що мають спільного? У них великий авторитет. Тут зображення значно виграє від авторитету сторінки, де воно знаходиться. Пам'ятайте про це під час оптимізації зображень та вибору сторінок для розміщення зображень.

Актуальність сторінки

Тема сторінки, на якій знаходяться ваші зображення, впливає на їх позиції. У випадку з Вікіпедією для нашого запиту «Дензел Вашингтон» дійсно допомагає наявність сторінки з 4000 слів про нього, оскільки це підвищує релевантність зображень на цій сторінці для цього запиту.

Зверніть увагу, що WordPress створює спеціальну сторінку «вкладання зображення» для кожного зображення, що завантажується. Це не додає цінності з погляду SEO, тому ми рекомендуємо відключити це. Це витрачає краулінговий бюджет і створює майже дубльований контент.

Популярність зображення

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

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

Схожі зображення

Додавання подібних зображень на одну і ту ж тему також допоможе вам краще ранжувати ваші зображення. Це допомагає стати більш актуальним та авторитетним.

У разі запиту "Дензел Вашингтон" ви повинні зібрати різні його фотографії та розмістити їх на одній сторінці.

Ось ще один приклад: припустимо, ви намагаєтеся ранжуватися на запит "Чек-листи". Додавання різних ілюстрацій, що містять чек-листи, допомагає всім цим зображенням ранжуватися краще. Зверніть увагу, що на цих ілюстраціях має бути приблизно те саме, в даному випадку список завдань.

Це одна з причин, через яку Pinterest так успішно залучає органічний трафік через зображення — вони розміщують мільйони зображень, і їх також чітко класифікують їх.

Підписи до зображень та навколишній текст

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

Ми розрізняємо два типи тексту, які знаходяться у безпосередній близькості від зображень; перший з них – підписи, а другий – об'ємний текст.

Ось приклад зображення з відповідним навколишнім текстом:

Атрибути зображення

Ось приклад фрагмента HTML для зображення:

<img src="https://example.com/images/denzel-washington-graduating-high-school.jpeg" alt="Дензел Вашингтон закінчує середню школу" />

Тег зображення має ім'я файлу, формат, місцезнаходження зображення та атрибути, які забезпечують контекст. Це ще одне місце, де пошукові системи будуть шукати підказки за запитами, для яких є релевантними ваші зображення. Але не перестарайтеся. Не заповнюйте імена файлів зображень та атрибути alt лише ключовими словами.

Властивості зображення:

• Назва файлу зображення.
• Формат зображення.
• URL-адреса зображення.
• srcset атрибут зображення для показу адаптивних зображень.
• alt атрибут зображення.

Як назвати зображення для SEO

Переконайтеся, що ім'я файлу є описовим та відповідає релевантним запитам.

• Добре: denzel-washington-graduating-high-school
• Погано: photo

Формати зображень

Вибір правильного формату зображення допомагає скоротити час завантаження зображення та забезпечити гарну якість зображення.

• Добре: .jpeg для фото.
• Погано: .gif для скріншота, який повинен показувати деталі.

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

Формат зображення	Найкраще використовувати для
JPEG	Фото
PNG	Логотипи (оскільки він підтримує прозоре тло) та зображення, які ви хочете зберегти чіткими, наприклад скріншоти
GIF	Анімації
SVG	Створення зображень, які можна масштабувати без втрати якості (векторні зображення). Картки, значки та логотипи є найпоширенішими прикладами.
WebP	Формат WebP, розроблений Google, є альтернативою JPG і PNG, яка краще стискається. На даний момент він не підтримується у Safari (і взагалі не підтримується в Internet Explorer).

URL-адреса зображення

Ви хочете, щоб ваші зображення мали коротку та логічну URL-адресу. Уникайте використання хронологічної структури папок, наприклад, що використовується в WordPress. Не примушуйте людей думати, що вони застаріли.

• Добре: /images/denzel-washington-graduating-high-school.jpeg
• Погано: /wp-content/uploads/2016/09/images/denzel-washington-graduating-high-school.jpeg

Атрибут Image srcset для показу адаптивних зображень

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

На щастя, ви можете визначити, які версії зображення використовуватимуться для різних пристроїв та дозволів екранів. Наприклад, якщо ви переглядаєте сайт на своєму телефоні, вам не потрібно зображення шириною 1024 px. Ви можете обійтися тільки 400 px версією, що заощадить вам багато трафіку.

Ви можете визначити, яке зображення використовувати для якої ширини області перегляду, використовуючи srcset атрибут. Наприклад:

<img src="/images/denzel-washington-graduating-high-school.jpeg" srcset="/images/denzel-washington-graduating-high-school-400.jpg 375w, /images/denzel-washington-graduating-high-school-800.jpg 768w" alt="Дензел Вашингтон закінчує середню школу" />

Alt для зображень

Атрибут alt, також помилково званий тегом alt, дає пошуковим системам контекст. Це важливий атрибут для заповнення з погляду SEO, але також і з погляду користувача. Коли зображення не може завантажитися, воно показує alt текст як запасний варіант, щоб користувачі могли отримати уявлення про вміст зображення. Це також використовується програмами читання з екрана для опису того, що знаходиться на зображенні.

Час завантаження зображення

Швидкість сторінки є одним із факторів ранжування для пошукових систем (з травня 2021 року включена в Core Web Vitals). Тому важливо, щоб зображення швидко завантажувалися. Крім того, зображення використовують той же краулінговий бюджет, що і ваші сторінки та інші ресурси.

Щоб ваші зображення швидко завантажувалися, переконайтеся, що ви:

• Вибрано правильний формат зображення.
• Видаєте правильний розмір зображення (як описано в розділі Атрибут srcset).
• Стиснули зображення.

Стиснення зображень

Стисніть зображення, щоб зменшити вагу. Існує кілька варіантів стиснення зображень:

• З втратами: розмір файлу значно зменшується, але зображення втрачають якість. Цей параметр забезпечує найшвидше завантаження зображень.
• Без втрат: розмір файлу майже не зменшується, а зображення не втрачають якості. Ця опція не дуже допоможе вам у швидкому завантаженні зображень.
• Щось срідне: це золота середина між «з втратами» і «без втрат», що врівноважує зменшення розміру файлу і втрату якості.

Інструменти, які допоможуть вам стискати зображення

Ось інструменти, які можна використовувати для стиснення зображень:

Онлайн-додатки:

• TinyPNG.
• Imagify.
• Imagecompressor.

Плагіни для WordPress:

• ShortPixel.
• EWWW Image Optimizer.
• Imagify.
• Smush.
• TinyPNG.

Використовуйте Schema для передачі контексту

Позначте будь-яке зображення за допомогою Schema.org. Це допомагає пошуковим системам зрозуміти його контекст, а також підвищує можливість того, що ви отримаєте нульову видачу з цим зображенням. Наявність зображення робить нульову видачу помітнішою, і тому ви отримаєте більше кліків.

Ось приклад фрагмента коду, що посилається на зображення:

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://politay.pro/academy/image-seo/"
    },
    "headline": "SEO для зображень",
    "image": {
        "@type": "ImageObject",
        "@id": "https://politay.pro/academy/image-seo/",
        "url": "https://politay.pro/media/social-cards/image-seo@2x.png",
        "width": 1200,
        "height": 600,
        "caption": "SEO для изображений"
    },
    "datePublished": "2022-05-17T08:00:00+08:00",
    "dateModified": "2022-05-17T09:20:00+08:00",
    "author": {
        "@type": "Person",
        "name": "Politay"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Politay",
        "logo": {
          "@type": "ImageObject",
          "url": "https://politay.pro/wp-content/uploads/2021/11/logov1.png"
        }
    },
    "description": "Корисний посібник з підвищення позицій ваших зображень"
}
</script>

Декілька порад:

• Переконайтеся, що зображення, на які є посилання в Schema.org, можна сканувати та індексувати.
• Зображення повинні відповідати сторінці.
• Зображення мають бути у форматі .jpg, .png, або gif.

Інструменти, які допоможуть проаналізувати потенціал оптимізації зображень

Існує кілька інструментів, які допоможуть вам проаналізувати свій потенціал, коли справа доходить до оптимізації зображень. Вони проаналізують зображення, які ви зараз використовуєте, і оцінять потенціал оптимізації. У більшості випадків ви можете скоротити час завантаження — на кілька секунд.

Список інструментів:

• Тест швидкості сайту
• Google Lighthouse в Chrome DevTools
• GTMetrics
• Аналізатор TinyPNG - Цей інструмент не тільки показує поточний розмір зображень, але й стискає їх у реальному часі, щоб ви могли відразу побачити, скільки ви можете заощадити.

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

Насамкінець, не думайте про зображення просто як про засіб для досягнення мети з точки зору SEO. Привабливі зображення мають велике значення з погляду оптимізації коефіцієнта конверсії. Особливо для інтернет-магазинів. Візьмемо, наприклад, Google Покупки, де цілий день, щодня ведеться одна з найзапекліших битв за контент.