Alt-текст
Alt-текст (альтернативный текст) - это описательная текстовая строка, записанная в атрибуте alt HTML-тега <img>. Он отображается вместо изображения, когда изображение не может быть отрисовано или визуально воспринято.
Alt-текст (альтернативный текст) - это описательная текстовая строка, записанная в атрибуте alt HTML-тега <img>. Он отображается вместо изображения, когда изображение не может быть отрисовано или визуально воспринято.
Почему это важно
Alt-текст играет критическую роль и в доступности, и в SEO.
Во-первых, скринридеры зачитывают значение атрибута alt вслух, позволяя пользователям с нарушениями зрения понять содержание изображения. Стандарт WCAG (Web Content Accessibility Guidelines) уровня A требует альтернативный текст для всего нетекстового контента.
Во-вторых, поисковые краулеры не могут "видеть" изображения напрямую, поэтому они полагаются на атрибут alt, чтобы понять предмет изображения. Google официально подтвердил, что alt-текст является сигналом ранжирования для поиска по картинкам. Изображения с хорошо написанным alt-текстом с большей вероятностью появляются в Google Image Search и инструментах визуального поиска, таких как Google Lens.
В-третьих, генеративные ИИ-системы вроде ChatGPT и Perplexity также используют alt-текст как важный источник информации при анализе изображений, что делает его всё более значимым с точки зрения GEO (Generative Engine Optimization).
Рекомендации по написанию
- Будьте конкретны. Пишите, исходя из вопроса: "Какую информацию упустил бы пользователь, если бы не мог увидеть это изображение?"
- Удерживайте длину до 125 символов. Большинство скринридеров обрезают alt-текст за пределами примерно 125 символов.
- Естественно включайте релевантные ключевые слова. Вплетайте одно-два ключевых слова, согласующихся с контекстом содержимого страницы.
- Опускайте приставки вроде "изображение", "фото" или "картинка". Скринридеры уже объявляют элемент как
<img>, поэтому это избыточно. - Используйте пустой alt (
alt="") для декоративных изображений. Добавление описаний к декоративным изображениям, не несущим смысловой нагрузки, создаёт лишний шум для пользователей скринридеров.
Хорошие примеры против плохих
| Тип | Alt-текст | Причина |
|---|---|---|
| Хороший | Веганский шоколадный торт ручной работы на белой тарелке | Конкретно, лаконично и передаёт суть изображения |
| Хороший | Линейный график динамики органического трафика по месяцам в 2025 году | Чётко описывает тип графика и предмет данных |
| Плохой | Торт | Слишком расплывчато - невозможно понять, какой именно торт |
| Плохой | Торт фото изображение десерт вкусный торт шоколадный торт торт ручной работы веганский торт | Переспам ключевыми словами - может быть помечен как спам |
| Плохой | IMG_20250301_142055.jpg | Сырое имя файла, бессмысленное и для пользователей, и для поисковых систем |
Распространённые ошибки
- Переспам ключевыми словами: многократное перечисление ключевых слов в alt-тексте может быть классифицировано Google как спам и серьёзно вредит пользовательскому опыту. Ключевые слова следует включать естественно в контексте.
- Одинаковый alt-текст для всех изображений: копирование одного и того же описания для нескольких изображений на странице может привести к тому, что поисковые системы воспримут их как дублированный контент. У каждого изображения должно быть уникальное описание, отражающее его конкретное содержание.
- Полное отсутствие alt-текста: если сам атрибут alt отсутствует, скринридеры зачитают имя файла вслух, значительно ухудшая доступность. Даже декоративные изображения должны включать пустой атрибут alt (
alt=""). - Использование сгенерированного ИИ alt-текста без проверки: alt-текст, предложенный ИИ-инструментами, может не полностью отражать контекст. Проверка человеком и оптимизация под содержимое страницы всегда необходимы.
- Дословное копирование основного текста: размещение в alt-тексте той же подписи или основного текста, что и рядом с изображением, заставляет пользователей скринридеров услышать одно и то же содержание дважды. Alt-текст должен дополнять окружающий текст, а не дублировать его.
Источники:
- Image SEO Best Practices - Google Search Central
- Alt Text for SEO: How to Optimize Your Images - Ahrefs
Связанные материалы inblog
Чем помогает inblog
Редактор inblog предоставляет поле для ввода alt-текста при вставке изображений и показывает предупреждение, когда оно оставлено пустым.