Атрибуты Alt и Title для картинок: как они влияют на SEO и удобство сайта

Что такое атрибут Alt

Alt (альтернативный текст) — это HTML-атрибут, который добавляется в тег <img> и содержит текстовое описание изображения. Его основная задача — рассказать, что изображено на картинке, если она по каким-то причинам не отображается (например, из-за медленного интернета или ошибки загрузки).

Пример:

html

<img src=»dog.jpg» alt=»Собака породы лабрадор на зелёной лужайке»>

Когда и зачем нужен атрибут Alt:

1. Для SEO. Поисковики используют Alt, чтобы понять содержание изображения. Это помогает:

• продвигать страницы в поиске;
• попадать в Google Images и Яндекс.Картинки;
• усиливать релевантность страницы по ключевым словам.

2. Для доступности. Люди с нарушением зрения используют экранные читалки, которые «читают» Alt. Это важный аспект веб-доступности.

3. В случае ошибок загрузки. Если картинка не загружается, браузер покажет Alt-текст.

4. Для поведенческих факторов. Картинки с Alt отображаются в сниппетах и визуальной выдаче, увеличивая кликабельность.

Что такое атрибут Title

Title — это подсказка, которая появляется при наведении курсора на изображение. Это также атрибут тега <img>, но он не обязателен и используется, скорее, для удобства пользователя, чем для поисковиков.

Пример:

html

<img src=»dog.jpg» alt=»Лабрадор на траве» title=»Лабрадор гуляет в парке весной»>

Особенности Title:

• Показывается в виде всплывающей подсказки.
• Не влияет напрямую на SEO (Google официально не учитывает Title для ранжирования).
• Может использоваться для уточнения информации или дополнительного пояснения.

Основные отличия Alt и Title

• Alt обязателен для корректной SEO-оптимизации изображений, а Title — нет.
• Alt отображается, если картинка не загружается; Title — только при наведении курсора.
• Alt читается поисковыми роботами, Title — слабо или вовсе игнорируется в SEO.
• Alt обязателен для доступности, особенно при соблюдении стандартов WCAG.

Как правильно прописывать Alt

Чтобы Alt работал эффективно, его нужно писать грамотно. Вот ключевые рекомендации:

1. Опишите изображение понятно и точно

Alt должен описывать, что изображено на картинке, максимально естественным и лаконичным языком.

Плохо:

html

<img src=»dog.jpg» alt=»Картинка»>

Хорошо:

html

<img src=»dog.jpg» alt=»Белый лабрадор играет с мячом на траве»>

2. Используйте ключевые слова

Если изображение тематически связано с ключевыми словами страницы — включайте их в Alt. Но без переспама.

Плохо:

html

<img src=»seo.jpg» alt=»SEO SEO SEO SEO продвижение сайт SEO»>

Хорошо:

html

<img src=»seo.jpg» alt=»График роста посещаемости сайта после SEO-оптимизации»>

3. Не повторяйте Alt у всех изображений

Каждое изображение должно иметь уникальный Alt, особенно если картинки несут разную смысловую нагрузку.

4. Не пишите “картинка”, “изображение” и пр.

Поисковик и так понимает, что это изображение — эти слова в Alt избыточны.

5. Избегайте Alt у декоративных картинок

Если картинка служит чисто декоративной цели (например, фон или иконка), лучше оставить Alt пустым:

html

<img src=»bg.jpg» alt=»»>

Так поисковики не будут индексировать лишний мусор.

Как правильно использовать Title

Атрибут Title используется для уточнения или расширения информации, особенно если:

• картинка несёт смысловой подтекст;
• вы хотите дать подсказку при наведении;
• у изображения есть скрытый контекст.

Пример использования:

html

<img src=»certificate.jpg» alt=»Сертификат качества ISO 9001″ title=»Выдан в 2024 году компанией TÜV Rheinland»>

Не стоит дублировать Alt и Title — они должны дополнять друг друга, а не повторять.

Где именно использовать Alt и Title

• Продуктовые изображения

Alt: «Красные кроссовки Nike Air Max женские 2025 года»
Title: «Новая модель Air Max в весенней коллекции»

• Иллюстрации к статьям

Alt: «Инфографика с этапами SEO-продвижения»
Title: «Пошаговая SEO-стратегия: от анализа до роста трафика»

• Скриншоты

Alt: «Скриншот настроек Яндекс.Метрики с активной целью»
Title: «Пример настройки цели по клику на кнопку»

• Сертификаты и награды

Alt: «Диплом лауреата премии Рунета 2023»
Title: «Награда за вклад в развитие интернет-технологий»

Польза Alt и Title для SEO и UX

• Улучшение индексации изображений

Google и Яндекс смогут понимать, о чём изображение и показывать его в поиске по картинкам.

• Расширение охвата по запросам

Alt — дополнительный источник ключевых слов, особенно в нишах с визуальным контентом (товары, рецепты, интерьер).

• Повышение доступности

Сайты, соответствующие стандартам доступности, получают больше доверия, конверсии и лучше индексируются.

• Повышение кликабельности

Alt попадает в сниппеты, а Title помогает вовлечь пользователя за счёт всплывающей подсказки.

Распространённые ошибки

• Полное отсутствие Alt — упущенная возможность SEO-оптимизации.
• Слишком длинные описания (больше 100–125 символов).
• Спам ключевыми словами.
• Повторяющиеся Alt у разных изображений.
• Использование Alt для кнопок и иконок без смысла (если они уже подписаны).