//

ALT и TITLE атрибуты: оптимизируем картинки

ALT и TITLE атрибуты: оптимизируем картинки

обновлено: 29.10.2019
Александр Коваленко, CEO/founder агентства Advermedia.ua, опыт в SEO более 10 лет. Телеграм: @profseoua
0
28.10.2019

В данной статье мы подготовили максимально полную инфорацию по оптимизации атрибутов ALT и TITLE картинок на сайте: что это за атрибуты, почему с ними важно работать, как они влияют на ранжирование, и, конечно – примеры. 

Содержание статьи:

  1. Что такое атрибут ALT 
  2. Правильное заполнение атрибута ALT для картинок
  3. Что такое атрибут TITLE
  4. Правильное заполнение атрибута TITLE
  5. Частые ошибки при заполнение атрибута ALT
  6. Практические примеры заполнения ALT и TITLE
  7. Как проверить отображение ALT атрибута
  8. Ответы на частые вопросы
  9. Заключение

1. Что такое атрибут ALT 

Атрибут Alt  – это текстовое описание для изображения внутри HTML тега <img src>. Данное описание (тег ALT для изображений) становиться видимым пользователю в случае невозможности загрузки картинки. На месте, где должна быть картинка пользователь увидит данное текстовое описание. Другими словами, ALT артибут – это альтернативный источник информации об изображение для пользователя.

ALT и TITLE атрибуты: оптимизируем картинки

Почему пользователь может не видеть картинку:

  • отображение картинок отключено в браузере;
  • слабый интернет.

Поэтому, если ALT атрибут заполнен, пользователь увидит текстовое описание картинки:
ALT и TITLE атрибуты: оптимизируем картинки

В HTML-коде атрибут ALT имеет следующею конструкцию: 

<img src="Путь к изображению" alt="Альтернативное описание картинки" />

Почему ALT атрибут важен для заполнения:

  • возможность прочитать, что отображено на картинке, если у пользователя нет возможности ее увидеть;
  • атрибут ALT учитывается поисковыми роботами, которые сканируют и индексируют страницу;
  • Оптимизация альтернативных названий картинок и атрибутов Alt в теге <img> упрощает поиск по изображениям в Google и Яндекс.

2. Правильное заполнение атрибута ALT для картинок

Итак, давайте разберемся как правильно подготовить ALT атрибуты для изображений. Для этого, необходимо разобраться в общих правилах:

  1. ALT должен быть содержательным и описывать содержание изображения;
  2. ALT должен состоять из 3–5 слов до 70-80 символов (не всегда можно описать содержимое картинки 2 словами);
  3. ALT должен содержать (по возможности) ключевой поисковый запрос, при этом, он не должен быть спамным. Чтобы облегчить поиск – лучше использовать именной падеж;
  4. ALT не должен дублировать заголовки страницы (к примеру TITTLE или подзаголовки H2-6).
  5. 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 видит пользователь:
ALT и TITLE атрибуты: оптимизируем картинки

Как TITLE выглядит в коде:
ALT и TITLE атрибуты: оптимизируем картинки

Важно:
Google игнорирует тег TITLE в своих рекомендациях по оптимизации картинок. В свою очередь Яндекс. выводит конкретные рекомендации по его использованию тут:

ALT и TITLE атрибуты: оптимизируем картинки

ALT и TITLE атрибуты: оптимизируем картинки

Дополнительно:
Если картинка будет ссылкой – указываем атрибут для ссылки (рекомендация Яндекса):

<a title=" Подсказка " href="Ссылка"><img src="Путь к картинке" /></a>

5. Правильное заполнение атрибута TITLE

Какие требования для заполнения атрибута TITLE для картинки и как правильно заполнить данные. Объективно, основные требования аналогичны ALT:

  1. Атрибут Title должен соответствовать тому, что изображено на картинке.
  2. Атрибут Title должен быть небольшим и состоять из 3-5 слов до 80 знаков. Это подсказка, а не описание.
  3. Атрибут Title изображения, желательно, должен содержать ключевые слова.

6. Практические примеры заполнения ALT и TITLE

Примеры заполнения ALT атрибута:

Пример 1. Для карточек товаров в категории:
Т.к. товаров может быть тысячи, используем шаблон, например:

<img src="Путь к изображению" alt="#Название товара#, #актикул#"/>

Где в ## – указаны переменные (такое решение, как правило, внедряется с помощью веб-программиста).

Пример 2. Для фотографий товара на странице товара:
ALT и TITLE атрибуты: оптимизируем картинки

Можно использовать: 

<img src="Путь к изображению" alt="#Название товара#, #актикул#" />

При этом, на качественной странице товара, как правило, больше 3+ фотографии, поэтому, есть 2 варианта: 

  • можно оставить одинаковый атрибутALT 
  • можно минимально уникализировать, пример:
    1. <img src=”Путь к изображению” alt=”#Название товара#, #актикул# – фото товара” />
    2. <img src=”Путь к изображению” alt=”Изображение товара #Название товара#, #актикул#” />
    3. <img src=”Путь к изображению” alt=”#Название товара#, #актикул# – #название сайта# ” />

