Атрибуты Alt и Title для картинок: зачем нужны и как правильно использовать

Что такое атрибуты Alt и Title?

Прежде чем перейти к практическим рекомендациям, давайте разберёмся в терминах.

Alt (Alternative Text)

Alt — это атрибут тега <img>, который отвечает за альтернативный текст к изображению. Он отображается, если:

• Картинка не загрузилась.
• Пользователь использует скринридер (технология для людей с нарушениями зрения).
• Поисковый робот «читал» содержимое страницы для индексации.

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

Пример:

html

<img src=»krossovki.jpg» alt=»Белые женские кроссовки для бега»>

Title (Заголовок/подсказка)

Title — дополнительный атрибут, который отображает всплывающую подсказку при наведении курсора на картинку. В отличие от Alt, он не является обязательным и практически не влияет на SEO, но может улучшить пользовательский опыт.

Пример:

html

<img src=»krossovki.jpg» alt=»Белые женские кроссовки для бега» title=»Кроссовки для утренних пробежек»>

Зачем нужны Alt и Title: основные преимущества

Правильное использование этих атрибутов даёт сразу несколько преимуществ:

• SEO-оптимизация:
• Поисковые системы индексируют изображения по Alt-текстам, что позволяет привлекать дополнительный трафик из поиска по картинкам.
• Улучшение общей релевантности страницы по ключевым запросам.
• Улучшение доступности:
• Скринридеры озвучивают Alt-текст, помогая незрячим пользователям понять контекст изображения.
• Если картинка не загружается, Alt покажет, что должно было быть на месте отсутствующего изображения.
• Повышение юзабилити:
• Title помогает пользователю лучше понять изображение при наведении курсора.
• Дополнительные подсказки делают сайт более информативным.

Как правильно заполнять Alt и Title?

Грамотное заполнение атрибутов — основа качественной оптимизации. Вот основные рекомендации:

Правила для Alt:

• Неправильно: alt=»фото»
• Правильно: alt=»Мужские бежевые кроссовки для бега Nike»

• Поисковые системы легко распознают «спам».
• Неправильно: alt=»купить кроссовки купить беговые кроссовки мужские кроссовки Nike»
• Правильно: alt=»Мужские беговые кроссовки Nike Air Zoom для повседневных и спортивных тренировок»

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

• Это касается иконок, фонов и других элементов, которые не несут смысловой нагрузки.

Правила для Title:

• Title может раскрывать особенности товара, детали изображения или подсказывать действие.
• Пример: title=»Нажмите, чтобы увеличить фото»

• Title должен дополнять, а не копировать Alt-текст.

• Короткая подсказка будет лучше восприниматься пользователем.

• Этот атрибут почти не влияет на ранжирование, поэтому его функция — пользовательский опыт.