Новый формат
Атрибуты alt и title у картинки: как заполнять правильно
`alt` описывает изображение, если файл не загрузился или его читает скринридер. `title` у `img` — подсказка при наведении в части браузеров; на SEO и доступность он влияет слабо.
Ниже — как писать alt, когда ставить пустой `alt=""`, нужен ли title и чего избегать (переспам ключей, «картинка1»). Кликабельные баннеры — в статье про картинку-ссылку.
Зачем атрибуты у img
Робот и вспомогательные технологии не «видят» пиксели как человек. `alt` даёт текстовый эквивалент. Для людей alt всплывает, если картинка битая; для SEO — сигнал о теме изображения и страницы в связке с контентом.
`title` исторически делали «ещё одним полем для ключей». Сегодня это слабый и необязательный слой; на тач-устройствах наведения часто нет.
Роли:
- `src` — файл;
- `alt` — смысл / пусто для декора;
- `width`/`height` — место в вёрстке;
- `title` — опциональная подсказка, не замена alt.
Как писать alt
Опишите, что на изображении и зачем оно здесь, без «изображение показывает…». Для товара — модель/тип; для схемы — что объясняет; для фото офиса — коротко и честно.
Если картинка несёт текст (скрин, мем с фразой), alt должен передать суть текста или решения — иначе смысл потеряется для скринридера.
Примеры:
- плохо: `photo`, `img_4521`, `купить холодильник недорого акция`;
- лучше: `Холодильник Side-by-Side белый, открытые полки`;
- для декоративной линии: `alt=""`;
- для кнопки-иконки «поиск»: `alt="Поиск"` или текст рядом + пустой alt.
Alt и SEO: реалистично
Alt помогает понять тему картинки и иногда попадать в поиск по картинкам. Это не «ускорение индексации всего сайта» и не гарантия ТОП. Важнее: релевантная страница, лёгкий файл, понятный контекст вокруг.
Не дублируйте Title страницы в каждый alt. Не прячьте основной оффер только в картинке без HTML-текста.
Сильнее alt:
- качественный контент страницы;
- сжатие и современные форматы;
- осмысленные подписи;
- внутренняя перелинковка текстом.
Title у изображения
Можно дать короткую подсказку при hover на десктопе. Не копируйте туда простыню ключей. Многие пользователи title не увидят никогда.
Не путайте `title` у `img` с `<title>` документа и с подписью `<figcaption>`.
Когда title уместен:
- доп. уточнение без критичного смысла;
- не как единственный источник описания;
- не вместо доступного текста ссылки.
Картинка-ссылка и декоратив
Если `img` внутри ссылки и рядом нет текста, alt должен описывать цель перехода («Каталог насосов»), а не только «синяя кнопка».
Фоновые картинки в CSS не имеют alt — не кладите туда единственный важный смысл.
Чеклист:
- информативные — осмысленный alt;
- декор — пустой alt;
- ссылка-картинка — alt = действие/цель;
- нет ключей пачкой.
Практика внедрения
В CMS сделайте поле alt обязательным для контентных фото. Пройдите краулером: пустые и шаблонные alt. На аудитах доступности проверьте декоративные иконки.
Пример: `<img src="/images/pump.webp" alt="Центробежный насос для скважины, корпус нержавейка" width="800" height="600">`.
Регламент редакции:
- alt пишут при загрузке, не «потом»;
- запрет `image`, `photo`, `баннер`;
- ревью коммерческих галерей;
- title не использовать как свалку ключей.
Частые вопросы
Alt обязателен?
Для информативных изображений — да, осмысленный текст. Для чисто декоративных — пустой `alt=""`, чтобы скринридер не читал мусор.
Title у img обязателен для SEO?
Нет. Не рассчитывайте на title как на фактор ранжирования. Фокус на alt, контексте страницы и качестве файла.
Сколько символов в alt?
Столько, сколько нужно описать смысл коротко. Часто хватает фразы; простыня ключей не нужна.
Ключи в alt помогают?
Умеренно и по делу — ок. Набивать «купить X недорого фото» в каждый alt — вред и плохая доступность.
Alt = подпись под картинкой?
Не обязательно. Подпись видна всем; alt — альтернативный текст. Можно дублировать смысл, но не обязаны совпадать слово в слово.
Нужен ли alt у иконок в кнопках?
Если рядом есть видимый текст кнопки — часто `alt=""`. Если иконка единственный смысл — alt должен назвать действие.
Filename вместо alt?
Нет. Имя файла полезно для порядка, но не заменяет alt.
Alt на русском или английском?
На языке страницы и аудитории.
Alt у картинок пустой или с переспамом?
Настроим осмысленные alt и уберём культ title у img.
Обсудить задачу
