Alt и Title для изображений: Что это и как их правильно прописать для SEO (Полное руководство)

1. Введение: Роль атрибутов в HTML и их SEO-значимость

В HTML-теге <img> существуют два основных атрибута, которые могут содержать текстовую информацию: alt (альтернативный текст) и title (заголовок). Их основная функция — помочь поисковым системам и вспомогательным технологиям понять, что изображено на картинке, особенно если она не может быть загружена.

Понимание разницы между ними критически важно для эффективной оптимизации изображений.

2. Атрибут alt (Alt-текст): Сердце Image SEO

alt — это обязательный атрибут для всех смысловых изображений на сайте (в соответствии со стандартами W3C и WCAG). Он служит текстовым эквивалентом визуального контента.

HTML-пример:

<img src="divan-uglovoj-sivyj.jpg" alt="Серый угловой диван-кровать для гостиной" loading="lazy">

2.1. Почему alt важен для SEO и доступности

1. Понимание контента: Поисковые роботы не могут интерпретировать визуальное содержимое. Они используют alt-текст как основной сигнал для оценки релевантности изображения и контекста всей страницы.
2. Ранжирование в Google Картинки: alt-текст, наряду с именем файла и окружающим текстом, является ключевым фактором, который Google использует для ранжирования вашего изображения в отдельном поиске по картинкам.
3. Доступность (Accessibility / WCAG): Для пользователей, использующих программы чтения экрана, alt-текст — это единственная информация о том, что показано на экране. Отсутствие alt или его бессмысленное заполнение является нарушением стандартов доступности.
4. Отказоустойчивость: Если изображение не загружается (например, из-за медленного соединения или битой ссылки), на его месте отображается текст из атрибута alt.

2.2. Правила написания эффективного Alt-текста

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

2.3. Исключения: Когда Alt не нужен (alt="")

Если изображение является чисто декоративным и не несет смысловой нагрузки, которая уже передана текстом (например, иконки в меню, разделители, фоновые паттерны), его alt-текст должен быть пустым (alt="").

Важно: Простое отсутствие атрибута alt (т.е. <img src="..." >) хуже, чем пустой alt="". Если атрибут отсутствует, программа чтения экрана может попытаться прочитать имя файла, что звучит как бессмысленный набор символов.

3. alt для разных типов контента: Продвинутые стратегии

Написание alt-текста зависит от функции изображения на странице.

3.1. E-commerce (Карточки товаров)

Цель: Четко идентифицировать продукт, его цвет, модель и ракурс.

• Изображение 1 (Главное): Кофемашина DeLonghi ESAM 4200, серебристый, вид спереди
• Изображение 2 (Деталь): Крупный план капучинатора кофемашины DeLonghi
• Изображение 3 (Контекст): Кофемашина DeLonghi на кухонной столешнице рядом с чашкой кофе

3.2. Инфографика, графики и диаграммы

Цель: Суммировать ключевой вывод или данные, показанные на графике, поскольку робот не может прочитать текст внутри картинки.

• Изображение: Круговая диаграмма с долями рынка (60% — Google, 30% — Yandex).
• Alt-текст: Диаграмма, показывающая распределение поисковых систем: Google занимает 60%, Яндекс — 30% рынка.

3.3. Изображения-ссылки

Если изображение обернуто в ссылку, alt-текст должен описывать назначение ссылки, а не только изображение.

• Плохо (Alt описывает только картинку): <a href="/katalog"><img src="icon.png" alt="Иконка каталога"></a>
• Хорошо (Alt описывает цель): <a href="/katalog"><img src="icon.png" alt="Перейти в полный каталог товаров"></a>

4. Атрибут title (Title-атрибут): UX и всплывающие подсказки

Атрибут title имеет очень низкую SEO-значимость и используется крайне редко в современном веб-дизайне.

HTML-пример:

<img src="kofemashina-bosch-tassimo.webp" alt="Красная кофемашина Bosch Tassimo" title="Нажмите, чтобы увеличить изображение">

4.1. Функция title

title-атрибут отображается как всплывающая подсказка (tooltip), когда пользователь наводит курсор мыши на изображение.

• UX-применение: Единственное оправданное использование — предоставление дополнительной, неочевидной информации, которая не является критически важной (например, подсказка в галерее “Нажмите, чтобы открыть в полный размер”).
• Проблемы: Всплывающие подсказки не работают на сенсорных устройствах (смартфонах и планшетах), что делает title малоэффективным с точки зрения универсального UX.

4.2. Правила использования Title-атрибута

1. Не дублируйте Alt: Если вы используете title, он должен нести уникальную информацию. Дублирование контента не несет пользы.
2. Фокус на UX: Применяйте его только там, где это действительно улучшает опыт взаимодействия с элементами (например, на сложных навигационных картах или графиках).

5. Интеграция с техническим SEO

alt-текст не работает в вакууме. На его эффективность влияют окружающие HTML-элементы и технические настройки.

5.1. Контекст из figcaption и figure

HTML5-элементы <figure> (для оборачивания изображения) и <figcaption> (для подписи) дают Google сильный сигнал о содержании картинки.

• Преимущество: Текст в <figcaption> имеет более высокий SEO-вес, чем просто текст, расположенный рядом с <img>.
• Пример:<figure> <img src="schet-na-oplatu.jpg" alt="Скриншот готового счета на оплату услуг"> <figcaption>Пример выставленного счета на оплату (рис. 1.2)</figcaption> </figure>

5.2. alt и адаптивность (srcset, <picture>)

При использовании современных адаптивных технологий (srcset, <picture>), alt-текст должен быть прописан только один раз — в основном теге <img>.

• Правило: Не дублируйте alt в элементах <source> внутри <picture>.

6. Аудит и мониторинг alt-текстов

Регулярная проверка (аудит) необходима для поддержания качества и доступности сайта.

6.1. Проверка на доступность (WCAG)

Соответствие стандартам WCAG (Web Content Accessibility Guidelines) требует, чтобы все изображения имели либо описательный alt, либо пустой alt="".

• Инструменты: Плагины для браузера (например, WAVE Evaluation Tool) или автоматические сервисы аудита доступности.

6.2. Инструменты для SEO-аудита

• Google Search Console (GSC): GSC может указать на проблемы с индексацией изображений, но не проверяет качество alt-текста.
• Screaming Frog SEO Spider: Позволяет быстро просканировать весь сайт и найти все изображения с пропущенным или пустым (но не декоративным) alt-текстом.
• Ручная проверка: Для самых важных страниц (главная, топовые категории, ключевые статьи) необходим ручной аудит, чтобы убедиться в релевантности и качестве alt-текста.

7. Чек-лист по оптимизации Alt и Title

1. Смысловые изображения: Все изображения, несущие информацию (фото товара, графика), должны иметь заполненный alt.
2. Декоративные изображения: Для иконок и фоновых элементов используйте alt="".
3. Ключевые слова: Включайте ключевые слова в alt-текст, только если это естественно.
4. Alt-текст ссылки: Для изображений-ссылок alt должен описывать цель перехода.
5. Title-атрибут: Используйте его очень редко, только для улучшения UX, и никогда не дублируйте alt.
6. Контекст: Используйте <figure> и <figcaption> для предоставления дополнительного контекста изображению.