Навигация по сайту

Популярные статьи

Як оптимізувати зображення для пошукових систем?

  1. використовуємо зображення
  2. Шукаємо відповідне зображення
  3. Як підготувати зображення для статті?
  4. Вибір назви файлу
  5. масштабування зображення
  6. Зменшення розміру файлу
  7. Додаємо зображення до статті
  8. Підпис під картинкою
  9. Атрибути зображення alt і title
  10. Теги OpenGraph
  11. вирівнювання
  12. Інформація про зображення в XML-файлах sitemap
  13. Для тих, хто «ниасилил»

Зображення можуть не тільки оживити текст, а й внести чималий внесок в пошукову оптимізацію і просування сторінки сайту. В своїй статті Міхиль Хейманс (Michiel Heijmans) розповість, як оптимізувати зображення для пошукових систем.

використовуємо зображення

Зображення, додані з розумом, допомагають краще зрозуміти зміст статті. Як то кажуть, краще один раз побачити, ніж сто разів почути. Мабуть, до пошукових роботів Google це не відноситься, однак зображення абсолютно точно додасть гостроти довгому і можливо нудного тексту, додасть наочності змісту (якщо це графік або діаграма) і підвищить привабливість вашого контенту в соціальних мережах. Наша рекомендація дуже проста - будь-який текст, який ви створюєте для розміщення в мережі, повинен супроводжуватися зображенням.

Шукаємо відповідне зображення

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


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

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

  • вони акцентують заголовок або тему статті;
  • вони провокують інтерес відвідувача, адже перше, що він бачить, це не тільки текст;
  • дані про ці зображеннях використовуються в тегах OpenGraph і Twitter Cards, що дозволяють зберігати картинку при репоста в соціальних мережах.

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

Якщо у вас немає можливості використовувати власні зображення, постарайтеся знайти більш-менш унікальні картинки і не використовувати стандартні стокові фотографії. Наприклад, Flickr.com - це відмінне джерело зображень. Непогані зображення можна знайти на сайтах на кшталт freeimages.com (раніше відомому як sxc.hu). Не слід використовувати фотографії зі звичайних фотобанків. Замість цього постарайтеся вибирати стокові зображення, які хоч трохи схожі на справжні. По правді кажучи, зображення людей завжди виглядають як стокові фотографії. Тому, в кінцевому рахунку, все-таки найкраще використовувати власні фотографії.

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

Анімовані GIF-зображення сьогодні дуже популярні
Анімовані GIF-зображення сьогодні дуже популярні

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

Як підготувати зображення для статті?

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

Вибір назви файлу

Пошукова оптимізація зображення починається з вибору правильного назви файлу. Саме тут в першу чергу можна використовувати потрібне ключове слово. Адже ми хочемо, щоб Google розумів (ще не проаналізувавши саму картинку), з чим пов'язана така позиція зображення. Наприклад, якщо ви вибрали зображення собору Нотр-Дам в Парижі на світанку, у файлу повинна бути інформативне назва: чи не DSC4536.jpg, а notre-dame-paris-sunrise.jpg. Головним ключовим словом тут буде Нотр-Дам (оскільки в цьому полягає зміст фотографії), саме воно буде стояти на початку назви файлу.

масштабування зображення

Час завантаження - важливий аспект взаємодії користувача з сайтом, тому цей показник має велике значення для пошукової оптимізації. Чим швидше завантажується сторінка сайту, тим легше її переглянути і проіндексувати. Зображення можуть істотно впливати на час завантаження сайту, особливо якщо зображення великого розміру відображається як маленька картинка. Наприклад, зображення має розмірі 2500 × 1500 пікселів, а відображається як картинка розміром 250 × 150 пікселів. Завантажуватися в цьому випадку все одно буде вся картинка повністю, тому має сенс зменшити картинку до необхідного розміру. Це зручно робити за допомогою WordPress, який генерує додаткові варіанти розмірів завантаженого зображення. На жаль, WordPress оптимізує тільки розмір зображення, але не розмір самого файлу.

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

Наступний крок пошукової оптимізації зображення - переконатися, що масштабована картинка має найменший можливий «вага». Для цього існують спеціальні інструменти. Звичайно, можна просто підібрати прийнятний відсоток якості, але особисто я віддаю перевагу (особливо з урахуванням дисплеїв з високою роздільною здатністю типу Retina) використовувати зображення зі 100% якістю.

Оптимізуйте розмір файлу зображення - наприклад, за допомогою JPEGMini
Оптимізуйте розмір файлу зображення - наприклад, за допомогою JPEGMini

