Всего одно слово, а сколько разных значений — скрипичный инструмент, тип голоса, барабан, кнопка на клавиатуре, html тег. Да, сегодня я расскажу про атрибут ALT img (и заодно тег title) для картинок, хотя мне интересней было бы про смычковый инструмент почитать.
Начнемс…
Атрибут Alt является альтернативным источником информации о картинке (от этого и называется alt=alternate). Если картинки отключены или медленный интернет (они не успевают прогрузиться), то показывается тег альт в виде текста.
Вот пример: картинка отображается, альта не видно.
А вот пример: картинка НЕ отображается, но зато отображается альт.
Содержание:
</head>
<body>
<img src=”image.jpg” alt=”Описание картинки image” />
</body>
</html>
В теге <img> размещают описание изображения. В примере показаны необходимые атрибуты для <img> .
Сейчас поисковики хорошо анализируют уникальность картинок, а распознавать их тематику до конца не способны. Поэтому лучше заполнять альт, чтобы дать понять ПС о чем фото.
Еще Яша и Гоша имеют специальные сервисы «Картинки». Там тоже работают алгоритмы поиска, люди ищут фотографии и переходят на сайты, это дополнительный источник трафика.
А поиск в этих «Картинках» осуществляется через тег ALT, который является одним из факторов ранжирования в поиске по изображениям и у яндекса и у гугла.
А еще альт помогает слепым и слабовидящим пользователям при поиске. Специальные программы, которые читают текст с экрана, идентифицируют и озвучивают альты картинок.
Еще очень полезно: как оптимизировать страницы
Несколько лет назад сеошник Андрей Левчук провел эксперимент, чтобы понять, что для поисковиков важнее: размещение ключей в Alt или в самом контенте. А также влияние оптимизированных описаниями картинок на SEO-продвижение.
Результаты показали, что для Гугла размещение ключей в контенте важнее, чем их нахождение в альте.
Создавать альт для изображений нужно, чтобы привлекать пользователей из поиска по картинкам.
Вот этот скрин все объясняет:
Яша прямо указывает, что альт играет важную роль.
Еще Яков пишет, какие факторы кроме альта влияют на поиск по картинкам.
Когда происходит ранжирование изображений, берется во внимание текст, относящийся к ним. Если описание картинок будет точно соответствовать запросам, то значительно увеличиваются шансы на то, что изображения попадут в начало выдачи.
Самая значимая информация в Альте картинок заполняется в соответствии со следующим принципом:
простой, незамысловатый текст имеет большую эффективность.
Нужно посмотреть на изображение, а затем несколькими словами написать в теге то, что есть на картинке.
Сейчас я приведу пример с конкретной картинкой и способами создания для нее описаний. Это фото из карточки товара интернет магазина игрушек.
Первый вариант. Можно написать так: «Мальчик Оуэн и машинка Краш, купить дешево мальчика Оуэна и машинку Краша, мальчик Оуэн и машинка Краш Москва». Подобный Альт будет для поисковиков спамом. Такие описания лучше не создавать.
Второй вариант. Тег заполняем следующим образом: «Фотография № 1» или «Картинка 1». Это описание для поисковых систем и пользователей бесполезно.
Яндекс отрицательно воспринимает такие альты. Фотографии, не имеющие содержательные описания в индекс не включаются, ведь по релевантным запросам их найти невозможно.
Третий вариант. Указываем в Alt: «Чернокожий мальчик на машинке». Это описание соответствует тому, что находится на картинке. Но такой текст подходит для информационников, а не для интернет-магазинов.
Четвертый вариант. Альт может содержать такой текст: «Игрушка мальчик и машинка». Этот способ актуален для магазинов, но детских игрушек мальчик и машинка много, поэтому название продукции лучше уточнять.
Пятый вариант. Пишем в Alt: «Детская игрушка мальчик Оуэн и машинка Краш». Такое описание окажется самым оптимальным, потому что в описании есть бренд товара.
Если производитель предлагает несколько видов игрушек, то в тексте стоит указывать материал, цвет продукции, либо другие характеристики.
Требования к заполнению альта:
Во многих магазинах есть схожие товары, которые изображены с различных ракурсов. Как отличить их, если все описания должны быть уникальными?
К примеру, имеется несколько фото Айфона X. Для них допустимо создать такие Альты:
Айфон X вид1.
Айфон X вид2.
Если продукты идентичны, но их цвета различны, то ситуация еще проще. В описания можно добавить такую информацию:
Айфон X золотистый.
Айфон X красный.
Пользователи в запросах могут указывать требующиеся для них параметры товара — категорию, расцветку, модель, название производителя и так далее. Поэтому лучше уточнять картинку товара до вот таких деталей.
Упомяну еще про название файла картинки — имя должно сочетаться с описанием изображения. Лучше создавать картинки транслитом, вставляя дефисы на место пробелов.
К примеру, при загрузке на ресурс фотографий белого Айфона, можно назвать файл «Iphone-x-white.jpg». Но это совсем не критичное требование.
Бывают ситуации, когда на сайте тысячи картинок с пустыми alt, например, фото товаров в интернет магазине.
А заполнить альт нужно.
В этом случае я делаю так:
Даю ТЗ программисту, чтобы сделал правило для всех фото alt = h1 товара.
Так получается очень быстро заполнить все пустые альты, которых тысячи.
А затем я прогоняю сайт через Screaming Frog и смотрю, все ли картинки заполнены, если есть дубли, то лучше их заполнить вручную.
Вот такой способ. Пользуйтесь.
Кроме альта можно заполнять и title. Он включает дополнительные сведения об изображении, когда курсор наводится на него.
Попробуйте, наведите курсор на эту картинку и увидите тайтл.
Если правильно составить текст, то это положительно влияет на поведение пользователей — тайтл позволяет увеличить конверсию.
Размещая в теге соответствующий призыв, можно эффективно мотивировать пользователей совершать целевые действия. Например, «заказывайте услуги компании со скидкой 30 процентов».
Title могут увидеть те пользователи, которые работают с ПК. Поэтому при необходимости передать посетителям важные сведения, не следует помещать их в тайтле. Лучше разместить информацию в контенте в виде обычного текста.
Нерелевантный title вообще лучше не писать.
Как лучше заполнять title:
У WordPress есть преимущество — не нужно переключаться на редактор в HTML коде, искать соответствующие атрибуты и изменять их.
После загрузки изображения нужно навести на него курсор, нажать на картинку и появится окно с кнопкой «Карандаш».
Затем всплывает отдельное окошко, в котором прописывают альт и title.
Далее приведу ответы на некоторые вопросы, касающиеся Title и Альта
Частично. Альт считается альтернативным описанием, выводимым вместо изображения, когда оно не отображается у пользователей.
Чтобы получать трафик из поиска по изображениям, потребуется заполнить Alt.
По данному вопросу есть 2 противоположных мнения:
Ресурсы, картинки которых занимают верхние позиции в выдаче, используют оба способа.
Можно, но эта процедура не является обязательной. Хотя обычно Title позволяет точнее понять, что демонстрирует изображение. А это положительно влияет на поведенческие факторы.
Тут главное, чтобы содержание имело смысл, а не являлось набором посторонних слов.
Если ключевики точно описывают изображение, то можно.
Для русскоязычных порталов подходит кириллица.
Это не имеет принципиального значения.
Конечно. При переиндексации все будет учтено.
Я очень советую всем заполнять тег Alt обязательно.
Тег title можно не заполнять.
Если понравилась статья, то поддержите репостами, комментами, вопросами и так далее. Я буду рад любой обратной связи!
И посмотрите еще подробное видео по альтам:
Alt всегда заполняли, к тому же все фотки на сайти уникальные. И несмотря на то, что он простой по картинкам продвинулся в поиске офигенно.
Добрый день. У меня. как у начинающего веб-дизайнера возник вопрос. Каким образом использовать Альт, например в лендинге, если делаешь и дизайн, и заполняешь контент? Или это относится только в верстальщикам?
да а собственно чем отличается ваша ситуация от того что я описал в статье? делайте то же самое что у меня написано и все. какая разница кто будет заполнять — дизайнер или верстальщик, главное чтобы было заполнено.
Добрый день. Вы советуете «Заполнять Альт стоит латиницей или кириллицей?
Для русскоязычных порталов подходит кириллица.» А для title что лучше использовать?
тоже кириллица, русские же на русском читают
Спасибо, очень полезная статья, структурно и четко.