Для индексации изображения поисковым роботом используется атрибут Alt, который присваивается тегу <img>. Этот атрибут содержит краткое описание содержимого изображения. Заголовком картинки является атрибут Title, который также присваивается тегу <img>. Подсказки, которые отображаются при наведении курсора на изображение, выводятся через этот атрибут. Обычно эти теги заполняются для посетителей, у которых отключена загрузка картинок в браузерах.
Что такое alt и title атрибуты и какая от них польза?
Атрибуты Alt и Title играют важную роль в SEO-оптимизации изображений. Расскажу о том, как правильно использовать эти атрибуты, заполнять их и избегать ошибок при работе с ними.
Как писала выше, атрибут 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 имеет некоторые требования:
- Он обязан содержать объект изображения.
- Описывать его точно, без использования общих слов.
- Состоять из 3-5 слов.
- В нем не должно быть спама.
Чтобы проиллюстрировать сказанное на практике, приведем ниже отредактированный атрибут 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 должен описывать изображение максимально содержательно, содержать 3-7 слов и упоминать содержимое объекта, при этом не должен быть слишком длинным, чтобы пользователю было комфортно воспринимать текст. Кроме того, он не должен содержать спам и должен отличаться от атрибута Alt, чтобы избежать дублирования и спама.
Как атрибуты ALT и TITLE для тега IMG влияют на ранжирование сайтов?
Для того чтобы ответить на этом вопрос достаточно будет обратиться к первоисточникам, а именно, к Яндекс и Google.
Яндекс.Справка
Google справка
Если статья была для Вас полезна, подписывайтесь на мой канал, и в следующих статьях я обязательно разберу вопросы:
- Как выявить пустые атрибуты alt и title в теге IMG? Разберу в статье посвященной техническому seo-аудиту сайтов.
- Как корректно прописать атрибуты в тегах на уровне кода в HTML и CSS? Буду разбирать в статьях посвященных программированию.