Естественно, речь идет о шаблоне, т.к. заполнять теги вручную равно потере времени и сил.

Пример 3. Для фотографий одного товара с разными цветами:

Оптимальный вариант – добавление переменной цвета:

<img src="Путь к изображению" alt="#Название товара#, цвет #тут название цвета# #актикул#" />

Если же цвет уже есть в название товара, к примеру:
ALT и TITLE атрибуты: оптимизируем картинки

Это делать не нужно.

Также, нужно обратить внимание на пример от Google:
ALT и TITLE атрибуты: оптимизируем картинки

7. Как проверить отображение ALT атрибута

Как посмотреть ALT и TITLE атрибуты на сайте? Есть 2 простых способа это сделать:

Способ 1. Через браузер

Вы можете отключить отображение картинок на всех сайтах в своем браузере, чтобы увидеть как будут отображаться нерабочие картинки на вашем сайте. 

Как это сделать:

  1. Перейдите в настройки
    ALT и TITLE атрибуты: оптимизируем картинки
  2. Нажмите Дополнительно
    ALT и TITLE атрибуты: оптимизируем картинки
  3. Выберите пункт:
    ALT и TITLE атрибуты: оптимизируем картинки
  4. Далее п. Картинки
    ALT и TITLE атрибуты: оптимизируем картинки
  5. Уберите галочку (для всех сайтов) или добавьте конкретный сайт
    ALT и TITLE атрибуты: оптимизируем картинки

Способ 2. Через программный код

Нажмите правой кнопкой миши на изображение – далее посмотреть код:
ALT и TITLE атрибуты: оптимизируем картинки

8. Ответы на частые вопросы

Alt и TITLE – это описание изображение?
Нет. ALT – это альтернативное описание картинки. Title  – это дополнительная подсказка. Google не рекомендует делать длинные атрибуты. 

Могут ли Alt и Title дублировать друг друга?
Дублирование содержания допустимо.
Согласоно комментариями Джона Мюллера (Google) – при дублирование атрибутом это безусловно будет считаться дубликатом, но в этом нет никакой проблемы.
ALT и TITLE атрибуты: оптимизируем картинки
Яндекс рекомендует делать TITLE уникальным (но ничего не указывает, относительно дублирования содержания атрибута ALT и TITLE):
ALT и TITLE атрибуты: оптимизируем картинки

Но в других источниках можно встретить, что дублирование допустимо:
ALT и TITLE атрибуты: оптимизируем картинки

Многие крупные магазины используют формат повторения H1, пример:
ALT и TITLE атрибуты: оптимизируем картинки

Обязательно ли заполнять атрибуты Alt и Title для картинок?
Что говорит Яндекс:
ALT и TITLE атрибуты: оптимизируем картинки
ALT и TITLE атрибуты: оптимизируем картинки

Что говорит Google:
ALT и TITLE атрибуты: оптимизируем картинки
Объективно, поисковые системы рекомендуют заполнять атрибуты. На практике, основным тегом атрибутом ALT, тайтл удобно использовать как дополнение для юзабилити. Поэтому, если вам нужен трафик из поиска по картинкам и у вас отсутствует альт – у вас будут трудности.

Писать с большой буквы или маленькой?
Это не имеет значения.

На каком языке заполнять атрибуты Alt и TITLE?
На том языке, на котром сайт. Если ваш сайт на русском языке – заполните атрибуты на русском.

Где обычно заполняются атрибуты Alt и TITLE?
Как правило, это делается с помочью системы управления контентом (CMS). Поэтому, все зависит от возможностей админки.

Какой ALT и TITLE должен быть у логотипа сайта
Исключительно название компании. 

Через CMS:
К примеру, в WordPress есть предустановленное поле при загрузке изображения:
ALT и TITLE атрибуты: оптимизируем картинки

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

<іmg srс="Путь к картинке">

Атрибуты:
alt=”Альтернативное описание” title=”Дополнительная информация”

И привести к виду:

<іmg srс="Путь к картинке" alt="Описание" title="Подсказка">

9. Заключение 

Работа с оптимизацией атрибутов ALT и TITLE стоит внимания, почему:

  • Атрибут ALT учитывается поисковыми системами при ранжирование картинок, заполняя Альты – вы оптимизируете изображения для поиска. Более того, по содержимому ALT сайт ищется в поиске;
  • Атрибут ALT действительно полезен пользователю, у которого отключены изображения;
  • Атрибут TITLE полезен пользователю как подсказка по содержанию изображения, что может положительно отражаться на поведенческих факторах сайта.

Также вам может быть полезна статья по оптимизации и продвижению изображений: Продвижение и оптимизация картинок: 8 обязательных шагов

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
CEO/founder агентства Advermedia.ua, опыт в SEO более 10 лет. Телеграм: @profseoua