В данной статье мы подготовили максимально полную инфорацию по оптимизации атрибутов ALT и TITLE картинок на сайте: что это за атрибуты, почему с ними важно работать, как они влияют на ранжирование, и, конечно – примеры.
Содержание статьи:
1. Что такое атрибут ALT
Атрибут Alt – это текстовое описание для изображения внутри HTML тега <img src>. Данное описание (тег ALT для изображений) становиться видимым пользователю в случае невозможности загрузки картинки. На месте, где должна быть картинка пользователь увидит данное текстовое описание. Другими словами, ALT артибут – это альтернативный источник информации об изображение для пользователя.
Почему пользователь может не видеть картинку:
- отображение картинок отключено в браузере;
- слабый интернет.
Поэтому, если ALT атрибут заполнен, пользователь увидит текстовое описание картинки:
В HTML-коде атрибут ALT имеет следующею конструкцию:
<img src="Путь к изображению" alt="Альтернативное описание картинки" />
Почему ALT атрибут важен для заполнения:
- возможность прочитать, что отображено на картинке, если у пользователя нет возможности ее увидеть;
- атрибут ALT учитывается поисковыми роботами, которые сканируют и индексируют страницу;
- Оптимизация альтернативных названий картинок и атрибутов Alt в теге <img> упрощает поиск по изображениям в Google и Яндекс.
2. Правильное заполнение атрибута ALT для картинок
Итак, давайте разберемся как правильно подготовить ALT атрибуты для изображений. Для этого, необходимо разобраться в общих правилах:
- ALT должен быть содержательным и описывать содержание изображения;
- ALT должен состоять из 3–5 слов до 70-80 символов (не всегда можно описать содержимое картинки 2 словами);
- ALT должен содержать (по возможности) ключевой поисковый запрос, при этом, он не должен быть спамным. Чтобы облегчить поиск – лучше использовать именной падеж;
- ALT не должен дублировать заголовки страницы (к примеру TITTLE или подзаголовки H2-6).
- ALT, желательно, должен иметь приставку: «фото», «картинка», «изображение»
3. Частые ошибки при заполнение атрибута ALT
Разберем наиболее частые ошибки и неправильное заполнение атрибута ALT изображения:
Ошибка 1. Отсутствие заполнения:
<img src="Путь к изображению" alt="" />
Важно:
Стоит обратить внимание на инструкцию Яндекса: «Картинки, у которых отсутствуют содержательные описания, не попадают в поиск, так как не могут быть найдены по запросам».
Ошибка 2. Отсутствие описания содержания изображения:
<img src="Путь к изображению" alt="Фото 1" />
<img src="Путь к изображению" alt="Картинка №1" />
<img src="Путь к изображению" alt="Изображение #1" />
Ошибка 3. Переспам или перечисление ключевых слов:
<img src="Путь к изображению" alt="#Название товара# - купить по низкой цене, бесплатная доставка Киев, стоимость в Киеве, недорого" />
<img src="Путь к изображению" alt="Картинка №1" />
<img src="Путь к изображению" alt="Изображение #1" />
4. Что такое атрибут TITLE
Атрибут TITLE – это всплывающая текстовая подсказка, которую пользователь может увидеть, если наведет курсор на картинку. Другими словами – это дополнительная информация о картинке для пользователя.
В HTML-коде атрибут TITLE имеет следующею конструкцию:
<img src="Путь к изображению" alt="" title="Альтернативное описание картинки"/>
Как TITILE видит пользователь:
Как TITLE выглядит в коде:
Важно:
Google игнорирует тег TITLE в своих рекомендациях по оптимизации картинок. В свою очередь Яндекс. выводит конкретные рекомендации по его использованию тут:
Дополнительно:
Если картинка будет ссылкой – указываем атрибут для ссылки (рекомендация Яндекса):
<a title=" Подсказка " href="Ссылка"><img src="Путь к картинке" /></a>
5. Правильное заполнение атрибута TITLE
Какие требования для заполнения атрибута TITLE для картинки и как правильно заполнить данные. Объективно, основные требования аналогичны ALT:
- Атрибут Title должен соответствовать тому, что изображено на картинке.
- Атрибут Title должен быть небольшим и состоять из 3-5 слов до 80 знаков. Это подсказка, а не описание.
- Атрибут Title изображения, желательно, должен содержать ключевые слова.
6. Практические примеры заполнения ALT и TITLE
Примеры заполнения ALT атрибута:
Пример 1. Для карточек товаров в категории:
Т.к. товаров может быть тысячи, используем шаблон, например:
<img src="Путь к изображению" alt="#Название товара#, #актикул#"/>
Где в ## – указаны переменные (такое решение, как правило, внедряется с помощью веб-программиста).
Пример 2. Для фотографий товара на странице товара:
Можно использовать:
<img src="Путь к изображению" alt="#Название товара#, #актикул#" />
При этом, на качественной странице товара, как правило, больше 3+ фотографии, поэтому, есть 2 варианта:
- можно оставить одинаковый атрибутALT
- можно минимально уникализировать, пример:
- <img src=”Путь к изображению” alt=”#Название товара#, #актикул# – фото товара” />
- <img src=”Путь к изображению” alt=”Изображение товара #Название товара#, #актикул#” />
- <img src=”Путь к изображению” alt=”#Название товара#, #актикул# – #название сайта# ” />
Естественно, речь идет о шаблоне, т.к. заполнять теги вручную равно потере времени и сил.
Пример 3. Для фотографий одного товара с разными цветами:
Оптимальный вариант – добавление переменной цвета:
<img src="Путь к изображению" alt="#Название товара#, цвет #тут название цвета# #актикул#" />
Если же цвет уже есть в название товара, к примеру:
Это делать не нужно.
Также, нужно обратить внимание на пример от Google:
7. Как проверить отображение ALT атрибута
Как посмотреть ALT и TITLE атрибуты на сайте? Есть 2 простых способа это сделать:
Способ 1. Через браузер
Вы можете отключить отображение картинок на всех сайтах в своем браузере, чтобы увидеть как будут отображаться нерабочие картинки на вашем сайте.
Как это сделать:
- Перейдите в настройки
- Нажмите Дополнительно
- Выберите пункт:
- Далее п. Картинки
- Уберите галочку (для всех сайтов) или добавьте конкретный сайт
Способ 2. Через программный код
Нажмите правой кнопкой миши на изображение – далее посмотреть код:
8. Ответы на частые вопросы
Alt и TITLE – это описание изображение?
Нет. ALT – это альтернативное описание картинки. Title – это дополнительная подсказка. Google не рекомендует делать длинные атрибуты.
Могут ли Alt и Title дублировать друг друга?
Дублирование содержания допустимо.
Согласоно комментариями Джона Мюллера (Google) – при дублирование атрибутом это безусловно будет считаться дубликатом, но в этом нет никакой проблемы.
Яндекс рекомендует делать TITLE уникальным (но ничего не указывает, относительно дублирования содержания атрибута ALT и TITLE):
Но в других источниках можно встретить, что дублирование допустимо:
Многие крупные магазины используют формат повторения H1, пример:
Обязательно ли заполнять атрибуты Alt и Title для картинок?
Что говорит Яндекс:
Что говорит Google:
Объективно, поисковые системы рекомендуют заполнять атрибуты. На практике, основным тегом атрибутом ALT, тайтл удобно использовать как дополнение для юзабилити. Поэтому, если вам нужен трафик из поиска по картинкам и у вас отсутствует альт – у вас будут трудности.
Писать с большой буквы или маленькой?
Это не имеет значения.
На каком языке заполнять атрибуты Alt и TITLE?
На том языке, на котром сайт. Если ваш сайт на русском языке – заполните атрибуты на русском.
Где обычно заполняются атрибуты Alt и TITLE?
Как правило, это делается с помочью системы управления контентом (CMS). Поэтому, все зависит от возможностей админки.
Какой ALT и TITLE должен быть у логотипа сайта
Исключительно название компании.
Через CMS:
К примеру, в WordPress есть предустановленное поле при загрузке изображения:
Вручную:
Если заполнение атрибутов необходимо выполнить вручную через код, вам нужно добавить в код ссылки:
<іmg srс="Путь к картинке">
Атрибуты:
alt=”Альтернативное описание” title=”Дополнительная информация”
И привести к виду:
<іmg srс="Путь к картинке" alt="Описание" title="Подсказка">
9. Заключение
Работа с оптимизацией атрибутов ALT и TITLE стоит внимания, почему:
- Атрибут ALT учитывается поисковыми системами при ранжирование картинок, заполняя Альты – вы оптимизируете изображения для поиска. Более того, по содержимому ALT сайт ищется в поиске;
- Атрибут ALT действительно полезен пользователю, у которого отключены изображения;
- Атрибут TITLE полезен пользователю как подсказка по содержанию изображения, что может положительно отражаться на поведенческих факторах сайта.
Также вам может быть полезна статья по оптимизации и продвижению изображений: Продвижение и оптимизация картинок: 8 обязательных шагов
(2 оценок, среднее: 5,00 из 5)
Завантаження...
