Альт-текст: керівництво з SEO та доступності

Огляд

Альт-текст (атрибут alt на елементах <img>) — це короткий текстовий опис зображення, призначений передусім для доступності та як запасний варіант, коли зображення не завантажується. Програми для зчитування з екрану оголошують альт-текст людям із візуальними вадами або незрячим, і пошукові системи використовують альт-текст як один із кількох текстових сигналів про тему зображення. Альт-текст допомагає індексації, надаючи оброблюваний текст для зображень, але це лише один із сигналів серед багатьох, що впливають на ранжування та видимість.

Пишіть альт-текст так, щоб описати ту інформацію, яку зображення передає своїй цільовій аудиторії. Для суто декоративних зображень використовуйте порожній alt-атрибут (<img src="..." alt="">), щоб скринрідери їх пропускали. Для складних візуалізацій — діаграм, інфографіки, схем — надавайте текстове резюме поруч або використовуйте ARIA/HTML-методи для довшого опису.

Покроково

1) Визначте роль зображення: з’ясуйте, чи є зображення інформативним, функціональним (наприклад, кнопка) чи декоративним. Інформативні та функціональні зображення потребують описового альт-тексту; декоративні мають використовувати порожній alt-атрибут.

2) Стисло опишіть суттєве: напишіть те, що користувач має зрозуміти зі зображення. Тримайте альт-текст лаконічним — прагніть передати основну ідею в одному реченні або фразі. Приклад стандартного інформативного alt: <img src="/photos/harbor.jpg" alt="Червоне рибальське судно пришвартоване в скелястій гавані на світанку">.

3) Уникайте keyword stuffing і зайвої фразеології. Не починайте з фраз на кшталт “image of” або “picture of” — скринрідери вже озвучують, що це зображення. Робіть текст корисним для людини, а не для пошукового краулера.

4) Обробка функціональних зображень і контролів: якщо зображення — це посилання або кнопка, опишіть дію, яку воно виконує. Приклад: <img src="/icons/download.svg" alt="Завантажити технічний опис продукту">. Якщо у контролі є видимий текст, alt має відповідати його призначенню або бути порожнім, якщо текст вже передає дію.

5) Надавайте довші описи для складних зображень: використовуйте підпис поруч, пов’язаний детальний опис, aria-describedby або видимий HTML-текст, щоб розширити інформацію про графік чи інфографіку. Для деталей, еквівалентних друкованим (таблиці даних, підписи осей), включіть ключову інформацію в текст сторінки.

6) Використовуйте узгоджені редакційні правила: створіть короткі стилістичні вказівки для авторів (цілі щодо довжини, коли скорочувати, мовні правила) і застосовуйте їх у шаблонах або полях CMS, щоб альт-текст збирався надійно й у масштабі.

Приклади HTML

Описове зображення: <img src="https://example.com/park.jpg" alt="Дитина запускає червоного повітряного змія в міському парку">. Декоративне зображення: <img src="/decorative-divider.png" alt="">. Функціональне зображення як посилання: <a href="/download"><img src="/icons/pdf.svg" alt="Завантажити звіт у PDF"></a>.

Перевірка альт-тексту: технічний чеклист

**Presence of alt attributes** — де перевіряти: view-source, Chrome DevTools Elements або curl (отримайте повний HTML за допомогою curl без -I) — проходить, коли кожен змістовний <img> має атрибут alt, а декоративні зображення використовують alt="".

**Rendered DOM for JS-inserted images** — де перевіряти: Chrome DevTools Elements (інспектуйте фінальний DOM) — проходить, коли зображення, видимі для користувачів, також мають відповідний альт-текст у відрендереному DOM.

**Accessibility audit** — де перевіряти: Lighthouse у Chrome DevTools або автоматизований інструмент доступності — проходить, коли аудит не повідомляє про відсутній альт-текст у інформативних зображеннях і позначає тільки навмисно декоративні зображення.

