Зображення на сайті впливають як на сприйняття відвідувачів, так і на видачу в пошукових системах. Правильно оформлені атрибути ALT та TITLE роблять контент зрозумілим для людей і роботів, а ще підвищують доступність ресурсу — це простий, але важливий елемент оптимізації.
Що таке атрибут ALT
ALT — це альтернативний текст в тегові <img>, який відображається замість зображення, якщо зображення не завантажилося або вимкнено в браузері. Це не просто примітка для розробника: люди з порушенням зору та програми зчитування з екрану покладаються на цей текст, щоб зрозуміти, що зображено.
Пошукові системи використовують ALT як текстовий сигнал для визначення змісту зображення, тому грамотний ALT допомагає зображенню правильно індексуватися та підвищує релевантність сторінки.
Історичний контекст та еволюція атрибутів
Атрибут ALT з'явився ще тоді, коли швидкість Інтернету та можливості браузерів були обмежені — він давав можливість зрозуміти сторінку без графіки. З того часу його роль розширилася: ALT перетворився на важливий елемент як доступності, так і SEO. Відомі фахівці з пошукової оптимізації, зокрема Джон Мюллер, підкреслюють значущість змістовних ALT-текстів для кращого розуміння контенту пошуковими системами.
Правильне заповнення атрибута ALT для зображень
При заповненні ALT дотримуйтесь наступних правил:
- змістовний опис зображення, що передає його сутність;
- лаконічність — 3–5 слів або до 70–80 символів;
- включення релевантного ключового слова у природному контексті;
- унікальність відносно заголовків сторінки;
- вказання типу контенту за потреби, наприклад "фото" або "схема".
Після списку: ці правила допомагають як людям, так і роботам швидко зрозуміти сенс зображення без зайвих слів.
Часті помилки при заповненні атрибута ALT
Найпоширеніші промахи виглядають так:
- повна відсутність тексту в ALT;
- неінформативні підписи на кшталт "Фото1" або "Зображення";
- переповнення ключовими словами в одному атрибуті.
Що таке атрибут TITLE
TITLE — це підказка, яка зазвичай з'являється при наведенні миші на зображення. Вона дає додатковий контекст, але не замінює ALT і не повинна містити повний перелік інформації.
<img src="https://8k-digital.com.ua/uploads/images/2025-10-16/image.jpg" alt="Альтернативний опис" title="Коротка підказка"/>
Відношення пошукових систем до TITLE менш однозначне, ніж до ALT; цей атрибут цінується насамперед за покращення користувальницького досвіду.
Правильне заповнення атрибута TITLE
При додаванні TITLE орієнтуйтесь на такі принципи:
- відповідність змісту зображення;
- лаконічність і ємкість;
- органічне включення ключових слів за потреби;
- доповнення ALT, а не його повторення.
Вплив ALT та TITLE на доступність
ALT — ключовий елемент доступності: екранні читалки озвучують саме його. Відсутність осмисленого ALT робить зображення недоступним для людей із порушенням зору. Міжнародні рекомендації з доступності (WCAG) вимагають інформативних альтернатив для нетекстового контенту, і це важливо не лише з етичних міркувань, а й з точки зору відповідності стандартам.
Практичні приклади заповнення ALT і TITLE
Нижче — типові сценарії та зразки використання:
Для карток товарів у категорії
<img src="https://8k-digital.com.ua/uploads/images/2025-10-16/image.jpg" alt="Назва товару, артикул" title="Купити Назву товару за вигідною ціною"/>
Тут змінні назва товару та артикул підставляються автоматично системою управління контентом.
Для фотографій товару на сторінці товару
<img src="https://8k-digital.com.ua/uploads/images/2025-10-16/image.jpg" alt="Назва товару, артикул" title="Фото товару Назви товару"/>
Якщо на сторінці кілька ракурсів, додавайте уточнення в ALT для унікалізації:
<img src="https://8k-digital.com.ua/uploads/images/2025-10-16/image.jpg" alt="Назва товару, артикул – передній ракурс" title="Зображення Назви товару – фронтальний ракурс"/> <img src="https://8k-digital.com.ua/uploads/images/2025-10-16/image2.jpg" alt="Назва товару, артикул – деталі" title="Детальне фото Назви товару"/>
Для фотографій одного товару з різними кольорами
<img src="https://8k-digital.com.ua/uploads/images/2025-10-16/image.jpg" alt="Назва товару, колір синій, артикул" title="Назва товару синього кольору"/>
Якщо колір уже вказано в назві товару, дублювання в ALT не обов'язкове.
Як перевірити відображення ALT атрибута
Перевірити ALT можна кількома способами:
- відключити завантаження зображень у браузері та подивитися на замінний текст;
- відкрити інструменти розробника та переглянути HTML-код елемента.
Відповіді на часті запитання
Чи є ALT та TITLE простим описом зображення
Ні. ALT — це заміна зображення у разі його відсутності та джерело інформації для скринрідерів. TITLE — допоміжна підказка при наведенні. Обидва атрибути не повинні бути надто довгими.
Чи можуть ALT та TITLE дублювати одне одного
Дублювання допустиме, але не оптимальне. Фахівці з SEO, зокрема Джон Мюллер, відзначають, що пряме збігання не критично для ранжування, однак краще, коли TITLE доповнює ALT.
Чи обов'язково заповнювати атрибути ALT та TITLE для зображень
ALT обов'язково заповнювати, якщо ви хочете забезпечити доступність і шанс на трафік із пошуку за зображеннями. TITLE корисний для зручності, але для SEO він менш важливий.
Чи має значення регістр літер під час заповнення
Регістр літер не впливає на сприйняття пошуковими системами.
На якій мові заповнювати атрибути ALT та TITLE
Мова атрибутів має відповідати мові основного контенту сторінки.
Де зазвичай заповнюються атрибути ALT та TITLE
Здебільшого через поля CMS під час завантаження зображення або вручну в HTML-коді тега <img>.
<img src="https://8k-digital.com.ua/uploads/images/2025-10-16/image.jpg" alt="Опис зображення" title="Підказка"/>
Який ALT та TITLE має бути у логотипі сайту
Для логотипу в ALT вказуйте назву компанії або бренду. TITLE може повторювати назву або містити коротку підказку, наприклад "Головна".
Висновок
ALT та TITLE — незначні за обсягом, але важливі елементи сторінки. ALT потрібен передусім для доступності та індексації зображень. TITLE покращує взаємодію з користувачем. Уважне, змістовне заповнення цих атрибутів робить сайт зрозумілішим, кориснішим та доступнішим для всіх відвідувачів.
