6 кроків до ідеальної SEO-оптимізації зображень на сайті

6 кроків до ідеальної SEO-оптимізації зображень на сайті

Зайвого трафіку на сайті не буває, правда? Один із методів його отримати – це SEO-оптимізація зображень. Хоча SEO-оптимізація складніша за банальне додавання Alt-тексту (альтернативного опису) до зображень на вашому сайті, але з нашим покроковою інструкцією ви без довгого вивчення теорії оптимізуєте картинки як професіонал. Починаємо?

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

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

Змістовна частина SEO-оптимізації зображень – впливає на видачу в пошуку за картинками

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

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

Технічна частина SEO-оптимізації зображень – впливає на SEO-позиції всієї сторінки

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

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

Крок 1. Розмістіть зображення у відповідних місцях сторінки

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

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

Крок 2. Перевірте оригінальність зображень для сайту

Пошукові системи віддають пріоритет унікальним зображенням. Якщо ви робите свої фотографії або найнятий діджитал-художник створив ілюстрації – проблем із SEO не буде.

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

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

Найпростіші способи зміни картинок – це:

Обрізка та дзеркальне відображення. Відкадруйте зображення та додатково поверніть картинку дзеркально. Обов'язково збережіть композицію та сюжет зображення під час обрізання зображення та слідкуйте, щоб окремі елементи (наприклад, текст написів у фоні) не перевернувся. Користувачі це одразу побачать.

Кольорокорекція, фільтри настрою та художні фільтри. Така зміна фотографій буде результативною, якщо зображення кардинально відрізнятиметься від оригіналу. Один із варіантів – це повна зміна окремих кольорів зображення на інші кольори. Для цього у вашому графічному редакторі потрібно вибрати колірну область та змінити її відтінок (Hue).

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

Крок 3. Додайте SEO-атрибути та назву зображенням на сайті

Alt-текст – це текстовий опис зображення на сайті. Його пошукові системи використовують для оцінки змісту зображень. Коли користувач здійснює пошук за зображеннями в Google –  саме альтернативний текстовий опис вказує на те, чи варто показувати конкретне зображення пошукачеві.

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

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

  • Довжина не більше 100-150 символів. Сам опис може бути й великим, але пошукові системи аналізують саме цю першу кількість символів.
  • Точне відображення сенсу зображень. Ви повинні описати простими словами, що саме зображено на картинці. Наприклад, "Проєкт інтер'єру з персиковим кольором стін та білими меблями".
  • Без дублювання тексту із заголовку сторінки. В такому випадку роботи пошукових систем вважатимуть картинку некорисною і проігнорують її.
  • Унікальність кожного опису на сторінці. Пошуковики розцінять графічний контент як різноманітний, а отже корисний.
  • Без переспаму ключовими словами. Не варто повторювати головне тематичне слово сторінки в описі картинки кілька разів. Наприклад, “інтер'єр з персиковими стінами, стильний інтер'єр, інтер'єр з білими меблями”.

На різних мовних версіях однієї сторінки можна використовувати однакові зображення, але потрібно використовувати різний alt-текст. Опис потрібно робити мовою, яка використана для текстового контенту сторінки.

Атрибут зображення Title не впливає на SEO. Він корисний у практичному сенсі та впливає на досвід користування сайтом. Коли користувач наводить курсор на зображення, додатково з'являється пояснювальний напис Title.

Назва файлу зображення. Назва файлу також надає корисну інформацію пошуковим системам. Google рекомендує перед завантаженням картинок на сайт змінити назви файлів на змістовні й такі, які придатні для ознайомлення. Писати текст потрібно латинкою з дефісами замість пробілів. Наприклад, замість “img02879791.jpg” можна використовувати текст “interyer-z persykovymy-stinamy.jpg”.

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

Назва: zavaryuvannya-chayu-puer.

Alt-текст: Правильне заварювання зеленого чаю пуер у домашніх умовах.

Назва: posadka-pid-chas-gry-na-gitari.

Alt-текст: Посадка під час гри на класичній гітарі з використанням підставки.

Назва: tatu-kvitka-na-ruci.

Alt-текст: Тату у вигляді квітки на плечі руки в стилі мінімалізм.

Ви могли помітити, що оптимальний формат назви – це просте іменування об'єкта зображення 3-5 словами.

Для Alt-тексту найкраще використовувати такий порядок слів – назва об'єкта + його унікальна якість + умова обставин.

Крок 4. Виберіть оптимальний формат зображень для сайту

Формат зображень – це тип зберігання даних у файлі зображення. Кожен формат має свій тип розширення файлів. Наприклад, *.png, *.jpg, *.webp, *.svg. Різні формати мають свої переваги.

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

JPG-формат використовує алгоритми стиснення, тому розмір кінцевих файлів невеликий. При цьому якість картинки залишається прийнятною.

WebP-формат пропонує сучасні алгоритми стиснення, з ними зображення можуть бути екстремально невеликого розміру з прийнятною якістю. Поки що WebP підтримується не всіма браузерами ідеально (особливо формат WebP v2).

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

  • PNG – якщо важливо продемонструвати контент у максимальній якості. Наприклад, на сайті фотографа чи дизайнера інтер'єрів.
  • JPG – якщо вам просто потрібно показати контент у нормальній якості. При цьому сумісність із браузерами не постраждає.
  • WebP – якщо хочете досягти максимальної швидкості завантаження. Вам потрібно додатково конвертувати зображення у цей формат, оскільки зазвичай контент, наприклад, на стоках поширюється у форматах PNG та JPG. Для конвертації зображень інших форматів у формат WebP використовуйте онлайн-конвертери: Convertio або CloudConvert

