Атрибут alt — одно из немногих мест, где интересы SEO и доступности полностью совпадают: и поисковый робот, и человек с программой экранного доступа видят вместо картинки один и тот же текст. Именно поэтому alt, набитый ключами, работает плохо по обоим направлениям. Разбираемся, как заполнять его так, чтобы польза была настоящей.
Коротко
- Alt — текстовая замена картинки: его читают поисковые роботы и программы экранного доступа.
- Title у изображения показывает всплывающую подсказку и почти не влияет на поиск.
- Alt описывает, что изображено, а не повторяет ключевой запрос.
- У декоративных картинок alt оставляют пустым — это осознанное решение, а не недоработка.
Alt и title: в чём разница
У тега <img> есть два текстовых атрибута, и путают их постоянно.
| alt | title | |
|---|---|---|
| Когда виден | Если картинка не загрузилась | При наведении курсора |
| Кто читает | Поиск и программы экранного доступа | Только зрячий пользователь с мышью |
| Влияние на поиск | Существенное, особенно в картиночном | Практически нулевое |
| На телефоне | Работает | Не показывается: наводить нечем |
| Обязателен | Да, по стандарту HTML | Нет |
Практический вывод: alt заполняем всегда, title — только когда есть что добавить сверх alt. Дублировать один в другой смысла нет, а лишняя подсказка при наведении чаще мешает, чем помогает.
Про доступность. Программа экранного доступа зачитывает alt вслух. Человек, который не видит картинку, должен понять из этой фразы, что на ней. «Диван угловой купить Москва недорого» в такой ситуации звучит абсурдно — и это ровно тот сигнал, который поиск тоже считывает.
Как написать хороший alt
Правило одно: опишите изображение так, как описали бы его по телефону человеку, который его не видит. Коротко, по делу, без рекламы.
Так нужно
- Угловой диван Осло в сером велюре, вид сбоку
- Отчёт «Источники, сводка» в Яндекс Метрике
- Схема перелинковки: опорная статья и восемь низкочастотных
- Монтажник закрепляет внешний блок кондиционера на фасаде
Так не надо
- диван купить диван москва диван недорого
- img_0417
- картинка
- Лучшие диваны от ведущего производителя со скидкой
Ориентиры по объёму
- Обычно хватает 5–12 слов. Это одно короткое предложение без точки в конце.
- Если описание не помещается — вероятно, суть картинки стоит вынести в подпись под ней, а не в alt.
- Не начинайте с «изображение» или «фото»: программа экранного доступа и так сообщает, что это картинка.
Ключевые слова в alt: сколько можно
Если запрос естественно описывает картинку — он там и окажется сам. Фотографию углового дивана честно описывают словами «угловой диван», и это уже вхождение.
Проблемы начинаются, когда ключ втискивают туда, где он не к месту: в alt логотипа, иконки или фонового узора. Такие атрибуты выглядят как попытка обмануть, работают против страницы и не дают ничего в картиночном поиске.
Опишите картинку своими словами
Сначала честное описание, без оглядки на семантику.
Проверьте, попал ли запрос сам
Часто попадает. Если да — на этом всё, больше ничего не нужно.
Если не попал — не вставляйте силой
Значит, эта картинка про другое. Ключ найдёт себе место в тексте или в alt другого изображения.
Одинаковые alt на всём сайте. Типичная беда интернет-магазинов: шаблон подставляет в alt название товара, и у пяти фотографий одной карточки атрибуты совпадают. Лучше добавлять в шаблон ракурс или номер: «вид спереди», «вид сбоку», «в интерьере».
Когда alt оставляют пустым
Пустой alt — это alt="", а не отсутствующий атрибут. Разница принципиальная: пустое значение говорит программе экранного доступа «пропусти эту картинку, она ничего не сообщает», а отсутствие атрибута заставляет её читать вслух имя файла.
Оставляем пустым
- Разделители, узоры, градиенты и прочая чистая декорация.
- Иконки рядом с текстом, который повторяет их смысл: иконка телефона рядом с номером.
- Изображения внутри ссылки, где текст ссылки уже всё объясняет.
Заполняем обязательно
- Фотографии товаров и работ.
- Схемы, графики, инфографика — им нужен не только заголовок, но и суть.
- Скриншоты интерфейсов.
- Картинки-ссылки без текста рядом: alt становится текстом ссылки.
Отдельный случай — сложные схемы и графики. В alt помещается только краткая суть, поэтому подробное описание выносят в подпись под изображением или в соседний абзац. Это удобнее всем: и тем, кто не видит картинку, и тем, кто просто листает статью.
Что ещё влияет на картинки в поиске
Alt — важная, но не единственная часть. Поиск собирает сигналы отовсюду вокруг изображения.
| Что | Как влияет |
|---|---|
| Имя файла | Осмысленное имя лучше, чем IMG_4417. Транслитом, через дефис |
| Подпись под картинкой | Читают и люди, и поиск; годится для деталей, не влезших в alt |
| Текст вокруг | Поиск связывает картинку с ближайшим абзацем |
| Размер и вес | Тяжёлые картинки тормозят страницу и портят Core Web Vitals |
| Атрибуты width и height | Резервируют место и убирают сдвиг макета при загрузке |
| Карта сайта для картинок | Помогает индексации, если изображений много |
Отдельно стоит помнить про уникальность: одна и та же стоковая фотография стоит на тысячах сайтов, и шанс попасть с ней в топ картиночного поиска близок к нулю. Собственные фото, схемы и скриншоты выигрывают именно за счёт того, что их больше нигде нет.
Частые вопросы
Сколько символов должно быть в alt?
Жёсткого лимита нет, ориентир — 5–12 слов, одно короткое предложение. Если описание получается длиннее, суть обычно стоит перенести в подпись под изображением: её видят все, а alt читают только в двух ситуациях.
Нужно ли вставлять ключевые слова в alt?
Специально — нет. Если запрос честно описывает то, что на картинке, он попадёт в alt сам. Если не попадает — значит, изображение про другое, и втискивать ключ силой вредно.
Что писать в alt у логотипа?
Название компании. Если логотип стоит ссылкой на главную, alt становится текстом этой ссылки, поэтому подойдёт вариант вроде «DevMedia, на главную».
Влияет ли alt на обычную выдачу или только на картиночную?
В первую очередь на картиночную — там это основной сигнал. Но alt также помогает поиску понять тему страницы целиком, особенно если изображений много, а текста мало.
Можно ли оставить alt пустым?
Да, если картинка чисто декоративная. Пустое значение — осознанное решение: оно говорит программам экранного доступа пропустить изображение. Отсутствие атрибута — другое дело, это уже недоработка вёрстки.
Читайте также
Продвинем сайт в поиске
Соберём семантику, доведём структуру и текст до уровня топа и будем вести проект до заявок.
Обсудить SEO-продвижение
