SEO для зображень: 9 ключових елементів

1. Загальні міркування щодо SEO зображень

Часто ми вкладаємо всі зусилля в ранжування наших цінних з SEO-погляду URL у SERP. Однак, як ми згадували раніше, оптимізація зображень важлива, щоб ранжуватися вище в результатах пошуку Google Images та збільшувати наші можливості залучення органічного трафіку через них.

Боти Google не можуть «читати» зображення. Вони призначені для читання коду на сайті, а не конкретної анімації чи картинки. З цієї причини нам потрібно надати їм цю інформацію, дотримуючись простого набору SEO-рекомендацій. Це визначить, чи можуть боти інтерпретувати інформацію, яку ми намагаємося показати, оцінювати зображення і ранжувати їх вище в розділі Google Images.

2. Розмір і вага зображення

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

Вага:

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

Інструменти для зменшення ваги зображень:

Існує безліч інструментів, якими можемо користуватися для зменшення ваги зображень. Навіть якщо у нас немає професійного софту для редагування зображень, як-от Photoshop чи Illustrator, можемо використовувати онлайн-платформи, як-от:

• ›

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

• ›

  Website Speed Test Image Analysis Tool дозволяє легко завантажувати нові формати зображень.

Розмір:

Окрім того, важливо також реалізовувати кілька розмірів зображення для кожного сайту, щоб відображати найбільш доречний залежно від пристрою, на якому його переглядають. Хоч існують плагіни, що адаптують розмір зображення, ця опція може бути не найкращою на практиці. Причина в тому, що, наприклад, картинку 1000px можна перемасштабувати до 400px, зменшивши її візуальний розмір, але картинка все одно буде такою важкою, як зображення 1000px, що впливає на performance і швидкість вашого сайту.

Інструменти:

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

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

3. SEO-friendly формат зображення

Наразі найоптимальніший спосіб зберігати вебзображення — використовувати один із чотирьох форматів:

• ›

  WebP: Може зменшити оригінальну вагу зображення на 25-35%. Це один з найбільш рекомендованих форматів зараз; хоч деякі версії браузерів досі їх не читають, це один з форматів, що дозволяє більше стиснення без впливу на якість зображення.

• ›

  PNG: Найкращий вибір для картинок з невеликою кількістю кольорів і прозорим тлом. Широко використовується в логотипах.

• ›

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

• ›

  GIF: Використовується в анімаціях і рухомих картинках.

Рекомендації:

• ›

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

• ›

  Завжди стискайте зображення — вручну чи через інструмент автоматичної обробки.

• ›

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

4. SEO-поля зображень

Кожне зображення має набір пов'язаних полів, що забезпечують роботам пошукових систем (і користувачам, звісно) покращену доступність.

Назва зображення

Назва зображення стосується назви файлу. Це тайтл зображення, що використовує дефіси й підкреслення між словами. Рекомендується включати ключове слово, за яким ми хочемо ранжувати наше зображення вище, уникаючи незвичних символів (як-от «ñ», «?» чи літер з акцентами «á» тощо).

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

Title

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

Він може бути таким самим, як alt-текст, хоча переписати цей атрибут із незначними модифікаціями не займе багато часу.

Атрибут «Alt»

Це найважливіший елемент, оскільки саме його читає Google. Він має містити головне ключове слово, за яким хочемо ранжувати наш URL вище, і має містити короткі описи.

Його синтаксис такий:

<img src="ПОСИЛАННЯ НА ЗОБРАЖЕННЯ" alt="ALT-ОПИС ЗОБРАЖЕННЯ" />

Приклад оптимізованого зображення:

Розгляньмо, як кожне поле могло б бути оптимізоване для цього зображення на основі цільового ключового слова «ciberseguridad pymes», середній місячний пошук якого 90 (в Іспанії):

Назва файлу:

• ›

  Неправильно: 04745892595295.jpg

• ›

  Правильно: ciberseguridad-pymes.jpg

Title: Consejos de ciberseguridad para empresarios y pymes. (Поради з кібербезпеки для компаній і малого бізнесу.)

Alt-текст: Ciberseguridad para pymes y empresarios: consejos. (Кібербезпека для малого бізнесу та компаній: поради.)

Так ми оптимізуємо всі поля й отримаємо зображення, готове боротися за топ-позиції. Звісно, оптимізація зображень не гарантує, що вони з'являться першими, але це перший крок для досягнення цього :)

