Alt и title — это специальные текстовые атрибуты в HTML, которые описывают изображение на сайте. Атрибут alt (альтернативный текст) нужен для SEO, доступности и отображается, если картинка не загрузилась. Атрибут title — это всплывающий текст при наведении курсора. Они помогают поисковым системам и пользователям понять, что изображено, и правильно воспринимать контент.

Зачем вообще описывать изображение

На самом деле, для поисковиков и некоторых пользователей изображения без текста — как чёрный ящик. Браузер их отобразит, но Google не поймёт, что именно показано. Поэтому к каждому изображению можно (и нужно) добавлять атрибуты alt и title — чтобы дать описание и смысл. Но эти два атрибута — разные. И у каждого своя роль.

В чём разница между Alt и Title

Атрибут	Что это	Где используется	Для чего нужен
alt	Альтернативный текст	Отображается, если картинка не загрузилась	Для SEO и доступности
title	Всплывающая текст при наведении	Показывается при ховере на изображение	Для UX, для SEO

Alt — обязательный атрибут для SEO и доступности

<img src="bike.jpg" alt="Городской велосипед на фоне кирпичной стены">

🔹 Показывается, если картинка не подгрузилась 🔹 Используется поисковыми системами для понимания контекста 🔹 Задействуется в Google Images и других визуальных поисках 🔹 Озвучивается скринридерами для пользователей с нарушениями зрения 💡 Хороший alt:

• точно описывает изображение;
• содержит ключевые слова, если уместно;
• не дублирует текст вокруг.

Плохо: alt=»image» Хорошо: alt=»Сравнение iPhone 15 и iPhone 14 — вид сзади»

Title — дополнительный, но не обязательный

<img src="bike.jpg" alt="Городской велосипед белого цвета" title="Городской велосипед белый">

🔸 Используется как всплывающая подсказка 🔸 Не обязателен, но может улучшать восприятие 🔸 Не влияет напрямую на SEO, в отличие от alt 💬 Использовать стоит тогда, когда изображение требует пояснения действия (например, клик, масштаб, переход).

Как не нужно делать

⛔ Дублировать alt и title слово в слово ⛔ Вставлять ключи без описания: alt=»купить диван дешево недорого СПб» ⛔ Оставлять alt пустым без причины ⛔ Использовать title вместо alt — они не взаимозаменяемы

Пример правильной пары

<img src="sofa.jpg" alt="Угловой диван из велюра в интерьере светлой гостиной" title="Угловой диван из велюра">

Нужно ли прописывать alt для всех изображений?

• Да — для контентных изображений (товары, иллюстрации, графики, фото).
• Нет — для декоративных элементов (иконки, фоновые узоры, разделители), у них alt должен быть пустым: alt=»».

Проверка: как узнать, прописаны ли alt и title

• Через исходный код страницы (Ctrl+U)
• В инструментах разработчика (DevTools → Elements)
• С помощью SEO-анализаторов: Screaming Frog, Ahrefs, Sitechecker