Как писать alt‑тексты, чтобы и люди, и поисковики были довольны

Alt‑текст — это не просто поле в HTML, это голос изображения для тех, кто не видит экран, и подсказка для поисковых систем. Правильно составленный alt делает сайт доступным, улучшает индексирование в Google и убирает недоразумения в карточках товаров и статьях. В этой статье расскажу, как писать alt‑тексты быстро, правильно и без лишних слов.

Зачем нужен alt‑текст: кратко и по делу

Согласно рекомендациям Google Search Central и стандартам WCAG, alt обязателен для всех значимых изображений.Экранные читалки читают alt вместо картинки, а поисковики используют его, чтобы понять, о чем изображение. Поэтому alt — одновременно вопрос доступности и SEO. Но важно не путать цели: основная — помочь человеку, а не «заспамить» ключевыми словами.

Принципы правильного alt‑текста

Вот простые правила, которые работают в большинстве случаев. Они взяты из практик WCAG и советов экспертов по веб‑услугам.

• Будьте конкретны. Опишите главное: кто/что и что делает.
• Краткость. 80–125 символов обычно достаточно — читалки удобно читают такие тексты.
• Контекст важнее деталей. Опишите то, что релевантно содержанию страницы.
• Декоративные изображения: alt=»» (пустой атрибут) или role=»presentation».
• Если изображение — ссылка, alt должен отражать функцию ссылки.
• Не используйте «картинка», «изображение», «фото» в начале — это лишнее.
• Не дублируйте один и тот же alt для разных картинок, если они разные по смыслу.

Как писать: пошагово

Практический алгоритм поможет писать alt быстро и без сомнений.

1. Определите роль: информативная картинка, иллюстрация, функциональный элемент или декоративная деталь.
2. Если декоративная — поставьте alt=»» и переходите дальше.
3. Если информативная — опишите предмет и действие в одно‑две фразы.
4. Если это график или диаграмма — врезкой дайте краткое резюме, а подробный анализ в тексте под картинкой или в описании.
5. Проверьте: будет ли alt полезен человеку, который не видит изображение? Если да — готово.

Примеры коротких alt‑текстов

• Правильно: «Красное вязаное пальто на манекене, вид спереди».
• Правильно (ссылка): «Перейти к странице оформления заказа».
• Правильно (диаграмма): «Рост продаж сервиса по кварталам, пики в Q2 и Q4».
• Неправильно: «Фото магазина» — слишком общо.
• Неправильно: «Купить пальто, модное пальто, пальто со скидкой» — это ключевой спам.

Технические нюансы и часто задаваемые вопросы

Некоторые моменты стоит учесть при внедрении alt на сайте.

• Атрибут title не заменяет alt. Title показывается как подсказка в браузере, но для доступности важен alt.
• Для сложных изображений используйте figcaption или отдельный текстовый блок, а в alt — краткое резюме.
• Если картинка содержит текст, повторите его в alt — иначе информация потеряется.
• Проверяйте сайт через инструменты: Lighthouse, WAVE или встроенные проверки в Search Console. Они подскажут проблемные места.

Таблица: что писать и чего избегать

Как проверять и масштабировать работу

Если у вас сотни изображений, заведите чек‑лист: роль изображения, черновой вариант alt, проверка читабельности, тест в экранном ридере. Автоматически генерировать alt можно лишь в качестве заготовки, но человек должен проверить смысл и контекст. Для e‑commerce правила немного строже: у товаров в alt указывайте бренд и модель, но коротко.

Вывод

Alt‑текст — простая вещь, если подойти вдумчиво. Помните: описываем для людей, а поисковики уже разберутся. Несколько минут на корректный alt для каждого изображения вернутся в виде лучшей доступности, меньшего количества вопросов от пользователей и более качественной индексации сайта.