Як оптимізувати зображення для сайту
У Google краще ранжуються сторінки з гарним (унікальним, структурованим, експертним) текстовим та візуально зрозумілим контентом. Грамотно оптимізовані зображення допомагають залучити на сайт додатковий трафік.
Сьогодні ми розповімо, які прийоми допоможуть правильно оптимізувати зображення та забезпечать додаткові умови для успішного SEO просування сайту.
Також рекомендуємо прочитати нашу тематичну статтю ”Інструменти залучення трафіку на сайт: синдикація контенту”.
Підписуйтесь на нас у Facebook, Telegram, Twitter або Instagramщоб нічого не пропустити!
Відповідність картинки тексту
Релевантність
Варто вибирати зображення, які відповідають змісту тексту, наочно ілюструють, про що цей текст, посилюють його посилання та зміст.
Якість
Користувачам не цікаві розмиті, нечіткі картинки. Тому важливо використовувати якісний візуальний контент, здатний не просто привернути увагу, а й утримати його.
Унікальність
- Не завжди можна створити хороший візуал у Photoshop або Adobe Illustrator. Але можна завантажити відповідне. Рекомендуємо знайомитись з TOP-10 безкоштовних за посиланням.
- Постійно використовувати стокові картинки, які можна знайти в розділі "Найпопулярніші", теж не найкращий варіант. Навіть незважаючи на тематичну відповідність та високу роздільну здатність цих зображень.
- Варто виділити трохи більше часу на пошук авторських, що не примелькалися в Мережі. д. Їх пошукові машини сприймають набагато краще часто повторюваних картинок.
- І, звичайно, не потрібно займатися копіпастом картинок із сайтів конкурентів: ризик порушення авторських прав ще ніхто не скасовував.
Формат
Ідеального універсального формату зображень немає. Вибір залежить від того, якою є мета використання того чи іншого візуалу. До того ж у кожного формату свої характерні риси стиснення.
Ім'я файлу
Часто назви файлів виглядають приблизно так – cMEaPREq2Rhg9.jpg. Якщо ігнорувати значення високого ранжирування у пошуку, таке ім'я файлу можна й не міняти. Але вихід у TOP практично завжди важливий. А якщо так, то варто перейменовувати картинки відповідно до їх змісту.
Якщо в назві не одне слово, а кілька, то між ними треба поставити дефіс «-». Увага: спамити ключами не потрібно!
Приклад хорошої назви картинки для статті про те, як правильно вибрати надійний хостинг — choose-hosting.jpg
Розмір зображень
Наприклад, у налаштуваннях сайту у вас за умовчанням виставлено розмір картинки 400х300px. Якщо завантажити важкий файл значно більшого розміру, якість ілюстрації від цього краще не стане, і на сторінці буде видно картинку 400х300px.
Але щоб її відобразити, сайт щоразу повинен буде підвантажувати потужний вихідний файл. Це значно знижує швидкість завантаження сторінки. Особливо якщо на сторінці кілька таких зображень.
Як змінити розмір без втрати якості? Наприклад, за допомогою Adobe PhotoShop, стандартного .
Вага файлу
Швидкість завантаження – важливий чинник якісного ранжування сайтів. Тяжкі зображення суттєво знижують показники 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-коді прописується так:
Загальні вимоги до Title та Alt:
- змістовний текст, що описує зображення;
- довжина - 3-5 слів (але більше 250 символів);
- бажано, щоб включав ключовий запит;
- атрибут не повинен бути спамним.
Де прописати Title та Alt
Якщо сайт зроблено на WordPress, поля для заповнення Alt та Title потрібно шукати в налаштуваннях зображення.
Підписи до картинок
Текст Alt та Title зазвичай відображається при якійсь спеціальній дії. А ось звичайні підписи супроводжують картинку завжди. При розпізнаванні картинок пошукові роботи враховують і текст, розміщений навколо них. Тому рекомендується робити інформативні, корисні користувача підписи з помірним входженням ключових слів.
Адаптивні зображення
Це стандарт для сучасних сайтів, і Google рекомендує використовувати цю технологію. Візуальний контент повинен коректно відображатись на екрані будь-якого розміру – від дисплея смартфона до широкоформатного монітора.
Наприклад, зображення 640x400px відмінно виглядатиме на екрані смартфона, а ось на великому жк-моніторі з діагоналлю 49" - не найкращим чином.
Але якщо завантажити на сайт картинку в кількох варіантах дозволу та запропонувати браузеру вибрати потрібний файл залежно від розмірів екрана, проблема буде вирішена. Зробити це допоможе атрибут Srcset тег Img.
Важливо! При розрахунку необхідної якості зображення, треба враховувати співвідношення пікселів девайсу.
Чек-лист оптимізації картинок
- Розміщуйте на сайті релевантні, унікальні та якісні зображення
- Завантажуйте картинки відповідного формату та розміру
- Оптимізуйте вагу зображень
- Не забувайте вказувати ім'я файлу
- Активно використовуйте атрибути Alt та Title
- Додайте підписи з ключовими словами
- Налаштуйте використання адаптивних зображень
Висновки
Зображення не просто ілюструють текстовий контент, але впливають на трафік. Використання картинок поганої якості, а також "важких", які довго завантажуються, негативно позначається на поведінці користувачів.
А ось грамотно оптимізовані працюють лише в плюс: відвідувач часто читає текст по діагоналі, не вчитуючись — і якісна картинка обов'язково привертає увагу.
Крім того, такі зображення підвищують можливість пошуку вашого сайту та візуального контенту, розміщеного на ньому, у базі Google Images. Пошук за картинками – один із основних трендів SEO-просування. Ігнорувати його не варто, щоб не втратити вагому частину трафіку.
Також важливо розуміти, що сайт буде працювати більш ефективно завдяки надійному хостингу та вдалому домену.
