Як оптимізувати зображення на сайті

  1. Де знайти хорошу картинку
  2. альтернативні джерела
  3. підготовка зображень
  4. Задайте правильне ім'я файлу
  5. Визначте масштаб зображення
  6. Оптимізуйте зображення під мобільні пристрої
  7. Зменшіть розмір файлу
  8. Завантаження зображення на сайт
  9. Підписи під картинкою
  10. Alt і Title зображення
  11. Репост на інших каналах
  12. Вирівнювання по центру
  13. XML-файли для карти сайту
  14. Витримка зі статті

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

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

Зображення роблять статті яскравіше, а також можуть бути корисні для просування вашого ресурсу. Міхиль Хайманс з Yoast розповів, як оптимізувати зображення для SEO.

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

Де знайти хорошу картинку

Авторські зображення і фотографії

Коли для головної сторінки сайту ви вибираєте стоковий фотографію, ви говорите не "Ласкаво просимо в нашу компанію», а «Ласкаво просимо в якусь компанію». Тому якщо у вас є можливість зробити власні ілюстрації і фотографії - використовуйте саме їх.

Софія Ібрагімова

Контент-маркетолог

Якщо ви хочете створити мінімалістичні прості мініатюри, можна скористатися онлайн-сервісами для створення іконок. Ось популярні:

Створені за допомогою цих генераторів іконки можна розмістити на будь-якому фоні, поєднувати один з одним або з іншими зображеннями. Більше порад про те, як створити авторське зображення в статті «Значок каналу для YouTube: малюємо як можемо» .

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

альтернативні джерела

Якщо ви не можете використовувати авторську графіком, брати картинки з стоків все одно не варто. Є хороші джерела, де зображення на порядок краще, ніж стокові. Я рекомендую пошукати на сайтах Flickr.com і Freeimages.com .

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

підготовка зображень

Коли ви знайшли потрібні картинки, фотографії, графіки або діаграми, наступний крок - оптимізація графічного файлу для використання на вашому сайті. Ви повинні зробити наступне:

Задайте правильне ім'я файлу

Оптимізація зображення починається з його назви. У нього необхідно включити ключове слово. Так пошуковим роботам буде простіше зрозуміти, що зображено на картинці. Тут все просто: якщо на зображенні схід сонця в Парижі, ім'я файлу не повинно бути DSC4536.jpg, назвіть його paris-sunrise.jpg. Основне ключове слово - «paris», так як це основний об'єкт фотографії, тому я помістив його на початку назви.

Визначте масштаб зображення

Для SEO дуже важлива швидкість завантаження сторінки. Чим швидше вантажиться сайт, тим зручніше користувачам відвідувати сторінку, а роботам - індексувати її. Великі зображення значно знижують швидкість завантаження. Особливо прикро для користувачів, якщо ви завантажуєте картинку 2500 × 1500, а на екран вона виводиться в розмірі 250 × 150.

У WordPress админка після завантаження пропонує кілька варіантів розміру. Але це не означає, що розмір самого файлу буде оптимізований. Тому при завантаженні зображення перевірте, щоб його розмір в адмінці збігався з розміром самого файлу.

Оптимізуйте зображення під мобільні пристрої

Значна частина вашої аудиторії використовує мобільні пристрої для відвідування вашої сторінки. Тому зображення на сайті повинні легко масштабироваться і пристосовуватися під будь-які формати екранів. Якщо проігнорувати цей пункт, ви можете збільшити частоту відмов з боку мобільних пристроїв, що негативно позначиться на ранжируванні. Для сайтів на WordPress розроблений спеціальний плагін - RICG Responsive Images.

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

Зменшіть розмір файлу

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

Щоб перевірити, чи вдалося вам оптимізувати зображення, скористайтеся інструментом YSlow .

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

Не вставляйте картинку куди попало просто заради прикраси. Для SEO важливо, щоб зображення оточував пов'язаний текстовий контент. Тоді пошуковик буде вважати, що воно дійсно доречна тексту вашої статті.

Підписи під картинкою

Це текст, який супроводжує ваше зображення.

Чому підпис важливий для оптимізації зображень? Користувачі звертають увагу на ці підписи, навіть коли побіжно переглядають статтю. Ця така ж важлива частина структурування контенту, як заголовки, підзаголовки і списки. Нільсен ще в 1997 році відзначив, що «елементи, які покращують сприйняття тексту - це заголовки, великий шрифт, напівжирний текст, виділений текст, маркіровані списки, графіка, підписи, тематичні пропозиції та змісту». У 2012 році KissMetric заявила, що «підписи під зображеннями читаються в середньому на 300% частіше, ніж сам текст. Тому не використовувати їх або використовувати неправильно означає упустити можливість привернути величезну кількість користувачів ».

Чи потрібно додавати підпис до кожного зображення? Ні не потрібно. Додавайте текст в тому випадку, якщо він необхідний для сприйняття і корисний користувачеві, а не просто заради оптимізації.

Alt і Title зображення

Тег Alt - це опис зображення. Текст виводиться на сторінку, якщо з яких-небудь причин картинка не була відкрита. Ось що про це говорить Вікіпедія: «У ситуаціях, коли зображення недоступно для читачів, тому що вони відключили відображення картинок в своєму веб-браузері або використовують пристрій для читання з екрану через порушення зору, текст гарантує, що інформація з картинки не буде втрачена ». Обов'язково пропишіть альти до графічних файлів, включіть в опис ключове слово і переконайтеся, що воно дійсно відповідає картинці.

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

Репост на інших каналах

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

<Meta property = "og: image" content = "http://example.com/link-to-image.jpg" />

Так ви зможете поділитися своїм зображенням в Facebook, OpenGraph, Pinterest.

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

За допомогою цього плагіна можна також налаштувати картки для публікацій в Twitter.

Вирівнювання по центру

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

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

XML-файли для карти сайту

Щоб надати пошуковику інформацію про зображення на вашому сайті, вам потрібно додати прив'язані до картинок теги в карту сайту. Можна внести їх в уже існуючий XML-файл або створити новий. Це дозволить пошуковим роботам швидше проіндексувати вашу сторінку і допоможе в просуванні сайту.

Витримка зі статті

Процес оптимізації зображення складається з декількох етапів:

  • Вибір картинки, відповідної тексту.
  • Вибір імені файлу при завантаженні.
  • Підгін розмірів вихідного і відображається на сайті зображень.
  • Оптимізація під мобільні пристрої.
  • Стиснення файлу для швидкого завантаження.
  • Додавання тегів Alt і Title.
  • Додавання підпису до картинки.
  • Отримання можливості для розшарювання.
  • Вирівнювання зображення по центру.
  • Додавання інформації про графічному файлі в карту сайту.

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

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