Атрибут ALT и TITLE для тега IMG. Польза для SEO-оптимизации.

Для индексации изображения поисковым роботом используется атрибут Alt, который присваивается тегу <img>. Этот атрибут содержит краткое описание содержимого изображения. Заголовком картинки является атрибут Title, который также присваивается тегу <img>. Подсказки, которые отображаются при наведении курсора на изображение, выводятся через этот атрибут. Обычно эти теги заполняются для посетителей, у которых отключена загрузка картинок в браузерах.

Что такое alt и title атрибуты и какая от них польза?

Атрибуты Alt и Title играют важную роль в SEO-оптимизации изображений. Расскажу о том, как правильно использовать эти атрибуты, заполнять их и избегать ошибок при работе с ними.

Пример тега ALT в коде страницы сайта

Как писала выше, атрибут Alt является частью тега <img> в html и предназначен для передачи текстовой информации о картинке.
Путать с названием файла не стоит - это важно. В примере кода, где атрибут Alt заполнен:

<img class="mfp-img" alt="Sweet Skin System Gel Detergente AHA 5% очищающий гель - лосьон, 200 мл" src= "/upload/iblock/5f5/5f5b8c4731b0a5be111a981a3a1617de.png" style="max-height: 740px;">

Сразу дам комментарий, изображение с названием в виде буквенно-цифрового кода - некорректно, необходимо называть изображение тезисами описывающими изображение. Например, Очищающий гель Sweet Skin. И второй момент тег ALT длинноват.

Атрибут Alt имеет некоторые требования:

1. Он обязан содержать объект изображения.
2. Описывать его точно, без использования общих слов.
3. Состоять из 3-5 слов.
4. В нем не должно быть спама.

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

<img class="mfp-img" alt="Sweet Skin System очищающий гель" src= "/upload/iblock/5f5/SweetSkinSystemGelDetergenteAHA5.png" style="max-height: 740px;">

Еще две ошибки по части seo, в изначальном варианте примера, тег H1, Title(страницы) и Alt идентичны, это грубая ошибка сео оптимизации. Вторая, у изображения ен прописан Title (разберем ниже что это такое).

Атрибут Title изображения

Еще одним атрибутом тега <img> в html является Title у изображений. При наведении курсора на изображение, этот атрибут описывает его. Пример кода с заполненным атрибутом Title:

<img class="mfp-img" alt="Sweet Skin System очищающий гель" src= "/upload/iblock/5f5/SweetSkinSystemGelDetergenteAHA5.png" title="Sweet Skin System очищающий гель AHA 5%, 200 мл" style="max-height: 740px;">

Пример, как выглядит Title при наведении курсора на картинку

Атрибут Title должен описывать изображение максимально содержательно, содержать 3-7 слов и упоминать содержимое объекта, при этом не должен быть слишком длинным, чтобы пользователю было комфортно воспринимать текст. Кроме того, он не должен содержать спам и должен отличаться от атрибута Alt, чтобы избежать дублирования и спама.

Как атрибуты ALT и TITLE для тега IMG влияют на ранжирование сайтов?

Для того чтобы ответить на этом вопрос достаточно будет обратиться к первоисточникам, а именно, к Яндекс и Google.

Яндекс.Справка

Скриншот актуальной информации по индексации изображений

Google справка

Скриншот актуальной информации по индексации изображений

Если статья была для Вас полезна, подписывайтесь на мой канал, и в следующих статьях я обязательно разберу вопросы:

1. Как выявить пустые атрибуты alt и title в теге IMG? Разберу в статье посвященной техническому seo-аудиту сайтов.
2. Как корректно прописать атрибуты в тегах на уровне кода в HTML и CSS? Буду разбирать в статьях посвященных программированию.