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

В сегодняшней статье я хочу рассмотреть, почему всё-таки стоит заполнять HTML-атрибут Alt у картинок, чем он отличается от атрибута Title. Материал рассчитан на джунов, которых интересует вопрос, зачем и почему нужно заполнять атрибут Alt.

Объяснение что такое атрибут Alt?

Alt у картинки – это альтернативный источник информации для пользователей, у которых по какой-то причине (слабый интернет, отключено отображение картинок и т. д.) не выводятся изображения на странице. Выводится он в виде текста там, где должна быть картинка. В HTML-коде атрибут прописывается следующим образом:

image 8 - Атрибуты Alt и Title для картинок - заполняем правильно

С его помощью юзеры понимают, что находится на странице. Кроме того, этот атрибут полезен не только пользователю, он также помогает понять поисковому роботу, что изображено на картинке. И Google, и Яндекс используют Alt как один из критериев ранжирования при поиске по картинкам. Появляется следующий вопрос: что же нужно добавлять в Alt, чтобы он был максимально полезным и для пользователя, и для поисковика?

Как правильно заполнить атрибут Alt для картинок

Что понять, как правильно заполнить атрибут Alt, рассмотрим следующий пример: у нас есть интернет-магазин металлической мебели, и мы хотим прописать Alt для карточки товара.

image 5 - Атрибуты Alt и Title для картинок - заполняем правильно

Пишем alt=»Стеллаж металлический полочный 2000х1000х400, 5 полок, светло-серый». Просим программиста прописать у всех товаров название этого товара. На все остальные изображения на сайте ALT не нужен. Хотя многие автоматические аудиты будут присылать алерты. О боже у вас ALT не заполнен.

Зачем нужен атрибут Title?

Title у картинок даёт дополнительную информацию об изображении. Он нужен для того, чтобы пользователю было проще понять, что изображено на картинке. Атрибут выводится при наведении курсора на изображение. Приколъ конечно, неужели юзеры на столько тупые?

В HTML-коде атрибут прописывается следующим образом: 

image 6 - Атрибуты Alt и Title для картинок - заполняем правильно

Если картинка будет ссылкой, Яндекс рекомендует указывать Title в ссылке: 

image 7 - Атрибуты Alt и Title для картинок - заполняем правильно

Я думаю что Title для картинок бесполезен. Только сеошник должен решать делать это или нет. Основные рекомендации к Title похожи на требования к Alt: должен быть содержательным и описывать изображение; состоять из 3–5 слов, но не больше 250 символов; не должен быть слишком большим, так как при наведении текст в 3–4 строчки может отпугнуть; по возможности содержать ключевой запрос; не должен быть спамным.

Рекомендации от меня на закуску

  • Если Вас интересует трафик из поиска по картинкам, Alt обязательно нужно заполнять, Title – по желанию.
  • Делать ALT и Title разными или одинаковыми? СМОТРИТЕ САЙТЫ В ТОПЕ — обычно там есть оба варианта.
  • Делайте правильное описание ALT
  • Если у вас много вариативных товаров — ничего страшного что будут описания одинаковые
  • Ваши любимые картинки сам файл еще можно писать на траслите. Что изображено. Тоже +1 в карму.

Что говорят Яндекс и Гугл по этому поводу в своих справках?

image 10 - Атрибуты Alt и Title для картинок - заполняем правильно

Как быстро проверить на вашем сайта Атрибуты Alt и Title для картинок

  1. Ставим плагин для хрома https://chrome.google.com/webstore/detail/seo-meta-in-1-click/bjogjfinolnhfhkbipphpdlldadpnmhc Там есть вкладка Images. Открываем ее и смотрим. Если пусто, ставим ТЗ программисту.
  2. Запускаем скриминг фрог и парсим сайт. Смотрим там вкладку IMAGES > Missing alt text.
image 9 - Атрибуты Alt и Title для картинок - заполняем правильно

P.S. Если у вас админка битрикс, вордпресс, тильда или другая — вам надо обратиться к своим разработчикам. Или ко мне нажав на кнопку «Заказать консультацию»

Примечания
Атрибуты Alt и Title для картинок.
Как заполнять атрибуты Alt и Title
Атрибуты Alt и Title картинок

Подписывайся что бы не пропустить новые посты

book bookmark icon 34486 - Атрибуты Alt и Title для картинок - заполняем правильно

Добавляй сайт в закладки CTRL+D

Что бы улучшать ПФ блога.

telegram - Атрибуты Alt и Title для картинок - заполняем правильно

Подписывайся на канал

Следи за новыми статьями.

Есть что добавить? давайте обсудим

Добавить комментарий

Ваш адрес email не будет опубликован.

ЗАКАЗАТЬ SEO

Напишите какой у вас бизнес, регион. Какие стоят перед вами задачи.

Заказать консультацию

Напишите с какой проблемой вы столкнулись