Викладаю невеликий чек-лист для перевірки правильності оптимізації зображень на сайті:
- Чи немає на сайті битих зображень?
- Чи використовуєте для семантичної розмітки <img> або <picture> з декількома варіантами різних розмірів екрану для адаптивних зображень?
- Не використовуєте CSS для відображення зображень, які маєте намір проіндексувати?
- Використовуєте описове ім’я файлу і alt-текст для кожного зображення?
- Застосовуєте атрибут alt для вказівки порожнього альтернативного тексту у зображень шаблонів
- Уникаєте переспаму ключами в alt-тексті або копіювання і вставки речень цілком (з контенту)?
- Чи використовуєте alt-текст у картинок – посилань (щоб Google зміг отримати більше інформації про сторінку, на яку ви посилаєтеся)?
- Чи є xml-сайтмап для зображень, щоб надати Google більше інформації про наявні на сайті зображення?
- Чи використовуєте атрибут title для надання додаткової інформації про зображення?
- Уникаєте типових імен файлів, таких як “image1.jpg” або надмірно довгих найменувань?
- Чи використовуєте ви стандартні формати зображень, такі як JPEG, GIF, PNG, BMP і WebP, і чи відповідає розширення імені вашого файлу його типу?
- Чи оптимізуєте формат зображення залежно від його призначення на сторінці (наприклад, JPEG для фотографій, PNG для логотипів/іконок з прозорим фоном)?
- Чи оптимізовані у вас розміри зображень (не більше 200-300 кб) для швидкого завантаження сторінки?
- Чи достатньо швидко завантажуються зображення? Чи не варто винести їх на CDN?
- Чи уникаєте зображень з низькою якістю або роздільною здатністю, які можуть негативно позначитися на користувацькому досвіді?
- Чи застосовуєте теги <figure> і <figcaption> для категоризації зображень (не обов’язково)?
- Як йдуть справи з дотриманням авторських прав під час використання зображень. Надаєте посилання на джерело та/або дозволи на використання?
- Чи уникаєте використання зображень з неприйнятним змістом або тематикою, які можуть образити або негативно вплинути на аудиторію?
- Надаєте можливість для збільшення або зменшення розміру зображення, для зручності перегляду користувачем (вкрай важливо для комерції)?
- Перевіряєте зображення (після верстки контенту) на наявність помилок, спотворень або невідповідностей очікуваному результату?
Тепер кілька порад щодо роботи з alt-текстами:
- Використовуйте описовий і лаконічний alt-текст. Уникайте набивання ключових слів для пошукових систем.
- Рекомендується використовувати не більше 80-120 символів і не більше 15 слів в alt-тексті
- Уникайте оптимізації alt-тексту для пошукових систем, оскільки подібні маніпуляції іноді призводять до проблем із доступністю та ранжуванням. Він призначений для опису зображень з метою зручності користувачів, а не тільки для оптимізації пошукових систем.
- Google враховує альтернативний текст, що міститься в alt-тексті зображення, як частину тексту на сторінці.
- Необхідно розуміти, що alt-текст є дуже слабким сигналом ранжирування, але альтернативний текст корисний для деяких довгохвостих пошукових запитів.
- Використовуйте порожні теги alt – (alt=”””) для графічних елементів на сторінці, які використовуються тільки з метою дизайну.
- Не повторюйте текст, вже наявний на сторінці, роблячи alt-текст надлишковим або зайвим.
- Не використовуйте “картинка про …” або “малюнок про …” для опису зображення в alt-текстах.
- Не використовуйте текст атрибута alt разом з атрибутом aria-.
Висновки: Намагайтеся описувати зображення максимально точно і точково, використовуючи ключові слова, але не зловживайте ними. Уникайте довгих речень в alt-тексті (не більше 15 слів), але при цьому враховуйте контекст зображення на сторінці. І перевірте правильність написання та граматичну коректність alt-текстів.