5. Семантичний контекст

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

6. Сайтмеп для зображень

Щоб допомогти ботам Google ефективніше відстежувати наші зображення, потрібно створити ексклюзивний sitemap.xml з цим типом файлів. У WordPress він може створюватися автоматично за допомогою інструментів (плагінів), як-от Yoast чи RankMath. Якщо ви не працюєте на WordPress, можете використовувати альтернативні інструменти або інструменти ручного програмування (відстеження URL).

Далі — приклад сайтмепа з двома зображеннями всередині статті:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>http://example.com/sample.html&lt;/loc> <image:image> <image:loc>http://example.com/image.jpg&lt;/image:loc> </image:image> <image:image> <image:loc>http://example.com/photo.jpg&lt;/image:loc> </image:image> </url> </urlset>

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

→ Тайтл зображення

→ URL або шлях, де зберігається файл

→ Підпис

→ Тип ліцензії

→ Інформація геолокації

• ›Документація: Велику кількість інформації можна знайти у блозі Google про сайтмепи зображень з прикладами, туторіалами реалізації тощо.

Завершивши реалізацію, зможемо перевірити статус покриття індексації в Search Console.

7. Lazy Loading зображень (завантаження на вимогу)

Зображення — одні з найбільш використовуваних ресурсів на сайтах, бо «картинка варта тисячі слів», як кажуть. Тому візуальний аспект кожного сайту ретельно розробляється з використанням цих мультимедійних елементів. Однак неоптимізування їх може мати негативний вплив на користувацький досвід і час завантаження сайту. З цієї причини lazy loading доцільний.

Завдяки lazy loading зображення завантажуються лише тоді, коли з'являються на екрані. Наприклад, якщо вони у нижній частині сторінки, що ще не видима на екрані пристрою, вони не будуть завантажені, поки користувач не прокрутить вниз. Це значно знижує кількість HTTPS-запитів і скорочує час завантаження, роблячи вашу сторінку приємнішою для Google.

Плагіни для реалізації Lazy loading на WordPress

Якщо ви керуєте сайтами на цій програмній платформі, є набір плагінів, які приваблюватимуть вашу увагу, якщо ви хочете оптимізувати зображення, реалізуючи lazy loading. Пам'ятайте перевірити, чи встановлена тема включає цю функцію. Якщо ні, ось кілька цікавих:

• ›

  BJ Lazy Load: легкий у встановленні й налаштуванні, це один з найпопулярніших інструментів, з понад 90 000 встановлень. Завдяки цьому додатку можна масштабувати зображення, щоб адаптувати їх під різні розміри екранів.

• ›

  Lazy Load by WP Rocket: простий і легкий у налаштуванні (по суті, бо не пропонує різних опцій), перевага цього плагіна в тому, що він не використовує JavaScript-бібліотеку, як jQuery.

8. Використання CDN для зображень

CDN (Content Delivery Network) — це набір серверів, розподілених по всьому світу, що полегшують кешований контент сайту залежно від того, де знаходиться запитувач. Завдяки цій хостинговій мережі сервер, ближчий до запитувача, надасть копію запитуваного сайту.

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

Якщо ми використовуємо CDN (наприклад, Cloudflare), щоб показувати зображення, вони завантажуватимуться й відображатимуться швидше. Цей прямий потік безпосередньо покращить наше SEO.

9. Інші міркування

Цінні з SEO-погляду зображення, тобто ті, які ми хочемо ранжувати вище, мають бути включені у вихідний код URL. Ті, що реалізовані як background-властивість у CSS, не будуть видимі для Google, оскільки він не може зрозуміти цей тип таблиць стилів.

Окрім того, є й інші важливі деталі, які варто враховувати при оптимізації наших зображень:

• ›

  Exif: З кожним зображенням зберігається набір атрибутів, як-от дата, коли картинка була зроблена, та інші дані, релевантні для професіоналів у цій галузі. Однак ця інформація не цінна з SEO-погляду й лише займає місце. Видалення цієї інформації може допомогти в оптимізації зображень і зробити їх легшими.

• ›

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

• ›

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

Чи бракує нам якихось основних порад? Ми б із задоволенням вас послухали. Залиште коментар нижче і не вагайтесь поділитися своїми знаннями!