Атрибуты ALT и TITLE для картинок: че за хреновина такая

альт

Всего одно слово, а сколько разных значений — скрипичный инструмент, тип голоса, барабан, кнопка на клавиатуре, html тег. Да, сегодня я расскажу про атрибут ALT img (и заодно тег title) для картинок, хотя мне интересней было бы про смычковый инструмент почитать.

Начнемс…

Атрибут Alt является альтернативным источником информации о картинке (от этого и называется alt=alternate). Если картинки отключены или медленный интернет (они не успевают прогрузиться), то показывается тег альт в виде текста.

Вот пример: картинка отображается, альта не видно.

картинка про дом

А вот пример: картинка НЕ отображается, но зато отображается альт.

тег альт

Синтаксис html описания изображений

</head>
<body>
<img src=”image.jpg” alt=”Описание картинки image” />
</body>
</html>

В теге <img> размещают описание изображения. В примере показаны необходимые атрибуты для <img> .

Зачем он еще нужен?

Сейчас поисковики хорошо анализируют уникальность картинок, а распознавать их тематику до конца не способны. Поэтому лучше заполнять альт, чтобы дать понять ПС о чем фото.

Еще Яша и Гоша имеют специальные сервисы «Картинки». Там тоже работают алгоритмы поиска, люди ищут фотографии и переходят на сайты, это дополнительный источник трафика.

А поиск в этих «Картинках» осуществляется через тег ALT, который является одним из факторов ранжирования в поиске по изображениям и у яндекса и у гугла.

А еще альт помогает слепым и слабовидящим пользователям при поиске. Специальные программы, которые читают текст с экрана, идентифицируют и озвучивают альты картинок.

Еще очень полезно: как оптимизировать страницы

Эксперимент, как Alt влияет на SEO

Несколько лет назад сеошник Андрей Левчук провел эксперимент, чтобы понять, что для поисковиков важнее: размещение ключей в Alt или в самом контенте. А также влияние оптимизированных описаниями картинок на SEO-продвижение.

Результаты показали, что для Гугла размещение ключей в контенте важнее, чем их нахождение в альте.

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

Что по яндексу

Вот этот скрин все объясняет:

яндекс про альты

Яша прямо указывает, что альт играет важную роль.

Еще Яков пишет, какие факторы кроме альта влияют на поиск по картинкам.

альт для яндекса

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

Советы по созданию альтов для изображений

Самая значимая информация в Альте картинок заполняется в соответствии со следующим принципом:

простой, незамысловатый текст имеет большую эффективность.

Нужно посмотреть на изображение, а затем несколькими словами написать в теге то, что есть на картинке.

Сейчас я приведу пример с конкретной картинкой и способами создания для нее описаний. Это фото из карточки товара интернет магазина игрушек.

негритенок на машинке

Первый вариант. Можно написать так: «Мальчик Оуэн и машинка Краш, купить дешево мальчика Оуэна и машинку Краша, мальчик Оуэн и машинка Краш Москва». Подобный Альт будет для поисковиков спамом. Такие описания лучше не создавать.

Второй вариант. Тег заполняем следующим образом: «Фотография № 1» или «Картинка 1». Это описание для поисковых систем и пользователей бесполезно.

Яндекс отрицательно воспринимает такие альты. Фотографии, не имеющие содержательные описания в индекс не включаются, ведь по релевантным запросам их найти невозможно.

Третий вариант. Указываем в Alt: «Чернокожий мальчик на машинке». Это описание соответствует тому, что находится на картинке. Но такой текст подходит для информационников, а не для интернет-магазинов.

Четвертый вариант. Альт может содержать такой текст: «Игрушка мальчик и машинка». Этот способ актуален для магазинов, но детских игрушек мальчик и машинка много, поэтому название продукции лучше уточнять.

Пятый вариант. Пишем в Alt: «Детская игрушка мальчик Оуэн и машинка Краш». Такое описание окажется самым оптимальным, потому что в описании есть бренд товара.

Если производитель предлагает несколько видов игрушек, то в тексте стоит указывать материал, цвет продукции, либо другие характеристики.

В сухом остатке

Требования к заполнению альта:

  • Высокие показатели уникальности. Все изображения должны сопровождаться описаниями, которые отличаются от текста, размещенного для прочих картинок.
  • Нужно прописывать подходящие ключевики. Это актуально, когда ключи могут точно описать изображение. Ключевые слова должны быть понятными для людей и органично вписанными в текст. Не рекомендуется размещать в описании много ключевиков, ведь тогда можно получить обратный результат.
  • Релевантность. Альт обязан описывать содержание фотографии и соответствовать контексту.
  • Тег должен иметь небольшой объем. Его оптимальный размер до 250 збп.
  • Для русскоязычных ресурсов лучше прописывать Alt кириллицей.
  • Альты допустимо заполнять с большой и маленькой буквы.

Если модификация одного и того же товара

Во многих магазинах есть схожие товары, которые изображены с различных ракурсов. Как отличить их, если все описания должны быть уникальными?

К примеру, имеется несколько фото Айфона X. Для них допустимо создать такие Альты:

Айфон X вид1.

Айфон X вид2.

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

