Атрибуты Alt и Title для картинок: искусство составления
Сейчас трудно представить сайты без изображений, тем более интернет-магазины и каталоги товаров. Ведь это отличный способ привлечь внимание посетителей, показать товар «лицом» и сподвигнуть потенциальных клиентов к совершению целевых действий: покупке товара или заказу услуги. Подробнее о том, для чего еще нужны картинки и на каких страницах они должны быть, можете прочитать в нашей статье «Подбор и оптимизация изображений для сайта».
Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или Google к вам на сайт может прийти дополнительный трафик (при корректном использовании атрибутов Alt и Title тега ).
Что такое атрибут Alt для картинок
Давайте сравним. Так будет выглядеть незагруженное изображение без заполненного атрибута Alt:
А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега :
Атрибут Alt дает возможность узнать, что изображено на картинке, когда пользователь не может ее увидеть. Кроме того, прописанный текст в атрибуте Alt учитывается поисковыми роботами при индексации сайта. Наконец, оптимизация названий картинок и атрибутов Alt в теге упрощает поиск изображений, например, в Яндекс или Google Картинках.
Как правильно составить атрибут Alt для картинок
Атрибут Title для изображений
Кроме атрибута Alt следует также прописывать текст в атрибуте Title. Данный параметр задает вспомогательную информацию о картинке, когда пользователь наводит курсор на изображение:
В html-коде заполненный атрибут Title для картинок выглядит так:
Правильно составленный атрибут Title даже помогает улучшить поведенческие факторы.
Как правильно составлять Title для картинок
Пример правильного заполнения атрибутов Alt и Title для тега
Рассмотрим на примере, как можно прописать текст в атрибутах Alt и Title для картинки. Для этого возьмем изображение с сайта строительной компании.
При составлении Alt необходимо сделать акцент на то, что вы продаете/предлагаете. Для картинки из нашего примера будет предпочтительнее составить альт «Строительство дома из бревна», а не просто «дом» или «строительство».
Атрибут Title для данного изображения можно немного видоизменить и составить так: «Строительство бревенчатого дома».
Трудности при заполнении Alt и Title
Несколько фотографий одного и того же товара
Как же быть интернет-магазинам, в которых для разнообразия и удобства пользователей представлено несколько изображений одного и того же товара? В этом случае, нормальное явление – составить одинаковый текст для Alt и Title ко всем картинкам.
Один и тот же товар, но разного цвета
В данном случае можно порекомендовать добавлять название цвета в текст Alt и Title. Например, для платья зеленого цвета можно составить такой Alt: «женское зеленое платье», а для платья красного цвета – «женское красное платье».
Большое количество товаров
Крупные интернет-магазины могут столкнуться со следующей проблемой: на сайте слишком много товаров и изображений для них. Чтобы составить атрибуты Alt и Title для тысячи товаров вручную, потребуется очень много времени. Поэтому, в данном случае, можно автоматизировать вывод этих атрибутов из названия продукции и/или заголовка Н1, а также добавить цвет или артикул товара.
Правильно заполненные атрибуты Alt и Title к картинкам помогут в поисковой оптимизации сайта. Но не стоит забывать и про другие аспекты оптимизации картинок, такие как «вес», качество и название изображений. Если у вас нет времени на составление атрибутов Alt и Title, мы можем помочь вам и выполнить эту работу за вас.
Атрибуты alt и title для изображений: для чего нужны, как заполнить
Альт-теги — это текстовое описание графических элементов на сайте, благодаря которому пользователи и поисковые роботы получают о нем информацию.
Прежде всего такие теги заполняются для тех посетителей, у кого в браузерах отключена загрузка картинок. Так они видят содержимое тега альт и понимают, какая картинка находится в этом месте. Тег title отображается при наведении курсора на фото.
Оформление текста — один из неотъемлемых этапов SEO. Важно, чтобы текст хорошо воспринимался. Поэтому его нужно разбивать на отдельные блоки, выделять цитатами важные моменты, разбавлять картинками и так далее. Приоритет в ранжировании получают те страницы, с содержимым которых особенно хорошо поработали.
Когда поисковые пауки будут переходить между документами, они заметят оптимизированные картинки и поймут, что на них, прочитав содержимое альт тега. Информация будет внесена в индекс, и сайт получит преимущество в ранжировании.
Пример заполненного тега alt в коде веб-документа:
Прописываем alt для картинок
Во всех популярных CMS предусмотрено удобное заполнение тега альт. Например, чтобы прописать тег на Вордпресс достаточно выбрать картинку и нажать «Редактировать», после чего появится форма для его заполнения. 
Другие движки имеют схожий функционал. Иногда используются даже плагины для простановки таких тегов. Чтобы прописать, этот тег вручную, можете ориентироваться на наш пример.
Могут ли атрибуты Alt и Title быть одинаковыми?
В этом плане мнения вебмастеров расходятся. Одни считают, что допустимо только разное содержимое, другие считают, что нет ничего страшного, если оно будет повторяться. Посмотрев на сайты-конкурентов, вы скорей всего обнаружите, что они заполняют эти теги по-разному.
Вот что об этом говорит тех.поддержка Яндекса: 
Выводы
Даже если вы ранее не заполняли теги alt и title и довольны посещаемостью, закрывать глаза на оптимизацию картинок не стоит. С ее помощью вы сможете получить больше трафика на свои ресурсы. Если ключи будут вписаны правильно, в техническом плане не будет вопросов, то добавьте и описание к изображениям, чтобы увеличить количество посетителей.
При ранжировании страниц поисковые системы учитывают и оптимизацию графического содержимого, поэтому у вас есть шанс заработать дополнительный плюсик и получить трафик из поиска по картинкам.
А вы заполняете тег альт? Поделитесь наблюдениями и опытом в комментариях.
Правильные атрибуты alt и title
Содержание:
Атрибуты alt и title в роли помощников по оптимизации
В одной из наших первых статей о внутренней оптимизации веб-сайтов мы вкратце рассказывали, насколько важными могут быть изображения для SEO продвижения. Если копнуть в этой теме немного глубже, первое, с чем придется столкнуться – это атрибуты alt и title.
Именно так будут называться пустые поля параметров, которые увидит контент-менеджер при загрузке изображения на веб-страничку.
Что же из себя представляют атрибуты alt и title? Нужно ли их заполнять? Какова их роль в поисковой оптимизации? Продолжайте читать и Вы получите ответы на перечисленные и некоторые другие не менее важные вопросы.
Атрибут title. Необходимость и основные правила использования
Если честно, атрибут title является далеко не обязательным элементом SEO-оптимизации. Основная цель его использования – давать подсказки пользователям насчет содержимого просматриваемого изображения. При наведении курсора на картинку выводится содержимое атрибута title в белом прямоугольнике.
Несмотря на то, что поисковики не придают особого значения содержимому этого параметра, все же может наблюдаться его некоторое, хоть и косвенное, влияние на продвижение – через поведенческие факторы.
Важность и нюансы заполнения атрибута alt изображений
В отличие от атрибута title, по своей сути ориентированного на посетителей, заполненный атрибут alt у картинок более существенен для поискового продвижения.
Он охотно индексируется ботами поисковиков и используется ими для определения содержимого обнаруженных изображений. А это важно как для улучшения релевантности страничек сайта, так и для привлечения на него дополнительного трафика из «Поиска по картинкам».
Поэтому нужно помнить, что забывая или не желая заполнять атрибут alt изображений, Вы лишаете свой веб-ресурс дополнительных пунктов рейтинга, которые вполне могли бы улучшить его позиции в выдачах поисковиков.
Что касается посетителей сайтов, то они могут увидеть содержимое атрибута alt лишь в нескольких случаях:
В этом случае вместо опубликованных картинок пользователь будет наблюдать стандартную иконку изображения и прописанный в атрибуте alt текст. Отсюда и его название «alt» – сокращенное от «alternative».
Т. е. речь идет об альтернативном варианте (когда стандартный режим отображения не устраивает или по какой-то причине недоступен пользователю), позволяющему все же в общем понять, что было изображено на скрытом в данный момент фото.
Для того чтобы безопасно продвинуться в данном виде поиска нужно при заполнении атрибута alt изображений придерживаться следующих рекомендаций:
Выберите одно, наиболее подходящее, и разбавьте парочкой дополнительных, стараясь сделать так, чтобы его употребление выглядело максимально естественным.
Коротко подведем итоги
Атрибут title:
Заполненный атрибут alt изображений:
Все вышеперечисленные моменты однозначно являются положительными. И поэтому выводы по поводу необходимости заполнения атрибутов alt и title Вы вполне сможете сделать сами.
Благодарим за внимание. Ждем Ваших вопросов под этой статьей.
Как заполнять атрибуты Alt и Title для изображений. Инструкция.
Что такое атрибут Alt у картинок
Alt у изображений – это один из атрибутов тега в html. Он передает текстовую информацию о картинке в случае, когда сама она не отображается на сайте. Например, у пользователя слабый сигнал интернета или отключено отображение картинок в браузере.
Не стоит его путать с названием файла.
Пример кода с заполненным атрибутом Alt:
В стандартной ситуации мы видим изображения на сайте следующим образом:
Если отключить показ картинок, то мы увидим замещающий текст, а именно значения атрибутов Alt, вместо изображений:
Для атрибута Alt существует ряд требований. Он должен:
Ниже приведем примеры заполнения атрибута Alt, чтобы на практике показать, о чем идет речь.
Что такое атрибут Title изображений
Title у изображений – это еще один атрибут тега в html. Он описывает изображение при наведении на него курсора.
Пример кода с заполненным атрибутом Title:
Ниже показано, как отображается атрибут Title при наведении курсора на изображение:
Требования, предъявляемые к атрибутам Title и Alt похожи. Атрибут Title должен:
Яндекс в разделе «Какие тексты использует робот для поиска изображений» советует вебмастерам указывать атрибут Title в ссылке, если картинка является таковой.
Пример показан ниже:
Какие ошибки необходимо избегать при заполнении атрибутов Alt и Title
Ниже приведены самые частые ошибки, которые совершают при заполнении атрибутов Alt и Title.
Несодержательные Alt и Title
При заполнении атрибутов не стоит использовать:
А вот формулировка «виноград белый б/к 300 г в стакане» дает достаточное количество подробностей и при наличии других товаров в разделе «Виноград» и будет легче уникализировать атрибуты для каждой картинки.
Слишком длинные атрибуты Alt и Title
Для атрибута Alt достаточно 3-5 слов. Для атрибута Title допустимо немного больше. Этого количества слов хватит, чтобы передать смысл изображения. А вот, например, длинный атрибут Title, переходящий на вторую строку воспринимается трудно:
Спам в атрибутах Alt и Title
Слишком длинные описания, как правило, содержат в себе еще и спам. Избегать переспама необходимо не только в мета-тегах, H1 и тексте на сайте, но и в описании изображений. Не стоит засорять атрибуты такими фразами, как «Виноград белый 300 г б/к купить в Санкт-Петербурге, цена, недорого, заказать». С большой вероятностью это будет негативно принято поисковыми системами и могут быть наложены санкции в виде пессимизации позиций.
Одинаковые атрибуты для похожих картинок
Не следует использовать одинаковые атрибуты при размещении нескольких изображений для одного товара. Стоит добавить к основному тексту уникальную часть.
Например, «вид сверху», «вид сбоку». Если товар имеет разные цвета, в описании стоит указать цвет. Однако если используется одна и та же картинка, но в разных частях сайта, атрибуты Alt и Title менять не нужно.
Влияют ли атрибуты Alt и Title на ранжирование
Разберемся, насколько важно указывать Alt и Title для изображений.
Ниже приведена информация, взятая из поисковых систем Яндекс и Google.
Проводились исследования на тему, влияют или нет атрибуты Alt и Title на ранжирование в поисковых системах.
Ниже приведены результаты, которые были получены в ходе экспериментов в 2020 году:
| Влияние на ранжирование | Поиск Google | Поиск Google по картинкам | Поиск Яндекс | Поиск Яндекс по картинкам |
| да | да | нет | да | |
| нет | да | нет | да |
Как показывают эксперименты и наша практика, оптимизация изображений может привести дополнительный трафик из поиска по картинкам. Поскольку поисковые системы, а особенно Google, активно развивают сервисы с изображениями, можете быть уверены, что работа будет проделана не зря.
Данные могут измениться, поэтому рекомендуем проводить исследование каждый год.
Как проверить Alt и Title на сайте
Проверить, что указано в атрибутах Alt и Title можно несколькими способами.
Для того, чтобы отключить отображение картинок в браузере, например в Chrome, нужно:
Букмарклет «Теги изображений» за один клик заменит все картинки на указанный для них атрибут Alt.
Автоматические инструменты для проверки атрибутов
Автоматические способы позволяют собрать значение атрибутов Alt, когда это нужно сделать массово.
Screaming Frog SEO Spider – это программа,с помощью которой можно просто и быстро собрать весь список картинок и отдельно выгрузить те, чей атрибут Alt отсутствует или превышает заданное количество символов. Для этого обходим сайт, заходим на вкладку Images. Здесь будут представлены все изображения, чтобы их выгрузить нажимаем пункт в меню Bulk Export – All images. Чтобы посмотреть картинки, например, с незаполненным атрибутом Alt, выбераем пункт «Missing Alt Text».
Картинки также можно выгрузить отдельным отчетом. Для этого выбираем в меню Bulk Export – Images – Images Missing Alt Text Inlinks (или другой пункт в зависимости от того, какой отчет хотим получить).
NetPeak Spider – краулер, который поможет собрать все изображения без атрибута Alt.
В разделе «Параметры» ставим галочку около пункта «Изображения».
Затем запускаем сканирование сайта. Если будут найдены изображения с незаполненным атрибутом Alt, в результатах обхода увидим уведомление о соответствующей ошибке и список картинок.
Как заполнить атрибуты Alt и Title
Заполнить атрибуты Alt и Title можно через свою CMS. Обычно они указываются в окне загрузке или редактирования изображений.
Например, в CMS Bitrix окно выглядит следующим образом:
CMS Joomla подтягивает атрибут Alt из названия файла, так что нужно быть аккуратными.
Как автоматизировать заполнение Alt для интернет-магазинов
Стоит автоматизировать все, что можно, чтобы не тратить время на рутинную работу.
Для большого интернет-магазина, где размещено огромное количество изображений, удобнее всего заполнить атрибут Alt с помощью шаблона.
Необходимо прописать логику, по которой будет создаваться текст, и вместе с разработчиком реализовать автоматическое заполнение атрибута Alt на сайте.
Например, если речь идет о карточках товара, шаблон для атрибута Alt может быть следующим:
Заключение
Оптимизация изображений – это важный, но не первостепенный пункт, на который необходимо обращать внимание при работе с сайтом, исключение составляют сайты галереи, фото и видеохостинги. В любом случае, это может стать дополнительным источником трафика для уже проработанных, зрелых сайтов. Именно поэтому мы призываем уделять должное внимание этой части SEO-продвижения на вашем ресурсе.
Если вам необходима помощь в проведение аудита и исправлению ошибок, наши специалисты готовы оказать квалифицированную помощь, пишите нам.
ALT и TITLE атрибуты: оптимизируем картинки
Блог / ALT и TITLE атрибуты: оптимизируем картинки
Поиск
Категории блога
ALT и TITLE атрибуты: оптимизируем картинки
В данной статье мы подготовили максимально полную инфорацию по оптимизации атрибутов ALT и TITLE картинок на сайте: что это за атрибуты, почему с ними важно работать, как они влияют на ранжирование, и, конечно – примеры.
Содержание статьи:
1. Что такое атрибут ALT
Атрибут Alt – это текстовое описание для изображения внутри HTML тега img src >. Данное описание (тег ALT для изображений) становиться видимым пользователю в случае невозможности загрузки картинки. На месте, где должна быть картинка пользователь увидит данное текстовое описание. Другими словами, ALT артибут – это альтернативный источник информации об изображение для пользователя.
Почему пользователь может не видеть картинку:
Поэтому, если ALT атрибут заполнен, пользователь увидит текстовое описание картинки: 
В HTML-коде атрибут ALT имеет следующею конструкцию:
Почему ALT атрибут важен для заполнения:
2. Правильное заполнение атрибута ALT для картинок
Итак, давайте разберемся как правильно подготовить ALT атрибуты для изображений. Для этого, необходимо разобраться в общих правилах:
3. Частые ошибки при заполнение атрибута ALT
Разберем наиболее частые ошибки и неправильное заполнение атрибута ALT изображения:
Ошибка 1. Отсутствие заполнения:
Важно:
Стоит обратить внимание на инструкцию Яндекса: « Картинки, у которых отсутствуют содержательные описания, не попадают в поиск, так как не могут быть найдены по запросам ».
Ошибка 2. Отсутствие описания содержания изображения:
Ошибка 3. Переспам или перечисление ключевых слов:
4. Что такое атрибут TITLE
Атрибут TITLE – это всплывающая текстовая подсказка, которую пользователь может увидеть, если наведет курсор на картинку. Другими словами – это дополнительная информация о картинке для пользователя.
В HTML-коде атрибут TITLE имеет следующею конструкцию:
Как TITILE видит пользователь: 
Как TITLE выглядит в коде: 
Важно:
Google игнорирует тег TITLE в своих рекомендациях по оптимизации картинок. В свою очередь Яндекс. выводит конкретные рекомендации по его использованию тут :
Дополнительно:
Если картинка будет ссылкой – указываем атрибут для ссылки (рекомендация Яндекса):
5. Правильное заполнение атрибута TITLE
Какие требования для заполнения атрибута TITLE для картинки и как правильно заполнить данные. Объективно, основные требования аналогичны ALT:
6. Практические примеры заполнения ALT и TITLE
Примеры заполнения ALT атрибута:
Пример 1. Для карточек товаров в категории:
Т.к. товаров может быть тысячи, используем шаблон, например:
Где в ## – указаны переменные (такое решение, как правило, внедряется с помощью веб-программиста).
Пример 2. Для фотографий товара на странице товара: 
При этом, на качественной странице товара, как правило, больше 3+ фотографии, поэтому, есть 2 варианта:
Естественно, речь идет о шаблоне, т.к. заполнять теги вручную равно потере времени и сил.
Пример 3. Для фотографий одного товара с разными цветами:
Оптимальный вариант – добавление переменной цвета:
Если же цвет уже есть в название товара, к примеру: 
Это делать не нужно.
Также, нужно обратить внимание на пример от 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 есть предустановленное поле при загрузке изображения:
Вручную:
Если заполнение атрибутов необходимо выполнить вручную через код, вам нужно добавить в код ссылки:
Атрибуты:
alt=”Альтернативное описание” title=”Дополнительная информация”