Розмір файлу такого зображення все ж можна зменшити, наприклад, якщо видалити дані EXIF. Ми рекомендуємо використовувати такі інструменти як ImageOptim або сайти на кшталт JPEGMini і PunyPNG . Я чув хороші відгуки про Kraken.io . Після того, як зображення завантажене на сайт, інструменти типу YSlow допоможуть визначити, чи успішно пройшла оптимізація розміру зображення.

Додаємо зображення до статті

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

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

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

Переглядаючи сторінки, люди в першу чергу звертають увагу на заголовки, а потім на картинки і підписи до них. Ще в 1997 році Якоб Нільсен писав: «Швидкий перегляд можуть полегшити такі елементи тексту як заголовки, великий розмір шрифту, жирний шрифт, виділений текст, маркіровані списки, графіка, підписи до зображень, пропозиції з темою тексту, змісту». У 2012 році на сайту KissMetrics було заявлено, що «користувачі читають підписи під зображеннями в середньому на 300% частіше, ніж основний текст, тому не використовувати підписи або використовувати їх неправильно означає упустити можливість привернути величезну кількість потенційних читачів».

Чи потрібно додавати супровідний текст до всіх зображень? Ні. Як вже було сказано вище, іноді картинки служать іншим цілям. Тому спочатку вирішите, чи будете ви використовувати дане зображення для пошукової оптимізації чи ні. Щоб уникнути надмірної оптимізації, орієнтуйтеся на користувача сайту: додавайте підпис тільки в тому випадку, якщо це доцільно з точки зору користувача.

Атрибути зображення alt і title

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

Якщо в браузері IE навести мишку на зображення, текст атрибута alt з'явиться як підказка. Chrome ж показує текст атрибута title. Дуже часто вміст атрибута title просто скопійовано з атрибута alt. Багато і зовсім не заповнюють його. Для чого ж потрібен цей атрибут? Він може бути дуже корисний, але не для передачі важливої ​​інформації. На відміну від alt, атрибут title стане в нагоді не для того, щоб описати зміст зображення, а щоб повідомити додаткову інформацію, наприклад, позначити настрій, що передається картинкою, або її значення в даному контексті. Таким чином, цей атрибут дає ще одну можливість для пошукової оптимізації зображень.

Теги OpenGraph

Теги OpenGraph

Я вже згадував використання зображень в репоста в соціальних мережах. Якщо ви додасте ось такий тег в секцію <head>:

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

ваше зображення гарантовано збережеться в репоста на Facebook (теги OpenGraph також використовуються на Pinterest ). У нашого SEO-плагіна для WordPress є розділ соціальних мереж, де можна задати зображення, яке буде відображатися при додаванні посилань в соціальних мережах. Обов'язково вибирайте зображення високої якості, адже чим картинка якісніше і більше, тим частіше вона використовується соціальними платформами. Якщо ви встановили ці настройки правильно, але картинка не відображається при репоста, спробуйте очистити кеш для Facebook за допомогою URL Debugger .

Теги Twitter Cards дозволяють зробити те ж саме для Twitter.

вирівнювання

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

Не порушуйте ліву межу тексту;  НЕ вирівнюйте зображення по лівому краю
Не порушуйте ліву межу тексту; НЕ вирівнюйте зображення по лівому краю

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

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

Інформація про зображення в XML-файлах sitemap

Якщо ви займаєтеся веб-розробкою, вас може зацікавити питання про зображення в XML-картах сайту. Ось що пише Google :

«Щоб надати Google інформацію про зображення на сайті, потрібно додати спеціальні теги в файл Sitemap. Для зображень можна створити окремий файл Sitemap або оновити вже існуючий. Використовуйте будь-який зручний для вас спосіб ».

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

Для тих, хто «ниасилил»

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

Якщо ви вирішили додати зображення до статті:

  • Виберіть релевантне зображення, пов'язане з тематикою тексту.
  • Підберіть інформативне назву для файлу зображення.
  • Переконайтеся, що розміри картинки відповідають тим розмірами, в яких ця картинка відображається.
  • Зменшіть «вага» файлу для прискорення завантаження.
  • Додайте супровідний текст, щоб полегшити швидкий перегляд сторінки.
  • Обов'язково пропишіть текст в атрибуті alt, при бажанні додайте текст в атрибут title.
  • Додайте теги OpenGraph і Twitter Card.
  • Чи не розривайте картинкою ліву межу тексту.
  • Використовуйте інформацію про зображення в файлах XML sitemap.

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

З повним текстом статті Міхиля Хейманса "How to Optimize Images For SEO" можна ознайомитися на сайті searchenginejournal.com.

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