Окремо потрібно описати SVG-формат. Він використовується для ілюстрацій, іконок, логотипів, простої геометричної графіки на сайті. Це векторний формат – зображення будується за допомогою геометричних фігур. Усі попередні формати зображення – растрові. Зображення у них формується з окремих точок різного кольору. Тому растрові зображення мають характеристику роздільної здатності.

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

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

Крок 5. Підберіть оптимальну роздільну здатність

Роздільна здатність – це кількість точок за горизонталлю та вертикаллю, які формують зображення.

Роздільна здатність зображень за горизонталлю

Більшість трафіку припадає на мобільні пристрої. Для пристроїв на Android найпоширеніша роздільна здатність екрана за горизонталлю – 1080 пікселів. 1170 пікселів для телефонів від Apple. Тому роздільна здатність зображень за горизонталлю більше 1200 пікселів для мобільних надмірна. Якщо робите сайт переважно для мобільних, орієнтуйтесь на цю ширину як на максимальну. 

2000 пікселів роздільної здатності за горизонталлю достатньо для перегляду контенту на комп'ютері (навіть якщо зображення займає весь екран). Такий розмір обумовлений найпоширенішою роздільною здатністю екрана комп'ютерів – Full HD з 1920 пікселями за горизонталлю та 1080 пікселями за вертикаллю). 

Роздільна здатність зображень за вертикаллю

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

За вирахуванням елементів управління у вікна браузера і панелі управління з 1080 пікселів роздільної здатності Full HD і формуються ці ~1000 пікселів.

Правила вибору роздільної здатності зображень

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

Наприклад, у вас є три ховер-картки на сайті. Вони займають половину екрана за вертикаллю та весь екран за горизонталлю. Отже:

  • роздільна здатність зображень за горизонталлю повинна бути не більше ~670 пікселів (усі 2000 пікселів розділити на три об'єкти).
  • роздільна здатність зображень за вертикаллю повинна бути не більше ~500 пікселів (половина з 1000 пікселів).

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

100% для найкращої якості зображень (у нашому випадку це 670х500 пікселів).

85% для балансу між швидкістю та якістю (у нашому випадку це 570х425 пікселів, тобто 670х500*85%).

70% для найшвидшого завантаження сайту (у нашому випадку це 470х350 пікселів, тобто 670х500*70%).

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

Розрахунок виглядає так.

За горизонталлю 1200 пікселів. За вертикаллю 500 пікселів потрібно помножити на співвідношення вихідної і нової роздільної здатності за горизонталлю (1200/670 * 500 = 895 пікселів). Кінцевий розмір для максимальної якості зображень під час перегляду зображень на мобільному – 1200х895 пікселів.

Крок 6. Оптимізуйте якість зображень

Розмір зображення визначається не тільки форматом та роздільною здатністю, але й ступенем його стиснення. Деякі формати зображень можуть не використовувати стиснення (наприклад, PNG). В інших воно обов'язкове (наприклад, в JPG). 

Залежно від типу стиснення розрізняють стиснення без втрат (lossless) і з втратою якості (lossy):

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

Досягти високого ступеня стиснення з прийнятною якістю можна за допомогою онлайн-сервісів для оптимізації зображень. У них іноді можна і обрати кінцеву роздільну здатність зображення. Залежно від роздільної здатності та особливостей стиснення оптимальний розмір файлів може коливатись в проміжку від 50 до 500 кілобайт.

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

Оцінити можливості оптимізації розміру файлів для завдань SEO-оптимізації зображень зможете дослідити самостійно:

undefined

Squoosh

Ви матимете значні можливості, але для опанування конвертера потрібен час. Ви одразу зможете оцінити різницю у вихідному та конвертованому файлі. Працювати можна з одним зображенням за один раз. Підтримується конвертація форматів та ресайз (зміна розміру) зображень. Є підтримка WebP, PNG та JPEG.

TinyPNG

Сервіс дозволить оптимізувати файли форматів WebP, PNG та JPEG. За один раз можна конвертувати до 20 зображень розміром до 5 мегабайт кожен. Обмежень на кількість конвертації файлів на день немає. Налаштувань оптимізації немає.

Compressor.io

Без передплати ви можете обробляти до 50 файлів на день. Є підтримка форматів JPEG, PNG, SVG, GIF, WEBP. Є вибір між lossy та lossless стисненням. Оптимізувати можна одразу кілька файлів (загальним розміром до 10 мегабайт).

Image Compressor

Ви можете оптимізувати файли форматів JPEG, GIF та PNG. Можна оптимізувати кілька файлів за один раз. Обмежень щодо кількості оптимізації файлів на день немає. Налаштувань, крім обмеження палітри кольорів, немає. Одночасно для оптимізації можна завантажити до 20 файлів.

iLoveIMG

Мультифункціональний сервіс для роботи із зображеннями. Усі інструменти поділені на групи. Доступні оптимізація зображень, конвертація файлів інших форматів у JPG, ресайз та кадрування зображень. За один раз можна виконувати операції з 30 файлами загальним розміром до 200 мегабайт.

Інші аспекти SEO-оптимізації зображень

Робота з мапою сайту та місцем зберігання зображень, обрання правильних адрес (URL) для картинок та увімкнення лінивого завантаження (lazy load – завантаження контенту відповідно до гортання сторінки) потребують спеціальних знань, а також взаємодії з файлами структури сайту.

Якщо ви створите сайт на Weblium, вам не доведеться перейматися технічним аспектом створення сайту. Як щодо SEO, так і щодо роботи всього сайту.

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

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

Привіт!

Якщо ви не знайшли відповідь в нашому довідковому центрі, наші суперзірки відділу підтримки допоможуть вам за декілька хвилин!

Напішить нам у месенджерах

Ви можете написати нам у зручному вам месенджері або почати чат прямо на сайті.