Google краще ранжує сторінки з хорошим (унікальним, структурованим, експертним) текстовим і візуально зрозумілим контентом. Грамотно оптимізовані зображення допомагають залучити додатковий трафік на вебсайт.
Сьогодні ми розповімо, як можна оптимізувати зображення, щоб забезпечити додаткові умови для успішного SEO-просування сайту.
Також рекомендуємо прочитати нашу тематичну статтю “Інструменти залучення трафіку на сайт: синдикація контенту”.
Image by UX Store from Unsplash
Підписуйтесь на нас у Facebook, Telegram, Twitter або Instagram, щоб нічого не пропустити!
Відповідність картинки тексту
Релевантність
Варто вибирати зображення, які відповідають змісту тексту, наочно ілюструють те, про що в ньому йдеться, візуально посилюють зміст.
Якість
Користувачам не цікаві розмиті, нечіткі картинки. Тому важливо використовувати якісний візуальний контент, здатний не просто привернути увагу, а й утримати її.
Унікальність
- Не завжди можна створити хороший власний візуал у Photoshop або Adobe Illustrator. Але можна завантажити потрібне фото або зображення на безплатному (або платному) сервісі. Ознайомитись з TOP-10 безплатних фотостоків можна за посиланням.
- Постійно використовувати стокові картинки, які можна знайти в розділі “Найпопулярніші зображення”, теж не найкращий варіант. Навіть попри тематичну відповідність та високу якість цих зображень.
- Варто виділити трохи більше часу на пошук авторських фото, ілюстрацій і т. д. Пошукові машини сприймають їх набагато краще за часто повторювані картинки.
- І звичайно ж, не потрібно займатися копіпастом зображень із сайтів конкурентів: ризик порушення авторських прав ще ніхто не скасовував.
Формат
Не існує універсального формату зображень. Вибір залежить від мети використання конкретної ілюстрації. До того ж кожен формат має свої характерні особливості стиснення.
Ім’я файлу
Часто назви файлів виглядають приблизно так — cMEaPREq2Rhg9.jpg. Якщо ігнорувати значення високого ранжування в пошуку, таке ім’я файлу можна не змінювати. Але практично завжди важливо потрапити на перші позиції пошукової видачі, тому варто перейменовувати картинки відповідно до їх змісту.
Якщо в назві не одне слово, а кілька, то між ними треба поставити дефіс «-». Увага: спамити ключами не потрібно!
Приклад вдалої назви картинки для статті про те, як вибрати якісний хостинг — choose-hosting.jpg.
Розмір зображень
Наприклад, у налаштуваннях сайту за замовчуванням розмір картинки 400х300px. Якщо завантажити важкий файл значно більшого розміру, якість ілюстрації від цього покращиться: на сторінці все одно буде видно зображення розміром 400х300px.
Але для того, щоб відобразити цю картинку, сайт щоразу повинен буде підвантажувати потужний вихідний файл, що серйозно знижує швидкість завантаження сторінки. Особливо, якщо на сторінці кілька таких зображень.
Як змінити розмір без втрати якості? Наприклад, за допомогою Adobe PhotoShop, стандартного фоторедактора Paint або інших відомих вам програм, що дозволяють редагувати картинки.
Вага файлу
Швидкість завантаження — важливий фактор якісного ранжування сайтів. Тяжкі зображення суттєво знижують показники PageSpeed. Уникнути цього допоможе стиснення картинок.
З цією метою можна використовувати будь-які спеціальні програми та онлайн-сервіси: TinyPNG, JpegMini, I love image, Optimizilla, EzGIF (для гіфок) та ін. Про те, як завантажувати GIF-файли у WordPress, читайте тут.
Користуватися такими сервісами не складно: потрібно завантажити картинку та змінити її вихідні параметри на необхідні. У PhotoShop це можна зробити, використовуючи функцію Save for Web.
Головна умова ефективного стиснення — збалансоване співвідношення якості та ваги зображення. Потрібно домогтися того, щоб відредагована ілюстрація не надто відрізнялася від оригінальної.
Атрибути Alt і Title
Обов’язковий атрибут Alt
Це короткий текст-опис того, що зображено на фото або на малюнку. Якщо ілюстрацію з якоїсь причини видалено, переміщено або браузер користувача її не відображає, підказкою для читача буде текст Alt.
Під час роботи з сайтом краще заповнити цей атрибут для всіх зображень, розміщених на його сторінках. Завдяки цьому пошукові роботи будуть краще розпізнавати та розуміти вміст зображень: це додатковий фактор ранжування.
У HTML-коді прописується так:
Наявність атрибута Alt позитивно впливає на загальну текстову релевантність сторінки Google. Тому важливо використовувати в описі ключові слова.
Додатковий атрибут Title
Title — своєрідний текстовий заголовок картинки (він не повинен дублювати Alt). Це налаштування не таке обов’язкове, як Alt, але опосередковано на просування ілюстрації воно все ж таки впливає.
До того ж наявність Title може позитивно вплинути на поведінкові параметри сайту. Якщо користувачеві складно зрозуміти, що зображено на картинці, він може навести на неї курсор — і підказка Title надасть інформацію.
У HTML-коді прописується так:
Загальні вимоги до Alt і Title:
- змістовний текст, який зрозуміло описує зображення;
- довжина — 3-5 слів (але не більше 250 символів);
- бажано, щоб в тексті був ключовий запит;
- атрибут не повинен бути спамним.
Де прописати Alt і Title
Якщо сайт зроблений на WordPress, поля для заповнення Alt і Title потрібно шукати в налаштуваннях зображення.
Підписи до картинок
Щоб побачити текст Alt або Title, потрібно виконати якусь додаткову дію. А ось звичайні підписи супроводжують картинку завжди. При розпізнаванні зображень пошукові роботи враховують і текст, розміщений навколо них. Тому рекомендується робити інформативні, корисні для користувача підписи з помірним вживанням ключових слів.
Адаптивны зображення
Адаптивні зображення — стандарт для сучасних сайтів, і Google рекомендує використовувати цю технологію. Візуальний контент повинен коректно відображатись на екрані будь-якого розміру — від дисплея смартфона до широкоформатного монітора.
Наприклад, зображення 640x400px буде чудово виглядати на екрані смартфона, а ось на великому моніторі з діагоналлю 49″ — ні.
Але якщо завантажити на сайт декілька варіантів картинки та запропонувати браузеру вибрати потрібний файл залежно від розмірів екрана, проблему буде розв’язано. Допоможе в цьому атрибут Srcset тега Img.
Важливо! При розрахунку необхідної якості зображення, треба враховувати співвідношення пікселів девайсу.
Чек-лист оптимізації картинок
- Розміщувати на сайті релевантні, унікальні та якісні зображення
- Завантажувати картинки відповідного формату та розміру
- Оптимізувати вагу зображень
- Вказувати ім’я файлу
- Використовувати атрибути Alt і Title
- Додавати підписи з ключовими словами
- Налаштовувати використання адаптивних зображень
Висновки
Зображення не просто ілюструють текстовий контент, але впливають на трафік. Використання картинок поганої якості, а також важких, які довго завантажуються, негативно позначається на поведінці користувачів.
А ось грамотно оптимізовані працюють тільки в плюс: відвідувач часто читає текст по діагоналі, не вчитуючись, і якісна картинка обов’язково привертає увагу.
Крім того, такі зображення підвищують ймовірність пошуку вашого сайту та візуального контенту, розміщеному на ньому, у базі Google Images. Пошук за зображеннями — один з основних трендів SEO-просування. Ігнорувати його не варто, щоб не втратити вагому частину трафіку.
Також важливо розуміти, що сайт буде працювати більш ефективно завдяки надійному хостингу та вдалому домену.