Айфон X золотистый.

Айфон X красный.

Пользователи в запросах могут указывать требующиеся для них параметры товара — категорию, расцветку, модель, название производителя и так далее. Поэтому лучше уточнять картинку товара до вот таких деталей.

Упомяну еще про название файла картинки — имя должно сочетаться с описанием изображения. Лучше создавать картинки транслитом, вставляя дефисы на место пробелов.

К примеру, при загрузке на ресурс фотографий белого Айфона, можно назвать файл «Iphone-x-white.jpg». Но это совсем не критичное требование.

Если тысячи картинок

Бывают ситуации, когда на сайте тысячи картинок с пустыми alt, например, фото товаров в интернет магазине.

А заполнить альт нужно.

В этом случае я делаю так:

Даю ТЗ программисту, чтобы сделал правило для всех фото alt = h1 товара.

Так получается очень быстро заполнить все пустые альты, которых тысячи.

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

Вот такой способ. Пользуйтесь.

Теперь про title

Кроме альта можно заполнять и title. Он включает дополнительные сведения об изображении, когда курсор наводится на него.

Попробуйте, наведите курсор на эту картинку и увидите тайтл.

отображение тайтла картинки

Если правильно составить текст, то это положительно влияет на поведение пользователей — тайтл позволяет увеличить конверсию.

Размещая в теге соответствующий призыв, можно эффективно мотивировать пользователей совершать целевые действия. Например, «заказывайте услуги компании со скидкой 30 процентов».

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

Нерелевантный title вообще лучше не писать.

Как лучше заполнять title:

  • Title должен максимально подходить для картинок.
  • Не нужно размещать в нем текст, который не соответствует изображению.
  • Чтобы пользователям было удобно, лучше сделать тайтл коротким.
  • Можно разместить в title подходящие ключевики.
  • Не нужно писать в нем «картинка», «фотография».

Как прописывать в WordPress

У WordPress есть преимущество — не нужно переключаться на редактор в HTML коде, искать соответствующие атрибуты и изменять их.

После загрузки изображения нужно навести на него курсор, нажать на картинку и появится окно с кнопкой «Карандаш».

кнопка карандаш

Затем всплывает отдельное окошко, в котором прописывают альт и title.

параметры изображения

Вопросы и ответы

Далее приведу ответы на некоторые вопросы, касающиеся Title и Альта

  • Альт является описанием к картинке?

Частично. Альт считается альтернативным описанием, выводимым вместо изображения, когда оно не отображается у пользователей.

  • Создавать теги Title и Альт нужно в обязательном порядке?

Чтобы получать трафик из поиска по изображениям, потребуется заполнить Alt.

  • Title и Альт следует заполнять одинаково или по-разному?

По данному вопросу есть 2 противоположных мнения:

  1. Делать теги одинаковыми.
  2. Делать теги уникальными.

Ресурсы, картинки которых занимают верхние позиции в выдаче, используют оба способа.

  • Стоит ли создавать возле тега Альт еще и Title?

Можно, но эта процедура не является обязательной. Хотя обычно Title позволяет точнее понять, что демонстрирует изображение. А это положительно влияет на поведенческие факторы.

  • В Альте необходимо прописывать те же ключевики, что и в контенте, либо вставлять другие?

Тут главное, чтобы содержание имело смысл, а не являлось набором посторонних слов.

  • Нужны ли в тегах ключи?

Если ключевики точно описывают изображение, то можно.

  • Заполнять Альт стоит латиницей или кириллицей?

Для русскоязычных порталов подходит кириллица.

  • Прописывать атрибуты следует с какой буквы?

Это не имеет принципиального значения.

  • Когда поисковые системы уже проиндексировали статью, нужно ли добавить описания?

Конечно. При переиндексации все будет учтено.

Что имеем в итоге

Я очень советую всем заполнять тег Alt обязательно.

Тег title можно не заполнять.

Если понравилась статья, то поддержите репостами, комментами, вопросами и так далее. Я буду рад любой обратной связи!

И посмотрите еще подробное видео по альтам:

Сергей Моховиков
SEO специалист

Здравствуйте! Я специалист по продвижению сайтов в поисковых системах Яндекс и Google. Веду свой блог и канал на YouTube, где рассказываю самые эффективные технологии раскрутки сайтов, которые применяю сам в своей работе.

Вы можете заказать у меня следующие услуги:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...
Закладка Постоянная ссылка.

5
Отправить ответ

avatar
3 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
СергейЮлияНатальяАндрей Recent comment authors
  Subscribe  
newest oldest most voted
Андрей
Гость
Андрей

Alt всегда заполняли, к тому же все фотки на сайти уникальные. И несмотря на то, что он простой по картинкам продвинулся в поиске офигенно.

Наталья
Гость
Наталья

Добрый день. У меня. как у начинающего веб-дизайнера возник вопрос. Каким образом использовать Альт, например в лендинге, если делаешь и дизайн, и заполняешь контент? Или это относится только в верстальщикам?

Юлия
Гость
Юлия

Добрый день. Вы советуете «Заполнять Альт стоит латиницей или кириллицей?
Для русскоязычных порталов подходит кириллица.» А для title что лучше использовать?