Стаття також доступна російською (перейти до перегляду).

Зміст:

• Основні засади оптимізації зображень під SEO
• Як правильно писати атрибут?
• Як правильно описувати заголовок картинки TITLE?
• Формати картинок
• Як покращити та прискорити індексацію зображень
• Розміщуйте зображення на власному хостингу
• Оптимізуйте розмір картинок під різні пристрої
• Асинхронне завантаження зображень
• Налаштування асинхронного завантаження зображень вручну
• Сервіси для аудиту та редагування зображень
• Що ж нам дасть грамотна оптимізація картинок на сайті, що просувається?
• Висновки

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

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

Основні засади оптимізації зображень під SEO

Якість та роздільна здатність картинки

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

Унікальність

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

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

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

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

зображення з окремими параметрами.

Швидкість завантаження найбільшої видимої частини сторінки (Lagest Contenful Paint) є одним з основних показників факторів ранжирування Core Web Vitals на думку Google.

Докладніше про цей фактор дивіться тут.

Релевантність

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

Як правильно писати атрибут?

Alt - це альтернативний опис зображення, який не бачить користувач, якщо зображення на екрані відображається.

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

Ранжуючи зображення пошукова система Google визначає, що записано в атрибуті alt, а також розпізнає образ зображення та зіставляє їх.

Тому картинка та її опис мають відповідати один одному.

Не влаштовуйте з АЛЬТ нагромадження з ключових слів.

Використовуйте карту сайту Sitemap для зображень.

Правильний опис картинки також важливо і голосового пошуку.

Основні рекомендації щодо опису атрибуту ALT:

• Текст має бути релевантним;
• Оптимальна довжина – до 125 символів;
• Чітко відповісти на запит користувача із застосуванням ключових слів. Це може бути як стислий опис товару, послуги, так і відповідь на інформаційний запит;
• Дотримуйтесь правил орфографії та пунктуації;
• Не починайте опису зі слів “картинка” або “зображення”.

Приклад:

Традиційна картинка

<img src="seo-2022.jpg" alt="SEO тренды 2022">

Картинка у вигляді посилання

<a href="/faq/articles/chto-takoe-media-zaprosi-css-i-dlja-chego-oni-nuzhni/">

  <img src="media_queries.jpg" alt="Что такое медиа запросы CSS">

</a>

Коли картинці не потрібний атрибут ALT:

• Іконки на кнопках;
• Декоративні картинки, наприклад, бічні панелі, фон сторінки;
• Аватарки;
• попередній перегляд картинки.

Як правильно описувати заголовок картинки TITLE?

Атрибут TITLE - повідомляє додаткову інформацію про картинку.

Користувач побачить тайтл, якщо наведе курсор на картинку.

Правило його заповнення аналогічні до правил заповнення атрибуту ALT.

Однак:

• ТАЙТЛ та АЛЬТ не повинні дублювати один одного;
• Заповнюючи атрибут ТАЙТЛ і використовуючи ключові слова, пам'ятайте, що вони впливають на запамленість тексту. Тому заповнюйте тайтл у другу чергу після Альта з урахуванням того, як вони впливають на спам.

Форматы картинок

Формати картинок
Розглянемо найпопулярніші формати для зображень:

JPEG – найпопулярніший формат, обсяг зображення стискається. Він зручний для розміщення на сайті, але не підтримує прозорість. Зазвичай використовується для розміщення фотографій на веб-сайті;

PNG - оптимальний для розміщення зображень з обмеженою кількістю палітри кольорів. Рекомендується для розміщення інфографіки, елементів дизайну з прозорістю;
BMP – забезпечує високу якість зображення, але не дозволяє стиснути файл;

GIF - по “народному” картинки у такому форматі називають “гіфками”. Використовується для анімованих зображень. І вони займають величезний обсяг.

WebP - відносно новий формат, тому не всі браузери його підтримують. Розробник формату – компанія Google.

Зараз такий формат підтримується такими браузерами:

• Google Chrome, починаючи з 9 версії;
• Opera з версії 11.10;
• Firefox із версії 65;
• Android із версії 4.0.

Тому рекомендується використовувати асинхронне завантаження.

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

SVG - Scalable Vector Graphics (масштабована векторна графіка). Такий формат підходить для логотипів, дрібних іконок, значків та мало кольорових схем.

AVIF - один із найновіших форматів, почав використовуватися із зими 2019 року. Є супер стислим форматом, що дозволяє значно збільшити швидкість завантаження картинок.

Однак не всі браузери його поки що підтримують.

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

Як покращити та прискорити індексацію зображень

• Створіть окремий sitemap.xml для зображень.

Окремий Сайтмап для зображень допоможе пошуковцям краще орієнтуватися на сайті та швидше індексувати нові та важливі картинки.

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

Докладніше дивіться на сайті Центру Google Пошуку тут;

• Створіть інформативні атрибути alt та title.

Докладніше про те, як це робити читайте нижче.

• Уникайте картинок сумнівного характеру.

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

• URL-адреса має бути логічною та ЛЗУшною.

Розміщуйте зображення на власному хостингу

Деякі сео фахівці, щоб заощадити місце на диску, розміщують картинки на віддалених ресурсах. Наприклад, на спеціалізованих хостингах для картинок (ImgBB, Piccy.info). Однак це є ризиковано. Можуть змінитися правила зберігання та завантаження зображень, в результаті контент буде показуватися повільно або не показуватися зовсім.

Рекомендуємо зберігати зображення на одному хостингу з основним контентом або використовувати комерційний CDN.

