Коли йдеться про пошукову оптимізацію, багато хто в першу чергу думає про текст. Але зображенням вона також потрібна. Піднятися в пошуковій видачі вище за конкурентів можна за допомогою унікальних картинок високої якості. У цій статті розберемо все, що потрібно врахувати під час оптимізації зображень.
1. Шукайте унікальні зображення
Використовуючи чужі зображення, можна порушити авторські права. Це може призвести як до прохань власника видалити контент, так і до судового розгляду. Якщо ви берете зображення з якогось сайту, переконайтеся, що ліцензія дозволяє їх вільне використання.
Google віддає перевагу унікальним картинкам. Коли користувач шукає якийсь продукт або ще щось, система намагається показати якомога більше різних зображень цього об’єкта. Якщо ви працюєте у сфері електронної комерції та зображення на сайті не відрізняються від конкурентних, ваші шанси потрапити у топ пошуку невеликі.
Коли в пошуковій видачі достатньо зображень, Google не пропонуватиме повторювані, а покаже продукт із різних ракурсів. Якщо у вас є унікальні зображення, шанс потрапити у видачу збільшується.
Якщо Google має вибір, система запропонує різні зображення
2. Використовуйте правильні формати
JPEG і PNG вже давно не є стандартними форматами зображень. Сьогодні для сайтів краще AVIF, JPEG 2000, JPEG XR та WebP. Ці формати простіше стиснути, отже, знизити час завантаження. Це позитивно позначається на користувальницькому досвіді, а чим він кращий, тим вищі позиції у видачі.
З чотирьох форматів зображень, наведених вище, в першу чергу варто розглянути WebP. Він вважається найуніверсальнішим для сайтів: підтримує стиснення як із втратами, так і без них, пропонує прозорість і може бути анімований. По суті, це PNG, JPEG та GIF в одному флаконі. Файли WebP, як правило, на 25-35% легші, ніж PNG і JPEG аналогічної якості.
Але є й проблема: у минулому його підтримували не всі браузери. Якщо ви бажаєте врахувати користувачів зі старими версіями програм, можна налаштувати сторінки на відображення WebP, а також запасний формат.
3. Стискайте зображення
Незважаючи на те, що формати нового покоління вже легкі, ви можете додатково заощадити місце, стиснувши їх. Є кілька варіантів, залежно від сайту. Деякі платформи електронної комерції стискають стандартні зображення, в той час як інші поставляються з рядом плагінів. Вони не тільки стискають картинки в міру завантаження, але і працюють з наявними на сайті.
Якщо ви не хочете покладатися на плагіни через зниження швидкості завантаження сторінки, варто заздалегідь стиснути зображення. Для цього є багато безкоштовних онлайн-інструментів. Потім стиснуті зображення можна завантажити на сайт.
Залежно від зображення стиснення може перевищувати 80%.
4. Уточніть розмір зображень
Розмір зображень може негативно позначитися на ранжуванні. Якщо ви не визначите його самостійно, браузер підбиратиме потрібний, а на це піде час. Крім того, елементи будуть змішуватись, і користувачі не зможуть нормально користуватися сторінкою до її повного завантаження. Це називається зміщенням макету, а Google враховує цей фактор при ранжуванні.
Щоб уникнути проблеми, завжди встановлюйте ширину та висоту для зображень. Можна використовувати наступний код:
<img src=”image.jpg” width=”640″ height=”360″ alt=”опис зображення” />
Ця інформація допоможе браузеру розрахувати розміри зображення та зарезервувати достатньо місця на сторінці. Навіть якщо зображення завантажиться трохи пізніше, інші елементи не будуть вставати на його місце, а значить, не виникне проблем із зсувом макета.
5. Відкладене завантаження закадрових зображень
Ще один момент, який може покращити досвід користувача. Це означає, що завантаження не виконується, поки зображення не буде потрібно. Наприклад, воно розташовано внизу сторінки, а користувачеві ще потрібно туди прогорнути.
Такий підхід звільняє ресурси для завантаження верхньої частини сторінки, яку бачить користувач першою. Знижений час завантаження позитивно позначається на досвіді користувача.
6. Додайте до зображень альтернативний текст
Альтернативний текст – це атрибут зображення з його описом. Спочатку він був потрібний як альтернатива, якщо картинка не завантажилася, і для читання вголос користувачам з проблемами зору.
З точки зору SEO мета альтернативного тексту — описати зображення в пошукових системах. Пошуковим роботам простіше сканувати зображення з описом.
Хороший альтернативний текст — той, який точно описує зображення: з достатньою деталізацією, але без надмірного використання ключових слів.
Потренуємося на милому прикладі
На малюнку вище не так багато дії, але наробити помилок з альтернативним текстом простіше простого.
Наприклад, можна описати її надто спільно:
<img src=”sample.jpg” alt=”кіт”>
А можна надмірно оптимізувати:
<img src=”sample.jpg” alt=”рудий короткошерстий кіт з білими вусами та заплющеними очима лежить у кімнаті на животі “>
Краще дотримуватися золотої середини:
<img src=”sample.jpg” alt=”рудий кіт лежить на підлозі”>
7. Додайте мікророзмітку Schema
Мікророзмітка Schema — це набір HTML-тегів, які описують пошуковій системі, які елементи є на сторінці. За допомогою мікророзмітки ви можете виділити адресу компанії, номер телефону тощо. Це допоможе системі знайти дані для відображення у пошуку.
Що стосується зображень, існує два типи сторінок, на яких є сенс застосовувати структуровані дані: сторінки продуктів та сторінки рецептів. Для цього є спеціальні теги зображень. При правильному застосуванні Google використовує їх для розширених результатів.
Ви можете помітити зображення на сторінках вручну, використовувати спеціальний плагін або «Майстер розмітки структурованих даних» від Google. В останньому достатньо вибрати тип сторінки, над якою ви працюєте, та вставити посилання.
Після того, як інструмент закінчить формування сторінки, позначте зображення клацанням правої кнопки миші. Коли всі елементи сторінки будуть розмічені, скачайте код мікророзмітки та додайте його до розділу <head>.
8. Захистіть свої зображення від крадіжки
Крадіжка зображень — дуже поширене явище в інтернеті, яке може позбавити веб-сайт унікальних картинок. А якщо сайт, куди ці картинки вставили, краще оптимізований, він потрапить у видачу вище за вас.
Щоб уникнути цього, попросіть розробників додати певні атрибути, які вказують на власника зображення. Три найбільш популярні:
- author (artist; creator) – додається ім’я автора зображення;
- copyrightNotice — додається посилання на публічну ліцензію та її опис;
- source (credit) – додається посилання на ваш сайт або сайт, з якого зображення взяте.
Якщо ваші конкуренти просто копіюють код, який ви використовували для інтеграції зображень, Google, як і раніше, буде вважати фактичним власником зображень вас і перевага надаватиметься вашому сайту. Якщо людина видалить теги, Google все одно вибере ваш сайт, тому що зображення з тегами заслуговують на більше довіри, на думку системи.
9. Проведіть аудит зображень за допомогою WebSite Auditor
З чого розпочати процес оптимізації зображення та як його організувати? Один із способів – провести аудит сайту за допомогою WebSite Auditor та об’єднати всі проблеми, пов’язані із зображенням, в один дашборд.
Після аналізу сайту WebSite Auditor надасть повний звіт про всі технічні проблеми. Там буде окремий блок, присвячений зображенням. У ньому можна перевірити, чи на сайті є биті зображення або картинки без альтернативного тексту.
Щоб отримати додаткові відомості про проблеми, пов’язані з зображеннями, перейдіть до розділу Page Speed. Цей розділ доступний лише після отримання ключа API даного сервісу.
Робота із зображеннями, особливо у великому обсязі, може бути стомлюючим завданням. Тому варто розставити пріоритети залежно від важливості сторінки або покращення, які дадуть найбільший приріст продуктивності. Для цього перейдіть до розділу «Структура сайту» → «Сторінки», де можна переглянути всі технічні проблеми розбивки сторінками.
Кількість колонок, що відображаються, можна змінити, вибравши додаткові параметри, пов’язані із зображеннями, або відключивши ті, що вам не потрібні за кнопкою, позначеною стрілкою.
У готовому звіті можна виконати сортування сторінок з трафіку та розпочати оптимізацію з тих, що є найважливішими. А можна відсортувати результати щодо передбачуваного покращення продуктивності та почати з тих сторінок, на яких оптимізація зображень справила б найбільший вплив.
Час застосувати знання
Тепер ви знаєте достатньо, щоб покращити ранжування зображень. Інформації багато — та й сам процес непростий, що потребує часу. Однак якщо ви оптимізуєте зображення, то зможете отримати найкращу позицію в топі — отже, витрачені зусилля швидко окупляться.
