Введение
Изображения делают сайт визуально привлекательным, но для поисковых роботов и программ чтения с экрана они остаются «чёрным ящиком». Именно атрибут alt превращает картинку из немого элемента в понятную единицу контента. Несмотря на кажущуюся простоту, многие веб-мастера либо игнорируют его, либо заполняют неправильно, упуская значительную долю трафика и снижая удобство для людей с ограниченными возможностями. В этой статье мы детально разберём, alt у картинок что это за атрибут, почему он критически важен для доступности и ранжирования, и дадим пошаговое руководство, как прописать альт корректно и эффективно.
Alt у картинок что это: определение и синтаксис
Атрибут alt (сокращение от alternative text) — это текстовая строка, которая добавляется в HTML-тег <img> и описывает содержимое изображения. Если картинка не может быть загружена, браузер отображает этот текст вместо неё. Программы экранного доступа зачитывают alt-описание, позволяя незрячим и слабовидящим пользователям понять, что изображено на странице.
Технически атрибут alt задаётся внутри тега <img> следующим образом:
<img src="кошка.jpg" alt="Рыжий кот спит на подоконнике">Alt у картинок что это по сути — словесное представление визуальной информации. Он должен давать чёткое представление о том, что находится на изображении, и какую функцию оно выполняет в контексте страницы. Если картинка носит чисто декоративный характер, атрибут alt оставляют пустым: alt="". В этом случае скринридеры пропускают такой элемент, а поисковые системы понимают, что он не несёт смысловой нагрузки.
Важно не путать атрибут alt с атрибутом title. Title — это всплывающая подсказка при наведении курсора, и она не заменяет alt. Title не зачитывается скринридерами по умолчанию и не участвует в индексации изображений так, как alt.
Зачем нужен атрибут alt: доступность и SEO
Значение атрибута alt выходит далеко за рамки технического требования. Он работает одновременно на несколько ключевых направлений.
- Доступность для людей с ограниченными возможностями. Пользователи с нарушениями зрения полагаются на скринридеры, которые озвучивают alt-тексты. Без них изображения полностью выпадают из восприятия страницы.
- Поисковое продвижение. Поисковые роботы не распознают содержание картинок визуально. Текст в alt помогает им понять, что изображено, и корректно индексировать изображение в Google Картинках и Яндекс.Картинках. Это может приносить дополнительный трафик.
- Замещение при ошибках загрузки. Если картинка не загрузилась из-за медленного соединения или битой ссылки, пользователь увидит альтернативный текст и не потеряет контекст.
- Улучшение релевантности страницы. Хорошо описанные изображения дополняют семантику текста и помогают поисковым системам лучше понять тему документа в целом.
Таким образом, атрибут alt — это не просто формальность, а инструмент, который делает контент инклюзивным и более заметным в поиске.
«Alt — это не просто SEO-тег, а элемент доступности. Прописывайте его так, будто пользователь не видит картинку и вам нужно объяснить, что на ней изображено. "Красное платье с кружевом" лучше, чем "платье". И никогда не пишите "картинка" или "изображение" — это бесполезно и для роботов, и для людей.»
Как прописать альт: правила и рекомендации
Главный принцип — представлять, что вы описываете картинку человеку, который её не видит. Описание должно быть информативным, лаконичным и соответствовать контексту страницы. Ниже приведён пошаговый алгоритм, как прописать альт грамотно.
- Опишите содержание изображения конкретно. Вместо «фото» или «картинка» укажите, что именно на ней: «красный спортивный автомобиль на треке», «схема подключения роутера», «улыбающаяся девушка с ноутбуком в кафе».
- Учитывайте контекст. Одно и то же изображение на разных страницах может требовать разного alt. Например, фото торта в кулинарном блоге: «Шоколадный торт с ягодами», а на сайте кондитерской: «Свадебный торт "Три шоколада" в разрезе».
- Будьте лаконичны. Рекомендуемая длина — до 125 символов. Этого достаточно, чтобы передать суть, и не перегружать скринридеры длинными описаниями.
- Не начинайте с «Изображение...» или «Картинка...». Скринридер сам объявляет, что это графический элемент, поэтому такие вводные фразы создают масляное масло.
- Используйте ключевые слова, но без спама. В alt уместно один раз употребить целевой запрос, если он органично описывает изображение. Например, для статьи о ремонте телефонов: «Замена экрана iPhone 12 в сервисном центре».
- Для декоративных изображений используйте пустой alt:
alt="". Это даёт понять скринридеру, что элемент можно пропустить. Не удаляйте атрибут совсем, иначе скринридер может зачитать имя файла. - Для инфографики и сложных схем предоставьте краткое описание в alt, а полное описание продублируйте в тексте рядом или через атрибут longdesc.
- Для кнопок и иконок описывайте действие, а не саму картинку. Например, для иконки лупы:
alt="Поиск", а не «Иконка увеличительного стекла».
Улучшите ранжирование в поисковых системах естественным путём.
Примеры хороших и плохих alt-текстов
Чтобы наглядно показать разницу между грамотным и формальным подходом, сравним примеры в таблице. Обратите внимание, как контекст и конкретика меняют ценность alt.
| Изображение | Плохой alt | Хороший alt | Комментарий |
| Фото мастера за работой | мастер | Автоэлектрик диагностирует двигатель с помощью ноутбука | Хороший alt передаёт суть действия и добавляет контекст |
| Схема проезда | карта | Схема проезда к офису компании от метро Киевская | Поясняет, что именно изображено и для чего |
| Иконка телефона | телефон | Позвонить: +7 495 123-45-67 | Функциональный alt для контактной информации |
| Товар в интернет-магазине | кроссовки | Мужские беговые кроссовки Adidas Ultraboost 23, вид сбоку | Указана модель, категория и ракурс — важно для поиска |
| Декоративная линия-разделитель | разделитель | (пустой alt="") | Декоративный элемент не должен отвлекать скринридер |
Типичные ошибки и как их избежать
Даже зная правила, легко допустить просчёты, которые снижают эффективность атрибута. Разберём самые распространённые из них.
- Дублирование текста из соседнего абзаца. Не нужно повторять в alt заголовок или подпись, которые и так находятся рядом. Это создаёт избыточность для скринридеров. Alt должен дополнять, а не копировать.
- Переспам ключевыми словами. Фраза «купить кроссовки дёшево Москва кроссовки скидка» не только бесполезна, но и может быть расценена поисковиком как спам. Используйте ключи умеренно.
- Слишком длинные описания. Alt-текст на несколько предложений перегружает. Подробное описание, если оно необходимо, размещайте в основном тексте страницы или через атрибут longdesc.
- Отсутствие alt вообще. Атрибут alt обязателен для всех тегов <img> по спецификации HTML. Его отсутствие — грубая ошибка валидации. Минимально нужно ставить
alt="". - Заполнение alt названием файла. «IMG_20240415_123456.jpg» не даёт никакой полезной информации. Всегда заменяйте технические имена осмысленным текстом.
- Использование alt для скрытых или невидимых изображений. Если картинка не отображается (display:none), скринридер всё равно может её зачитать, если alt не пустой. Скрытые декоративные изображения должны иметь
alt="".
Для массового мониторинга атрибутов alt на страницах вашего сайта можно пользоваться программой Screaming Frog
Заключение
Атрибут alt — это маленькая деталь с большим значением. Он делает сайт доступным для людей с ограничениями по зрению, помогает поисковым системам правильно индексировать изображения и подстраховывает контент при сбоях загрузки. Теперь вы точно знаете, alt у картинок что это, и умеете применять атрибут alt так, чтобы он приносил пользу. Главное правило, когда решаете, как прописать альт, — представить, что вы описываете изображение человеку, который его не видит, но очень хочет понять. Уделите время проверке всех изображений на сайте: замените пустые и неинформативные alt, уберите спам и сделайте описания полезными. Это простое действие повысит и юзабилити, и позиции в выдаче.