**Human-readability check** — де перевіряти: вибіркова перевірка редактором контенту або за допомогою скринрідера (NVDA, VoiceOver) — проходить, коли альт-текст передає ту саму корисну інформацію, що й візуалізація, для користувачів з допоміжними технологіями.

**Indexability of page** — де перевіряти: для власних сторінок використовуйте Google Search Console URL Inspection; для сторінок третіх сторінок використовуйте оператор site: як орієнтир — проходить, коли сторінка доступна для сканування (не блокується robots.txt або noindex) і URL Inspection показує, що сторінка відома Google. Примітка: site: — лише індикація; URL Inspection є авторитетним для ваших сторінок.

Практичні поради щодо інструментів

Використовуйте curl, щоб отримати HTML сторінки як певний user agent: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Не використовуйте -I, якщо потрібне тіло. Відкрийте збережений файл у текстовому редакторі або прогіньте через парсер DOM, щоб знайти теги <img> та їхні атрибути alt.

Запустіть Lighthouse (Chrome DevTools → Lighthouse), щоб виявити типові проблеми з доступністю, і перевірте роботу зі скринрідером (NVDA на Windows, VoiceOver на macOS), щоб підтвердити користувацький досвід.

Якщо Ви використовуєте структуровані дані, що посилаються на зображення (наприклад, Product або Recipe schema), валідизуйте розмітку за допомогою Rich Results Test або Schema Markup Validator, щоб впевнитися, що зображення, зазначені в JSON-LD, присутні та доступні.

Поширені проблеми

Відсутність альт-тексту в інформативних зображеннях. Це погіршує доступність і позбавляє незрячих користувачів візуальної інформації сторінки.

Keyword stuffing: повторення цільових ключових слів або назв брендів в атрибутах alt ненатуральним способом. Це створює поганий досвід і може ігноруватися пошуковими системами.

Використання імен файлів або загальних фраз (наприклад, "image1.jpg", "picture") як альт-тексту, що не має сенсу ні для допоміжних технологій, ні для індексації.

Покладання на атрибут title замість alt для критичної інформації; багато скринрідерів не відтворюють title послідовно.

Помилка думати, що лише альт-текст контролює рейтинг зображень. Альт-текст допомагає пошуковим системам розуміти зображення, але індексація й видимість залежать від контексту сторінки, структурованих даних, можливості сканування та інших сигналів.

Якщо зображення вставляються клієнтськи за допомогою JavaScript, автори іноді забувають додати атрибути alt у відрендереному DOM; завжди інспектуйте фінальний DOM, а не тільки HTML зі сервера.

Прочитайте Technical SEO Guide

Поширені питання

Q: How long should alt text be? A: Прагніть до стислих описів, які передають призначення зображення. Зазвичай достатньо одного короткого речення або фрази; для складних візуалізацій надайте довший доступний опис в іншому місці сторінки.

Q: Does alt text affect SEO ranking? A: Альт-текст дає текстовий сигнал, що може допомогти індексації та релевантності в пошуку за зображеннями, але сам по собі не визначає ранжування. Рейтинги залежать від багатьох сигналів, включно з релевантністю сторінки, структурованими даними, доступністю для сканування та загальною якістю контенту.

Q: Should decorative images have alt text? A: Ні. Декоративні зображення повинні мати порожній alt-атрибут (alt=""), щоб їх ігнорували скринрідери і щоб вони не додавали зайвого шуму в досвід доступності.

Q: Can automated tools generate acceptable alt text? A: Автоматичні підказки від CMS або розпізнавання зображень можуть допомогти, але завжди переглядайте й редагуйте машинно згенерований альт-текст на предмет точності, зрозумілості та питань приватності перед публікацією.

Q: What about images in CSS backgrounds? A: Фонові зображення в CSS не представлені як <img> і не мають атрибуту alt; будь-який інформаційний контент у фоні слід подати в HTML, щоб він був доступним.

Technical SEO is one part of organic growth. Building topical authority requires quality backlinks and indexed, accessible content—consider vetted marketplaces and partnerships that prioritise publisher indexability and editorial context. Будуйте авторитет за допомогою якісних backlinks