8 812 565 65 51 (8:00 - 20:00)

8 812 565 65 51 (8:00 - 20:00)

Вернуться

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

Оглавление

Зачем картинке тег Alt? Правила составления Alt и Title для картинок Зачем изображению тег Title? Правила составления Title для картинок Примеры тегов Alt и Title для изображений Типичные ошибки в написании Alt и Title

Картинки выложены на каждом веб-сайте. Некоторые интернет-площадки почти целиком состоят из картинок — например, каталоги и магазины. Когда пользователь видит фото, он быстрее оценивает продукт и начинает подумывать о покупке. В статье мы расскажем, что такое атрибуты Alt и Title для картинок, какое отношение они имеют к посещаемости сайта и как именно приводят людей из Яндекс и Google.

Зачем картинке тег Alt?

Alt — текст, заключенный внутри «картиночного» html-тега. Если скорость интернета низкая, и изображение не загружается, или ссылка на него не работает, пользователь видит содержимое атрибута Alt.

Прописанные атрибуты Alt для изображений выглядят так:

Зачем картинке тег Alt?

Незагруженная картинка без текста в теге Alt выглядит так:

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

Например, у посетителя сайта компании, которая продает оборудование для стоматологических кабинетов, не загрузилось фото агрегата. Если веб-мастер написал в Alt и Title для тега слова «Sirona Teneo Стоматологическая установка», пользователь, увидит вместо незагрузившейся картинки это:

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

Атрибут Alt кратко объясняет пользователю, что сфотографировано или нарисовано на картинке, которую не получается загрузить. Текст этого атрибута видят Яндекс и Google, когда индексируют сайты. Еще пользователи ищут фото и рисунки по тексту в теге через поисковые системы.

Правила составления Alt и Title для картинок

  1. Сжато сформулируйте смысл изображения в трех—пяти словах. Проследите, чтобы длина тега не превышала 75—80 букв, цифр и символов.
  2. Впишите в тег ключевую фразу или слово. Это важно!
  3. Не склоняйте ключи, чтобы пользователи быстрее находили картинку через поисковики.
  4. Не спамьте. Для успешного поиска достаточно одного ключевого слова или фразы.
  5. Следите, чтобы тег Alt был связан по смыслу с текстом на странице, которую иллюстрирует картинка.

Зачем изображению тег Title?

Веб-мастера прописывают тег Title, чтобы указать вспомогательные данные о файле с изображением. Посетитель сайта видит их как подсказку, которая всплывает при наведении курсора на картинку. Выглядит это так:

Зачем изображению тег Title?

Прописанный тег выглядит вот так:

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

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

Правила составления Title для картинок

  1. Содержимое тега должно соответствовать тому, что изображено. Исключите из него лишнюю информацию.
  2. Делайте Title коротким или средним по длине. Подсказки-простыни неудобно читать.
  3. Пользуйтесь ключевыми словами и фразами. Избегайте слов «фотография» и «картинка», так как это очевидно и без пояснения.

Примеры тегов Alt и Title для изображений

В качестве примера продолжим тему со стоматологией и возьмем из поисковика вот такую картинку:

Примеры тегов Alt и Title для изображений

Когда мы будем писать Alt, сделаем упор на то, чем торгует или что предлагает владелец сайта. Для показанного выше изображения подойдет фраза «Реминерализация эмали зубов». Словосочетания «зубная эмаль» будет недостаточно для составления представления о картинке. А вот тег Title может выглядеть как «Реминерализация зубов».

Типичные ошибки в написании Alt и Title

1. Группа картинок с одним и тем же продуктом Что делать интернет-магазинам, которые любят постить несколько фото одной и той же позиции в каталоге, чтобы развлечь пользователей? Например, они могут прописать одинаковые теги Alt и Title ко всем картинкам.

2. Один продукт разного цвета Если товары отличаются между собой только по цвету, цвета стоит прописывать в тегах к картинкам. Например, если у пользователя не загрузилось фото красных брюк, ему можно показать Alt «мужские красные брюки», а если не загрузились точно такие же брюки синего цвета — тег «мужские синие брюки».

3. Огромный перечень товаров Эта проблема знакома веб-мастерам маркетплейсов. В каталоге представлены десятки тысяч позиций вместе с большим количеством картинок. Для ручного вбивания тегов к ним может понадобиться несколько лет. В такой ситуации стоит автоматизировать выгрузку тегов из наименования товара или тега H1.

Типичные ошибки в написании Alt и Title

Грамотно составленные атрибуты Alt и Title к веб-изображениям поспособствуют поисковой оптимизации интернет-магазина или другого интернет-проекта. Кроме атрибутов имеет значение также «вес» картинок, их разрешение и название.

Вам может быть интересно

Свяжитесь
с нами

DiscoDance

Москва, Северный административный округ, ул. 8 Марта, 1с12

Оставьте
заявку

*обязательные поля для заполнения