Усього одне слово, а скільки різних значень — скрипковий інструмент, тип голосу, барабан, кнопка на клавіатурі, html-тег. Сьогодні у цій статті йдеться про атрибут ALT img (і заодно тег title) для зображень, хоча цікавіше було б про смичковий інструмент почитати.
Почнемо…
Атрибут Alt є альтернативним джерелом інформації про зображення (від цього і називається alt=alternate). Якщо зображення вимкнені або повільний інтернет (вони не встигають завантажитися), то показується текст атрибута альт.
Ось приклад: зображення відображається, альта не видно.
А ось приклад: зображення НЕ відображається, але натомість відображається альт.
Синтаксис html опису зображень
<body>
<img src=”image.jpg” alt=”Опис зображення image” />
</body>
</html>
У тегу <img> розміщують опис зображення. У прикладі показані необхідні атрибути для <img>.
Навіщо він ще потрібен?
Зараз пошуковики добре аналізують унікальність картинок, але розпізнавати їх тематику до кінця не здатні. Тому краще заповнювати альт, щоб дати зрозуміти пошуковим системам (ПС), про що саме фото.
Популярні пошукові системи мають спеціальні сервіси «Картинки». Там теж працюють алгоритми пошуку, люди шукають фотографії і переходять на сайти — це додаткове джерело трафіку.
А пошук у цих «Картинках» здійснюється через тег ALT, який є одним із факторів ранжування в пошуку за зображеннями.
Крім того, альт допомагає сліпим і слабозорим користувачам. Спеціальні програми (скрінрідери), які читають текст з екрана, ідентифікують і озвучують тексти картинок.
Експеримент: як Alt впливає на SEO
Кілька років тому фахівцями проводилися експерименти, щоб зрозуміти, що для пошуковиків важливіше: розміщення ключів в Alt чи в самому контенті, а також як впливають оптимізовані описи картинок на SEO-просування.
Результати показали, що для Google розміщення ключів у контенті часто важливіше, ніж їх знаходження в альті. Проте створювати альт для зображень необхідно, щоб залучати користувачів саме з пошуку за картинками.
Вплив на ранжування
Ось цей скріншот наочно демонструє позицію пошукових систем:
Пошукові системи прямо вказують, що альт відіграє важливу роль. Також існують інші фактори, що впливають на пошук за картинками.
Коли відбувається ранжування зображень, береться до уваги текст, що відноситься до них. Якщо опис картинок точно відповідатиме запитам, то значно збільшуються шанси на те, що зображення потраплять у топ видачі.
Поради щодо створення альтів для зображень
Найбільш значуща інформація в альті заповнюється відповідно до такого принципу:
простий, лаконічний текст має більшу ефективність.
Потрібно подивитися на зображення, а потім кількома словами написати в тегу те, що зображено.
Нижче наведено приклад із конкретною картинкою та способами створення для неї описів. Це фото з картки товару інтернет-магазину іграшок.
Перший варіант (Спам). «Хлопчик Оуен і машинка Краш, купити дешево хлопчика Оуена і машинку Краша, хлопчик Оуен і машинка Краш Київ». Такий альт буде для пошуковиків спамом. Такі описи краще не створювати.
Другий варіант (Марний). «Фотографія № 1» або «Картинка 1». Цей опис для пошукових систем і користувачів не має сенсу. Фотографії без змістовних описів часто не включаються в індекс, адже за релевантними запитами їх знайти неможливо.
Третій варіант (Інформаційний). «Темношкірий хлопчик на машинці». Опис відповідає дійсності. Такий текст підходить для інформаційних сайтів, але не зовсім для комерційних.
Четвертий варіант (Загальний комерційний). «Іграшка хлопчик і машинка». Цей спосіб актуальний для магазинів, але назву продукції краще уточнювати.
П’ятий варіант (Оптимальний). «Дитяча іграшка хлопчик Оуен і машинка Краш». Такий опис буде найкращим, оскільки містить назву товару та бренд.
У сухому залишку
Вимоги до заповнення альта:
- Унікальність. Усі зображення повинні мати описи, які відрізняються один від одного.
- Ключові слова. Потрібно прописувати ключі, які точно описують зображення. Вони мають бути органічно вписаними в текст.
- Релевантність. Альт повинен описувати зміст фотографії та відповідати контексту сторінки.
- Обсяг. Оптимальний розмір — до 250 символів.
- Мова. Для україномовних ресурсів краще прописувати Alt українською мовою.
- Регістр. Альти можна заповнювати як з великої, так і з малої літери.
Модифікації одного і того ж товару
У багатьох магазинах є схожі товари з різних ракурсів. Як їх відрізнити?
Наприклад, для фото iPhone 15 можна створити такі альти:
- iPhone 15 вигляд спереду.
- iPhone 15 вигляд збоку.
Якщо продукти ідентичні, але кольори різні:
- iPhone 15 Blue.
- iPhone 15 Black.
Також рекомендується створювати назви самих файлів транслітом, наприклад: iphone-15-blue.jpg.
Якщо зображень тисячі
Якщо на сайті тисячі зображень із порожніми alt (наприклад, в інтернет-магазині), заповнити їх вручну складно.
У такому разі рекомендується такий підхід:
- Налаштувати автоматичне правило для всіх фото: alt = H1 товару (назва товару).
- Це дозволить швидко заповнити всі порожні атрибути.
- Після цього можна перевірити сайт через Screaming Frog і виправити дублікати вручну там, де це критично.
Про атрибут title
Крім альта, можна заповнювати і title. Він відображає додаткові відомості про зображення, коли користувач наводить на нього курсор.
Спробуйте навести курсор на це зображення, щоб побачити тайтл:
Title можуть побачити користувачі ПК. Якщо потрібно передати критично важливу інформацію, не слід покладатися лише на тайтл — краще продублювати її в основному тексті.
Як заповнювати title:
- Він повинен відповідати змісту зображення.
- Краще робити його коротким і змістовним.
- Можна використовувати ключові слова, але без спаму.
- Не варто писати загальні фрази на кшталт «тут картинка».
Як прописувати в WordPress
У WordPress не обов’язково редагувати HTML-код. Після завантаження зображення достатньо натиснути на нього в редакторі та вибрати іконку «Олівець».
У вікні, що з’явиться, можна легко прописати і альт, і тайтл.
Питання та відповіді
- Чи є альт описом до зображення?
Так, це альтернативний опис, який виводиться замість картинки, якщо вона не завантажилася. - Чи обов’язково заповнювати обидва теги?
Alt — обов’язковий для SEO. Title — за бажанням, для покращення поведінкових факторів. - Чи можна робити їх однаковими?
Існують різні думки. Можна робити однаковими, але краще, якщо вони будуть трохи відрізнятися, доповнюючи один одного. - Якою мовою писати?
Для українських сайтів найкраще використовувати українську мову.