Для ефективної віддачі статичних зображень на хостингу FREEhost.UA безплатно надається CDN. Він автоматично отримує та кешує зображення з хостингу, щоб максимально швидко віддавати контент користувачам.
Докладніше про те, що таке CDN дивіться у нашому розділі FAQ тут.

Оптимізуйте розмір картинок під різні пристрої

Смартфони міцно увійшли до нашого життя. На багатьох ресурсах більшість відвідувачів – користувачі смартфонів.

Однак, багато хто продовжує заходити і з Desktop комп'ютерів.

Природно, що роздільна здатність екранів у різних пристроїв різна, а значить, що ширина браузерів теж буде різною.

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

Для цього використовуйте медіа запити CSS.

Докладніше про них та їх застосування дивіться в інформаційній статті тут.
Приклад оптимізації завантаження картинок за допомогою медіа стилів у файлі CSS:

 @media (max-width: 1920px) 
{
      .wrapper {
        width: 310px;
        height: 310px;
        border: 5px solid #616161;
      }
      .exmp2 {
        background-image: url(/images/example.png);
        background-repeat: no-repeat;
        background-position: -40px 0px;
        background-size: cover;
      }
 }

/*Це правило призначене для дисплеїв/браузерів з шириною більше 1920 px. Якщо ширина екрана буде іншою, то стилі, які будуть задані у фігурних дужках, будуть ігноруватися. Картинка завантажуватиметься інша, з іншою шириною*/

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

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

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

Такий метод має сенс для сторінок із безліччю картинок.

Така техніка називається Lazy load.

Для застосування методу існують спеціальні плагіни, наприклад для CMS Wordpress.

Налаштування асинхронного завантаження зображень вручну

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

Для цього до HTML коду сторінки необхідно додати наступне.

<img class="lazyload"
     src="placeholder.jpg"
     data-src="image.jpg"
     alt="image description">

Розберемо синтаксис:

• lazyload - клас, який необхідно додати до тегу img;
• placeholder.jpg - зображення-заглушка, аналогічне за розмірами із завантажуваною картинкою;
• image.jpg - оригінальна картинка, що завантажується;
• alt="image description"> - АЛЬТ картинки, її опис.
• Ця інструкція працює через JavaScript.

До цього коду рекомендуємо додавати і тег <noscript>Назва картинки</noscript>.

Якщо браузер не підтримує JavaScript.

Для зручності картинку-заглушку можна генерувати через спеціальні сервери.

Докладніше про їхнє використання дивіться за посиланням https://placeholder.com/.

Сервіси для аудиту та редагування зображень

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

• Iloveimg.com

• Сервіс для пакетної обробки зображень. Він дозволяє робити наступні операції: стиснення, зміна розмірів та обрізка, зміна розширення на jpg, прибирання фону та інше.

• Photoshop - багатофункціональний графічний редактор, Особливого представлення не потребує
• Lightshot (screenshot tool). Lightshot (screenshot tool) - скріншот

Додаток до браузера Google Chrome дозволяє робити та редагувати скріншоти екранів. Завдяки цьому можна одержати свої унікальні зображення.

• Serpstat

Для повноцінного аудиту потрібна платна підписка або промокод.

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

Адреси самих картинок можна дізнатися, і УРЛ сторінки, де вони знаходяться.

• SERanking

Платний сервіс

Аналогічно показує відсутність ALT та перевищення рекомендованих розмірів.

• SiteAnalyzer та Screaming Frog

Безплатний та умовно безплатний ресурс. Показує відсутність ALT та TITLE, перевищення рекомендованих розмірів. Адреса цих картинок, і УРЛ сторінок, де вони знаходяться.

Що ж нам дасть грамотна оптимізація картинок на сайті, що просувається?

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

Висновки

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

Наведемо коротко основні засади оптимізації:

1. Зображення має бути релевантним основному контенту;
2. Назва файлу повинна бути зрозумілою та відповідати вмісту картинки та темі сторінки. Наприклад, seo_trendi_2022.jpeg;
3. При розміщенні картинки в УРЛ дотримуйтесь вкладеності і ЛЗУ;
4. Намагайтеся, щоб зображення були оригінальними, намагайтеся не використовувати чужі зображення;
5. Обов'язково прописуйте ALT та бажано TITLE. Однак не забувайте, що при підрахунку запамленості , їх вміст також враховується Назви повинні бути зрозумілі для користувача;
6. Використовуйте різні формати зображень. Залежно від типу та палітри зображення;
7. Створіть окремий Sitemap.xml для зображень;
8. Застосовуйте мікророзмітку Schema.org;
9. Подбайте про посади для соціальних мереж зі згадками Ваших статей. У цьому допоможуть OpenGraph та Twitter Cards;
10. Розміщуйте картинки на тому ж хостингу, що весь сайт. Бажано з наданням CDN;
11. Для різних дисплеїв (пристроїв) завантажуйте зображення та браузери різної ширини. Для цього підійдуть медіа запити CSS;
12. Для оптимізації швидкості завантаження використовуйте асинхронне завантаження;
13. Пам'ятайте, що просування по картинках це лише частина просування, тому потрібно все робити комплексно.

Під час написання статті використовувалися матеріали Анастасії Осипенко, Сергія Ломакіна, Joshua Hardwick.

Підписуйтесь на наш телеграм – канал t.me/freehostua, щоб бути в курсі нових корисних матеріалів. Дивіться наш канал Youtube на youtube.com/freehostua.

Ми щось упустили, у чомусь помилилися?

Повідомте про це у коментарях, і ми обов'язково це обговоримо.

Дата: 02.02.2022 Автор: Яременко Владислав за радакцією Євгена Шермана #seo

Голосування 1 2 3 4 5