Что такое атрибут Alt?
Если говорить максимально просто, то это ваш способ объяснить поисковым системам и пользователям, что именно находится на изображении, когда его невозможно увидеть. Он критически важен, и сейчас я объясню почему.
Атрибут alt (от англ. alternative) — это HTML-атрибут тега
<img>, который устанавливает альтернативный текст для изображения. Этот текст браузер показывает в том случае, если загрузка самого изображения по какой-то причине не произошла.
Представьте, у пользователя медленный интернет или он намеренно отключил показ картинок для экономии трафика. Вместо пустого места он увидит текст, который вы указали в alt. Это сохраняет контекст и улучшает пользовательский опыт. Загрузка текста происходит практически мгновенно, в то время как загрузка изображения может занять время. Поэтому альтернативный текст появляется раньше, а по мере загрузки он сменяется изображением.
Синтаксис и базовые правила
Синтаксис атрибута предельно прост. Он добавляется напрямую в тег <img>, который отвечает за вставку изображений на страницу.
Вот как выглядит базовый HTML-код:
<img src="путь/к/картинке.jpg" alt="Описание того, что на картинке">
При его заполнении я всегда следую нескольким ключевым правилам:
- Обязательность. В современном стандарте HTML5 атрибут alt является обязательным для тега
<img>. Его отсутствие — это ошибка валидации кода. - Кавычки. Текстовая строка, значение атрибута, обязательно должна быть взята в двойные (" ") или одинарные (' ') кавычки.
- Язык. Описание должно быть на том же языке, что и основной контент страницы.
- Декоративные изображения. Если картинка не несёт смысловой нагрузки (например, это фоновый узор, разделитель), атрибут alt нужно оставить, но сделать его пустым:
alt="". Удалять атрибут нельзя.
Ключевые функции Alt-текста
На своей практике я выделяю три фундаментальные роли, которые выполняет этот атрибут. Игнорирование любой из них — это упущенная возможность для вашего сайта.
1. SEO-оптимизация
Поисковые системы, такие как Google и Яндекс, отлично индексируют текст, но "видеть" и понимать содержимое изображений им до сих пор сложно. Именно alt-текст — это основной источник информации для поискового робота о том, что изображено на картинке.
Грамотно заполненный alt-текст помогает:
- Повысить релевантность страницы. Поисковый робот сопоставляет содержимое alt с общим контентом страницы, что укрепляет её тематику.
- Получать трафик из поиска по картинкам. Это мощный канал привлечения пользователей, который многие недооценивают. Хорошее описание — прямой путь в топ выдачи Google Images и Яндекс.Картинок.
2. Веб-доступность (Accessibility)
Это аспект, о котором часто забывают. В сети есть множество пользователей с нарушениями зрения, которые используют специальные программы — скринридеры (экранные дикторы). Эти программы зачитывают содержимое страницы вслух.
Когда скринридер доходит до изображения, он зачитывает именно то, что написано в атрибуте alt. Если атрибут пустой или отсутствует, пользователь просто не получит информацию, которую несёт изображение. Заполняя alt, вы делаете свой сайт доступным для всех.
3. Пользовательский опыт (UX)
Бывают ситуации, когда изображение не загружается. Причины могут быть разными:
- Ошибка в пути к файлу (битая ссылка).
- Медленное интернет-соединение у пользователя.
- Использование блокировщиков или отключение картинок в браузере.
Во всех этих случаях на месте изображения браузер отобразит его альтернативный текст. Это позволяет пользователю понять контекст, даже не видя саму картинку. Например, если не загрузилась кнопка-ссылка с иконкой корзины, текст alt="Перейти в корзину" поможет пользователю совершить нужное действие.
Как правильно писать Alt-текст: примеры
Общая теория понятна, но дьявол, как всегда, в деталях. Я подготовил таблицу с хорошими и плохими примерами, чтобы вы уловили суть на практике.
| Тип изображения | Плохой alt | Хороший alt |
|---|---|---|
| Товар в интернет-магазине. Фотография синего смартфона. |
alt="смартфон" |
alt="Смартфон Apple iPhone 15 Pro Max синий титан, вид спереди." |
| Изображение в статье. График роста посещаемости. |
alt="график" |
alt="Линейный график, показывающий рост органического трафика сайта на 30% за последний квартал." |
| Фотография человека. Портрет спикера на конференции. |
alt="человек на сцене" |
alt="Иван Петров выступает с докладом о SEO на конференции Digital Days." |
| Картинка-ссылка. Иконка домика, ведущая на главную. |
alt="домик" |
alt="Вернуться на главную страницу сайта." |
| Декоративный элемент. Абстрактный узор в футере сайта. |
alt="синий узор" |
alt="" |
Главные ошибки при заполнении Alt
За годы работы я видел тысячи сайтов. И почти на каждом из них встречаются одни и те же ошибки при работе с атрибутом alt. Вот самые частые из них:
- Полное отсутствие атрибута. Это самая грубая ошибка. Тег
<img>без alt невалиден с точки зрения стандарта HTML5. Многие авторитетные ресурсы, как например справочник htmlbook.ru, подчёркивают это. - Переспам ключевыми словами. Попытка вписать в alt все возможные ключевые слова ("купить ноутбук москва недорого доставка цена") вредит и SEO (риск санкций), и пользователям.
- Бесполезные фразы. Не нужно начинать описание со слов "Изображение…", "Картинка…" или "Фотография…". И браузер, и поисковый робот, и скринридер уже знают, что это элемент `img` (изображение).
- Слишком длинный текст. Хотя строгих лимитов нет, старайтесь укладываться в 125-140 символов. Текст должен быть лаконичным, но информативным.
- Пустой alt для важной картинки. Если изображение несёт смысл (график, схема, фото товара), оставлять
alt=""категорически нельзя.
Alt и Title для изображений: в чём разница?
Новички часто путают атрибут alt с атрибутом title. Это разные сущности с разными задачами. Их ключевые отличия я свёл в простую таблицу.
| Критерий | Атрибут `alt` | Атрибут `title` |
|---|---|---|
| Основная задача | Альтернативный текст (если картинка не видна) | Всплывающая подсказка (при наведении курсора) |
| Обязательность для `img` | Да, обязательный атрибут | Нет, не обязательный |
| Влияние на SEO | Высокое. Ключевой фактор для Image SEO. | Минимальное или отсутствует. |
| Веб-доступность | Критически важен для скринридеров. | В большинстве случаев игнорируется скринридерами. |
| Когда виден пользователю | Когда изображение не загрузилось. | При наведении курсора мыши на изображение. |
Вывод прост: `alt` — это необходимость, `title` — опциональное дополнение, которое в большинстве случаев не требуется.
Заключение
Атрибут alt — это не формальность, а мощный инструмент коммуникации с поисковыми системами и веб-разработчика. Правильное его использование улучшает поисковую оптимизацию, делает сайт доступным для всех категорий пользователей и страхует от технических сбоев. Потратив несколько минут на написание качественного альтернативного текста, вы приносите своему проекту огромную пользу. Не пренебрегайте этим в своей работе.
