Alt текст зображень: що це таке і як його писати
Спростіть доступ до вашого контенту як для роботи пошукових систем, так і для людей, які використовують програми читання з екрана. Ось як це зробити.
У цьому посібнику ви дізнаєтеся про альтернативний текст (alt text): що це таке, чому він важливий для SEO, як його правильно використовувати та багато іншого!
Це дуже практичне і точне керівництво, що містить поради та рекомендації, які ви можете відразу ж використовувати, щоб покращити SEO -оптимізацію та доступність вашого веб-сайту.
Що таке Alt текст?
Alt текст (або альтернативний текст), також відомий як атрибут alt або тег alt (що технічно невірно, оскільки не є тегом), є просто фрагментом тексту, що описує зображення в коді HTML.
Яке використання заміщуючого тексту?
Перша функція тексту, що заміщає, полягала в тому, щоб просто описати зображення, яке не можна було завантажити.
Багато років тому, коли Інтернет був набагато повільнішим, текст, що заміщає, допомагав вам дізнатися зміст зображення, яке було занадто важким для завантаження в браузері.
Сьогодні зображення рідко не завантажуються, але якщо це відбувається, замість зображення ви побачите альтернативний текст.
Тепер альтернативний текст також почав грати роль як для роботів пошукових систем, так і для людей, які використовують програми читання з екрану:
- Заміщаючий текст допомагає людям з обмеженими можливостями (наприклад, які використовують програми читання з екрана) дізнатися про вміст зображення.
- Заміщаючий текст також допомагає роботам пошукових систем зрозуміти зміст та контекст зображення.
Звичайно, як і будь-який елемент SEO, ним часто нехтують, а в деяких випадках навіть зловживають.
Давайте тепер докладніше розглянемо, чому текст, що заміщає, важливий.
Чому Alt текст важливий
Інтернет та веб-сайти – це дуже візуальний досвід. Важко знайти сайт без зображень чи графічних елементів.
Ось чому альтернативний текст дуже важливий.
Alt текст допомагає перевести вміст зображення в слова, тим самим роблячи зображення доступним для ширшої аудиторії, включаючи людей з обмеженими можливостями та роботів пошукових систем, які ще недостатньо розумні, щоб повністю зрозуміти кожне зображення, його контекст та його значення.
Чому Alt текст важливий для SEO
Альтернативний текст - важливий елемент SEO-оптимізації на сторінці.
Правильна оптимізація альтернативного тексту підвищує шанси вашого сайту на ранжування пошуку картинок Google.
Так, альтернативний текст є фактором ранжирування для пошуку зображень Google.
Залежно від ніші та специфіки вашого веб-сайту, трафік пошуку картинок Google може відігравати величезну роль у загальному успіху вашого веб-сайту.
Наприклад, у випадку веб-сайтів електронної комерції користувачі часто-густо починають пошук продуктів із пошуку зображень Google замість того, щоб вводити назву продукту в стандартний пошук Google.
Google та інші пошукові системи можуть відображати менше зображень продуктів (або не відображати їх взагалі), якщо ви не дбаєте про оптимізацію їх альтернативного тексту.
Без належної оптимізації зображень ви можете втратити багато потенційного трафіку та клієнтів.
Чому Alt текст важливий для доступності
Видимість пошуку зображень Google дуже важлива, але є ще більш важливе міркування: доступність.
На щастя, в останні роки більше уваги приділялося доступності (тобто доступність Інтернету для всіх, включаючи людей з обмеженими можливостями та/або тих, хто використовує програми читання з екрану).
Припустимо, альтернативний текст ваших зображень насправді описує їх зміст, а чи не, наприклад, ключові слова. У цьому випадку ви допомагаєте людям, які не бачать це зображення, краще зрозуміти його та зміст усієї веб-сторінки.
Припустимо, одна з ваших веб-сторінок є посібником з SEO-аудиту, що містить скріншоти з різних інструментів сканування.
Чи не краще було б описати зміст кожного скріншота замість того, щоб поміщати один і той же текст SEO аудит у кожне зображення?
Розгляньмо кілька прикладів.
Приклади Alt тексту
Знайти багато хороших та поганих прикладів альтернативного тексту нескладно. Дозвольте мені показати вам кілька, дотримуючись наведеного вище прикладу з посібником з SEO-аудиту.
Хороші приклади альтернативного тексту
Отже, наш приклад посібника з SEO містить скріншоти з таких інструментів, як Google Search Console та Screaming Frog.
Деякі приклади альтернативного тексту можуть включати:
<img src="google-search-console-coverage-report.jpg" alt="Звіт про покриття в Google Search Console, що показує кількість проіндексованих та виключених сторінок">
<img src="google-search-console.jpg" alt="Інструмент Google Search Console від Google">
<img src="screaming-frog-html-pages.jpg" alt="Список HTML-сторінок у Screaming Frog">
<img src="screaming-frog" alt="Йде сканування Screaming Frog">
Порада: Також непогано подбати про ім'я вашого файлу. Використання описових імен файлів не є фактором ранжування, але я рекомендую це як хорошу SEO практику.
Приклади поганого та/або спам-замінного тексту
Існує багато прикладів неправильного використання alt тексту, включаючи заповнення ключовими словами або спам.
Ось як ви можете перетворити наведені вище хороші приклади на погані:
<img src="google-search-console-coverage-report.jpg"alt="аудит пошукової оптимізації безкоштовно, аудит дешевої пошукової оптимізації, спеціаліст з аудиту пошукової оптимізації, аудит пошукової оптимізації, аудит пошукової оптимізації">
<img src="google-search-console.jpg" alt="google seo, google, google, seo, google search console seo">
<img src="screaming-frog-html-pages.jpg" alt="сео-аудит, сео-аудит, сео-аудит">
<img src="screaming-frog" alt="seo-аудит">
Як бачите, наведені вище приклади насправді не дають жодної інформації про те, що насправді показують ці зображення.
Ви також можете знайти приклади і ще більше порад з оптимізації зображень в Google Search Central.
Поширені помилки в тексті alt
Додавання ключових слів до альтернативного тексту — не єдина помилка, яку ви можете зробити.
Ось кілька прикладів поширених помилок в альтернативному тексті:
- Невикористання заміщуючого тексту або використання порожнього заміщуючого тексту.
- Використання одного й того ж альтернативного тексту для різних зображень.
- Використання дуже загального альтернативного тексту , що насправді не описує зображення. Наприклад, використовувати альтернативний текст «собака» на фото собаки замість більш докладного опису собаки, її забарвлення, ніж вона займається, якою вона породи і т.д.
- Автоматичне використання імені файлу як alt тексту , що може призвести до дуже недружнього заміщуючого тексту, такого як «googleseachconsole», «google-search-console» або «photo2323», залежно від імені файлу.
Поради щодо написання альтернативного тексту
І, нарешті, ось поради про те, як написати правильний заміщаючий текст, щоб він справді виконував своє завдання:
- Не додавайте ключові слова до альтернативного тексту. Це не допоможе ранжування вашої веб-сторінки за цими ключовими словами.
- Докладно опишіть зображення, але зробіть його відносно коротким. Уникайте додавання кількох пропозицій до альтернативного тексту.
- Використовуйте цільові ключові слова, але природно, як частина опису зображення. Якщо цільове ключове слово не підходить під опис зображення, не використовуйте його.
- Не використовуйте текст на зображеннях. Весь текст має бути доданий у вигляді HTML-коду.
- Не пишіть - це зображення. Google та користувачі знають, що це зображення. Просто опишіть його зміст.
- Переконайтеся, що ви можете візуалізувати вміст зображення, просто прочитавши його текст, що заміщає. Це найкраща вправа, щоб переконатися, що ваш альтернативний текст в порядку.
Як перевірити, чи використовує сторінка альтернативний текст
Тепер ви знаєте всі найкращі практики та поширені помилки alt тексту. Але як насправді перевірити, що знаходиться в тексті зображень веб-сайту?
Альтернативний текст можна аналізувати такими способами:
Перевірка елемента (клацніть правою кнопкою миші та виберіть «Подивитися код». Потім натисніть Ctrl+Shift+C і наведіть курсор на зображення) — хороший спосіб перевірити, чи є у цього зображення текст, що заміщає.
Однак, якщо ви хочете перевірити це масово, я рекомендую один із наступних двох методів.
Встановіть розширення для веб-розробника Chrome .
Потім відкрийте сторінку, яку ви хочете перевірити.
Натисніть "Веб-розробник" і перейдіть до "Зображення" > "Показати alt атрибути" . Таким чином, ви можете побачити вміст заміщуючого тексту всіх зображень на цій веб-сторінці.
Щоб перевірити альтернативний текст зображень всього веб-сайту, використовуйте пошуковий робот, такий як Screaming Frog або Sitebulb .
Проскануйте сайт, перейдіть до звіту про зображення та перегляньте заміщуваний текст усіх зображень веб-сайту.
