Тег alt для картинок


Привет, народ. Дабы не тратить ваше время, давайте коротко и по делу.

Title картинки – это надпись, которая всплывает при наведении курсора на изображение. Это нужно, чтобы дать подсказку посетителю. Рассказать, что изображено на картинке или куда обратить внимание.

 

пример заполнения title картинки

 

Alt картинки – от английского слова alternative. Это такая полезная вещь, которую очень любят индексировать поисковики, дабы определить, что изображено. Также, он будет виден, если пользователь отключит в браузере отображение картинок. Что не имеет смысла и совершается в редких случаях.

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

 

Alt и title картинки для SEO


Для SEO тайтл картинки имеет минимальное значение. Он индексируется не охотно, но вот может сыграть вам на руку в поведенческих факторах. На дворе 2018 год, seo сейчас — это юзабилити и качественный контент. Поэтому привлекайте внимания пользователя любым способом.

Даже сами подумайте, приятней же когда появляется всплывающая подсказка у изображения.

А вот alt картинки — это клад. Во-первых, его отсутствие GoogleBot считает ошибкой, Яндекс относится лояльней.  Во-вторых, он охотно индексируется, а такое изображение попадает в раздел «Картинки» в поиске. Это значит, что таким способом вы сможете привлекать дополнительный трафик на свой сайт.

 

пример работы alt картинки

 

В-третьих, так как он индексируется, то есть возможность с его помощью увеличивать значение страницы. Будет хорошо, если вы пропишете в  alt лишний низкочастотный запрос. Но тут нужно быть внимательным.

 

Как правильно заполнять alt и title для картинок

C title все намного проще. Для поисковика правил нет, но это не значит, что вы пишите тут любую ересь. Выше мы делали подводку к поведенческим факторам. Желательно вам не надоедать пользователю, быть ему полезным.


1) Он не должен быть длинным. Согласитесь, подсказка в 4 строки будет вызывать отторжение.

2) Должен как-то относиться к изображению.

3) Не должен дублироваться с основным title, заголовками h1-h5, с атрибутами alt.

 

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

1) Одного слова не достаточно, желательно держаться в рамках от 3 слов. Максимальное число символов 250.

2) Он должен соответствовать содержимому изображения.

3) Категорически не стоит перечислять в нем ключевые запросы как в key words.

4) Желательно, не должен повторяться с другими alt на странице.

Так что, добавляя очередную картинку в блог, подумайте. Может какой-то человек захочет её найти? Попробуйте превратить его в лишний трафик.

 

студиябрендов.рф

Что такое атрибут Alt?

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

В HTML-коде атрибут прописывается следующим образом:

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

Рассмотрим на примере.


Пример изображения с alt

Для примера я взял фото с сайта обоев для рабочего стола. Основной контент страницы – изображения.

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

Как выглядит alt при отключенных картинках

С его помощью мы понимаем, что находится на странице. Кроме того, этот атрибут полезен не только пользователю, он также помогает понять поисковому роботу, что изображено на картинке. И Google, и Яндекс используют Alt как один из критериев ранжирования при поиске по картинкам.

Появляется следующий вопрос: что же нужно добавлять в Alt, чтобы он был максимально полезным и для пользователя, и для поисковика?

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

Что понять, как правильно заполнить атрибут Alt, рассмотрим следующий пример: у нас есть интернет-магазин зоотоваров, и мы хотим прописать Alt для карточки товара с «мячиком для собак».


Пример товара: мячик для собак

Есть несколько вариантов заполнения атрибута:

Вариант 1. В качестве альтернативного текста используем «Фото №1», «Картинка 1» и т. д. Такой альтернативный текст не несёт никакой пользы, так как не даёт информации об изображении. Более того, как пишет Яндекс: «Картинки, у которых отсутствуют содержательные описания, не попадают в поиск, так как не могут быть найдены по запросам». Подробнее: «Индексирование картинок».

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

Вариант 3. Alt «Мячик для собак» – этот вариант нам больше подходит, но, так как мячиков в магазине может быть много, лучше уточнить запрос.

Вариант 4. Alt «Мячик для собак Humunga Chomp» – этот вариант оптимален для нас. Атрибут содержит название товара и его производителя. Если такого товара много, можно расширить Alt, используя цвет, название модели.

Вариант 5. Alt «Мячик для собак Humunga Chomp, игрушка Humunga Chomp, купить, недорого, Москва» – такой вариант может быть воспринят поисковой системой как спам и нужного результата не принесёт.

Из этих примеров следует, что атрибут Alt:

  • должен быть содержательным и описывать картинку;
  • состоять из 3–5 слов, но не больше 250 символов (сложно описать картинку двумя словами);
  • по возможности содержать ключевой запрос;
  • не должен быть спамным.

Зачем нужен атрибут Title?

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

Как выглядит атрибут title

На картинке выше видно, как отображается атрибут на странице.

В HTML-коде атрибут прописывается следующим образом:

<img title="Текст, который будет выводиться при наведении" src="Путь к картинке" />.

Если картинка будет ссылкой, Яндекс рекомендует указывать Title в ссылке:

<a title=" Текст, который будет выводиться при наведении " href="Ссылка"><img src="Путь к картинке" /></a>

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

Основные требования к Title похожи на требования к Alt:

  • должен быть содержательным и описывать изображение;
  • состоять из 3–5 слов, но не больше 250 символов;
  • не должен быть слишком большим, так как при наведении текст в 3–4 строчки может отпугнуть;
  • по возможности содержать ключевой запрос;
  • не должен быть спамным.

Зная это, перейдём к вопросам.

Ответы на популярные вопросы по Alt и Title

Alt это описания к изображениям?

Не совсем. Alt – это альтернативное описание, которое будет выводиться вместо картинки, если у пользователя не отображаются изображения.

Обязательно ли заполнять атрибуты Alt и Title для картинок?

Если Вас интересует трафик из поиска по картинкам, Alt обязательно нужно заполнять, Title – по желанию.

Alt и Title должны быть разными или одинаковыми?

Существует два основных мнения по этому поводу:

1) Alt и Title должны быть уникальными;

2) атрибуты должны быть одинаковыми.

Если  посмотреть, как заполняют эти атрибуты сайты, изображения которых находятся в ТОПе поиска по картинкам, увидим оба варианта заполнения.

Яндекс по этому поводу пишет следующее:

Ответ Платона по одинаковым alt и title

Я считаю, что эти атрибуты могут быть одинаковыми. Главное, чтобы они давали чёткое структурированное описание вашей картинке.


Нужно ли прописывать возле атрибута Alt ещё и Title?

Необязательно, но учтите: атрибут Title в некоторых случаях помогает лучше понять, что изображено на картинке. Это может положительно отразиться на поведенческих показателях сайта.

В Alt картинки надо ставить те же ключевые слова, что и у статьи, или другие?

Желательно. Главное, чтобы Alt был содержательным и описывал картинку.

Нужно ли прописывать в этих атрибутах ключевые слова?

Если эти ключевые слова будут описывать картинку, то да.

Как правильно писать атрибут Alt: кириллицей или латиницей?

Если ваш сайт на русском, заполняйте кириллицей.

Как писать – с большой или маленькой буквы?

Не имеет значения.

А если статья уже проиндексирована поисковиками, можно внести описание в картинки или не стоит?

Можно. Когда поисковики переиндексируют вашу страницу, они учтут эти описания.

Где заполнять Alt и Title?

Всё зависит от того, на какой CMS сделан ваш сайт.

Если это чистый HTML, то:

<img src="Путь к картинке" alt="Альтернативное описание" title="Дополнительная информация">

Обычно поля для заполнения Alt и Title находятся в параметрах изображения. Например, если ваш сайт сделан на WordPress, открыв параметры изображения, вы увидите поле для заполнения атрибута Alt. В дополнительных настройках есть поле для атрибута Title.


Где заполнять alt и title в WordPress

Если же ваш сайт на 1С-Битрикс, в дополнительных настройках параметров изображения есть поле для атрибута Alt. Атрибут Title будет подтягиваться из поля «Заголовок».

Где заполнять alt и title в 1С-Битрикс

Нужно понимать, что всё индивидуально. Многое зависит от того, на какой CMS сделан ваш сайт и как настроен.

Стоит ли и возможно ли прописывать Alt и Title для своих картинок в комментариях?

Не вижу в этом необходимости, да и вряд ли у кого-то в комментариях есть возможность оптимизировать изображения.

Когда к картинкам пишу тайтл и альт на русском, на сайте высвечиваются иероглифы, что делать?

Такое происходит из-за кодировки. Нужно преобразовать текущую кодировку в UTF-8.

Итоги

Ещё раз пробежимся по тому, какими же должны быть Alt и Title.

Основные требования к атрибуту Alt:

  • содержательный, описывает изображение;
  • длиной около 3–5 слов (до 250 символов);
  • по возможности должен включать ключевой запрос;
  • не должен быть спамным.

Почему стоит заполнять Alt:

1. учитывается поисковыми системами при ранжировании картинок, а значит, если ваша картинка попадёт в ТОП, – это источник дополнительного трафика;

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

Атрибут Title:

  • содержательный и описывает изображение;
  • длиной около 3–5 слов или до 250 символов;
  • по возможности должен содержать ключевой запрос;
  • без спама.

Почему стоит заполнять Title:

1. будет полезен пользователю, которому сложно разобраться, что изображено на картинке;
2. подсказки Title могут положительно отразиться на поведенческих показателях сайта.

Рекомендую к ознакомлению:

Информация по картинкам от Google

Какие тексты использует робот для поиска изображений

siteclinic.ru

Как правильно заполнять title и alt изображений?

Сначала скажу пару слов об этих атрибутах. Зачем они нужны?

Основная задача — дать поисковым системам понять, о чем то или иное изображение. Также эти параметры позволяют попасть изображениям в поиск по картинкам по определенным запросам, которые мы и пропишем в данных атрибутах.

Теперь рассмотрим, как же нужно заполнять их.

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

Сначала разберем, что это за атрибуты.


  • Title — во всех случаях это тег заголовка чего-либо (заголовка записи, изображений и так далее);
  • Alt — атрибут тега img itemprop=»image», который описывает изображение. Еще называется «альтернативный текст».

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

На практике, если просмотреть код изображения на сайте, title и alt выглядят следующим образом.

«>

Видим, что эти атрибуты находятся в коде во 2й строке. Им заданы определенные значения, а точнее те фразы или слова, которые описывают содержимое картинки. Именно содержимое картинки, а не ключевые слова и еще что-то.

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

Можно также вписать и ключевое слово, по которому продвигается статья, но сильно с этим не играйтесь. Я прописываю максимум к одному изображению в статье — к главной первой миниатюре.

Будет очень хорошо, если ваша картинка будет окружена тематическим текстом, который также ее описывает. Но опять же, все должно быть понятно посетителю и не восприниматься, как какая-то манипуляция. Все делаем естественно. Если тематический текст не имеет места быть возле картинки, то просто пропишите title и alt к изображению и все.

Title и alt должны быть одинаковы?

И снова куча мнений. Кто-то говорит, что должно быть различие, а кто-то — лучше эффект, когда одинаковые. Я же больше склоняюсь верить каким-то фактам. Для этого я взял пару очень успешных ресурсов и посмотрел, как прописываются данные атрибуты у них.

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

Поэтому, следующий вывод — атрибуты title и alt можно делать одинаковыми.

Но, это не 100% догма. Можете сделать их немного отличными, но чтобы смысл не терялся от этого. И тайтл и альт должны описывать изображение. К тому же title может вообще отсутствовать (ошибки в этом нет) и содержать иную информацию кроме описания самой картинки. Более подробно о грамотном заполнении альта и тайтла я написал тут. По предыдущей ссылке я копнул глубже в вопросе заполнение данных тегов. Очень советую проштудировать материал.

Как практически прописать атрибуты к изображению

Если вы используете какой-нибудь движок, то в нем предусмотрена такая функция. Вероятнее всего, что у вас сайт на WordPress. В нем все делается очень просто.

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

«>

Во всплывающем окне задаются параметры изображения, в том числе прописываются title и alt.

«>

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

Если же у вас сайт не управляется никакой платформой, то есть простая html страница, то придется добавлять руками.

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

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

Смотрите на него, как на образец, куда необходимо вставлять атрибуты, которые копируете из этого же кода. Затем прибавляете их к своим картинкам, заполнив при этом свое описание.

Не забываем, что заполняем эти данные, исходя из содержимого картинки. Описываем само изображение!

С этим вопросом разобрались. Тут все предельно ясно.

Вкратце вывод таков: «title и alt заполняем одинаковыми и прописываем в них описание самого изображения, то есть того, что изображено на картинке».

Данный вопрос мы рассмотрели. Но тема оптимизации изображений многогранна и есть еще другие важные моменты, используя которые, можно улучшить эффект своего сайта.

Другие важные моменты

Имеется еще 3 вещи, которые я не рассмотрел выше:

  • название файла изображения;
  • уменьшение веса изображений;
  • уникальность картинок для сайта.

Сейчас я рассмотрю только 1й момент, так как под остальные 2 я выделил полноценные объемные материалы.

Про название файла мало кто пишет в интернете. Но тут также имеются свои нюансы. Как нужно называть сам файл, перед загрузкой его на сайт?

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

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

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

В пример покажу изображение из предыдущий статьи моего блога про создание формы подписки на обновления сайта. Возьму следующую картинку.

«>

Код изображения имеет вид.

Отсюда можно увидеть название изображения, которое называется точно также, как и заголовок с альтом, только уже не русскими буквами, а в транслитерации — forma-podpiski-v-sajdabre.jpg

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

Чтобы получить такое же название в транслитерации, я пользуюсь отличным сервисом Translit.net. Просто вбивает свою фразу в поле и жмем на кнопку «в транслит».

«>

Получим готовое название для файла.

«>

Так мы и называем загружаемый файл на сайт. Затем прописываем ему все необходимые данные и на этом процесс закончен.

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

На этом данный пост я заканчиваю.

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

Всем хорошего дня!

С уважением, Константин Хмелев.

Тег alt для картинок

kostyakhmelev.ru

Атрибуты ALT и TITLE тега IMG

 

Несмотря на то, что использование при оптимизации изображений атрибутов title и alt — это простой способ поднять позиции сайта в поисковых системах, многие вебмастера не в полной мере применяют их, а то и вовсе игнорируют. Некоторые их путают и не понимают, какая разница между title и alt. Следует отметить, что частенько title и alt по ошибке именуют тегами, хотя это атрибуты тега img (от слова “image”), а не отдельные теги.

HTML тег img применяют для отображения на страницах сайта изображений (картинок) в графическом формате GIF, JPEG или PNG. При необходимости, картинку можно сделать гипер-ссылкой, заключив тег img в контейнер <a>. Атрибут alt передает описание изображения для браузеров при отключенной графике. Если данный атрибут не будет прописан, то пользователи увидят пустую икону вместо изображения, а если alt прописан, то будет показано его текстовое содержание. Атрибут alt сильнее всего влияет на ранжирование изображений поисковиками.  

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

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

Поисковые системы учитывают не весь текст, заключенный в атрибут alt: Google, к примеру, показывает только первые  15-17 слов, а Яндекс чуть больше – до 28 слов. В любом случае, этого количества слов вполне достаточно, чтобы составить вразумительный контекст.

Поисковые системы акцентируют основное внимание на тексте, относящемся к изображению. Особенно к тому, что написано непосредственно под ним, воспринимая этот текст как название изображения. Поэтому, название должно полностью копировать содержание соответствующего атрибута alt и его следует  размещать в том же абзаце <p>, ячейке таблицы <td> или теге <div>, что и картинка.

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

 

vsemproblemam.net

Как подписывать изображения

Какие общие принципы подписей изображений можно выделить из приведенного выше примера?

— Краткое и правдивое описание изображения.

Если описание фото не будет совпадать с его содержимым, то это изображение просто не получит кликов из поиска. Отсюда, автоматически созданные подписи в ALT необходимо перепроверить.

— Длина не менее 3-4 слов и не более 250 символов.

Меньше чем 3 словами сложно описать товар, вставив все необходимые ключевые слова. А на счет верхней границы, судя по данным экспериментов, сейчас поисковики не берут из альта больше чем 250-255 символов.

— Наличие важных ключевых слов.

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

— Отсутствие спама.

Переоптимизированные и заспамленные альты могут стать причиной наложения санкций, как от Яндекса, так и от Google. Поэтому, не надо вставлять в ALT все нужные вам ключевые слова, ограничивайтесь самыми необходимыми и наиболее точно описывающими изображение. Также не нужно добавлять в альты слова “купить”, “отзывы” или “цена” (если это конечно не скриншот отзывов или прайса), но можно использовать слово “фото”.

— Пустые альты для декоративных изображений.

Если какие-то картинки на сайте являются частью дизайна – логотипы, кнопочки и стрелочки, а также другие декорации, для них лучше использовать пустые теги ALT. Некоторые умудряются и сюда вставлять ключевики, но это бесполезно. Оптимальным решением будет вообще вынести подобные изображения в CSS-спрайты.

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

Несколько фотографий одного и того же товара

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

Пример нескольких изображений одного и того же товара на карточке

Как поступать с подписью в таком случае? Самый простой вариант – оставить одно и то же описание для всех фото. Это нормальный и часто используемый случай. Поисковику важней уникальность самих фото, и понятно, что на фотографиях карточки товара скорей всего изображено одно и то же, то есть, описывать подробней смысла нет. Разве что добавить к основному тексту: “вид 1”, “вид 2” и так далее.

Как пример, попробуйте поискать модель телескопа, изображеную выше: результаты в Google, результаты в Яндексе. Несмотря на одинаковые подписи ALT на самом сайте Штурмана, в поиске можно найти разные изображения с одной и той же карточки товара.

Много похожих товаров

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

Пример изображений одинакового типа в блоке рекомендаций

Как поступить с описаниями изображений в этом случае? Как и в предыдущем пункте, здесь можно использовать один и тот же ALT, например, “Юбка джинсовая детская”, так как тут сложно описать картинку подробней. Google и Яндекс уже будут показывать разные фото с одного сайта с учетом их уникальности и общего числа хороших фоток в сети на эту тему (конкуренции). Для названий/заголовков стоит тратить время, чтобы сделать их уникальными для каждой юбки, добавить бренд, цвет, наличие каких-то фишек или другие характеристики, но для тега ALT в данном случае это не так важно.

Категории vs карточка товара

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

Здесь аналогичная ситуация, ALT картинки в категории можно оставлять таким же (так чаще всего делает большинство интернет-магазинов), как и на карточке товара. А уже в зависимости от запроса, поисковик покажет наиболее релевантный документ.

Например, по запросу “шапка huppa” Google в поиске по изображениям выведет желтого мальчика с ссылкой на категорию сайта /huppa. Но если мы добавим в запрос название модели “шапка huppa bros”, то отобразиться тот же мальчик, но уже с ссылкой на более релевантную запросу страницу карточки товара /huppa-vyazanaya-shapka-bros-8337-047.

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

Атрибут ALT для тега IMG играет большую роль в поиске по изображениям, как в Google, так и в Яндексе. А помогает ли он для ранжирования в обычных органических результатах поиска? Судя по данным проведенных экспериментов, Google использует ALT как обычный текст, и если вы здесь используете уникальные ключевые слова, то по ним также будет находиться документ с картинкой. Что касается Яндекса, этот атрибут игнорируется при органическом поиске.

Другими словами, оптимизация альтов не повлияет на трафик из органики в Яндексе (разве что косвенно), но может повлиять на веб-трафик из Google.

А что на счет тайтла?

Атрибут изображения TITLE учитывается только Яндексом при поиске по изображениям (исходя из того же эксперимента), и нигде не учитывается гуглом. Его лучше использовать для юзабилити, чем для подписей изображений, так как написать туда что-то отличное от ALT будет сложно, если на сайте имеются тысячи картинок. Другими словами, я бы рекомендовал либо не использовать title=”“, либо дублировать его вместе с alt=”“, или же заморочиться и прописать уникальные тайтлы для изображений, отличные от альтов, но также красиво, коротко и емко описывающие фотки, но на мой взгляд последний вариант это лишнее.

А какие описания ALT используете вы?

devaka.ru

Что такое атрибут Alt для картинок

Атрибут Alt для картинок – это текст, описывающий изображение в html-теге <img>. Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).

атрибут Alt для картинок

Давайте сравним. Так будет выглядеть незагруженное изображение без заполненного атрибута Alt:

не заполненный Alt тега img

А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега <img>:

заполненный Alt тега img

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

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

  1. Оптимальное количество слов – 3-5, но длина текста тега не более 75-80 символов. Мы рекомендуем использовать краткую и сжатую, но содержательную информацию.
  2. Обязательное условие – использование ключевых запросов.
  3. Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
  4. Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
  5. Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.

Атрибут Title для изображений

Кроме атрибута Alt следует также прописывать текст в атрибуте Title. Данный параметр задает вспомогательную информацию о картинке, когда пользователь наводит курсор на изображение:

Атрибут Title для картинок

В html-коде заполненный атрибут Title для картинок выглядит так:

Заполненный атрибут Title для картинок

Правильно составленный атрибут Title даже помогает улучшить поведенческие факторы.

Как правильно составлять Title для картинок

  1. Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
  2. Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке.
  3. Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.

Пример правильного заполнения атрибутов Alt и Title для тега <img>

Рассмотрим на примере, как можно прописать текст в атрибутах Alt и Title для картинки. Для этого возьмем изображение с сайта строительной компании.

Пример правильного заполнения Alt и Title

При составлении Alt необходимо сделать акцент на то, что вы продаете/предлагаете. Для картинки из нашего примера будет предпочтительнее составить альт «Строительство дома из бревна», а не просто «дом» или «строительство».

Атрибут Title для данного изображения можно немного видоизменить и составить так: «Строительство бревенчатого дома».

1ps.ru

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

  • Фотографии Товаров
  • Фотографии каталога

Атрибут ALT – это альтернативный текст, который отображает браузер, если по тем или иным причинам он не может загрузить картинку (если картинка была удалена с сервера или у посетителя отключен показ изображений в браузере). Поисковые боты пока не научились "читать" изображения, но благодаря альту вы сможете подсказать роботу, что это за картинка, какое у нее название и что на ней написано (см.рис.1)

Атрибут ALT – это альтернативный текст, который отображает браузер, если по тем или иным причинам он не может загрузить картинку
Рисунок 1.

Что значат атрибуты Alt для изображений в аспекте SEO оптимизации? Благодаря данным тегам мы даём понять поисковому роботу с помощью текста, какая графическая информация содержится на странице.

Как указать alt к фотографии товара

Для того чтобы указать атрибут alt для фотографии товара нужно перейти в панели администрирования пункт меню "Каталог — Категории и товары".

Открываем товар, для фотографий которого будет указывать атрибут.

Далее, в карточке товара переходим на вкладку Фотографии и нажимаем на карандаш для редактирования (см.рис.2)

Как указать alt к фотографии товара
Рисунок 2.

В открывшемся окне, поле “Описание (alt)” (рис.3)

В открывшемся окне, поле “Описание (alt)”
Рисунок 3.

Это и есть атрибут alt для фотографии товара. Редактирование данного поля возможно только через панель администрирования в карточке товара, загрузить массово alt тег через импорт данных (csv, xml) возможности нет.

В атрибуте alt следует писать не все ключевые слова сайта или страницы, а лишь те, которые действительно относятся к картинке. Например, в нашем случае, "Apple iPhone 6 black". Это поможет роботу точнее найти картинку, а пользователю поисковой системы— выбрать ее в результатах поиска и перейти на ваш сайт.

Кроме того, данное Детальное описание отвечает также и за тег title самого изображения. Атрибут title отображается при наведении курсора мыши на фотографию. В случае, если title у фотографии не прописан, то по умолчанию в атрибут title подставляется название товара (рис. 4)

В случае, если title у фотографии не прописан, то по умолчанию в атрибут title подставляется название товара
Рисунок 4.

Как указать alt к фотографии категории

Как указать alt к фотографии категории
Рисунок 5.

Как указать alt к фотографии категории
Рисунок 6.

Для фотографии каталога (изображение, мини картинки) alt тег поставляется из названия категории (рис.7)

Для фотографии каталога (изображение, мини картинки) alt тег поставляется из названия категории
Рисунок 7.

Если требуется для товара или категории прописать alt тег для фотографии, которые Вы размещаете в редакторе самостоятельно, необходимо перейти в режим "источник", найти код фотографии и самостоятельно прописать alt тег (рис.8).

Необходимо перейти в режим "источник", найти код фотографии и самостоятельно прописать alt тег
Рисунок 8.

Всё готово.

www.advantshop.net

Оптимизация кода

прописать атрибут ALT

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

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

Что такое атрибут ALT?

Начнем с самого начала: опишем, о чем в этой статье идет речь и зачем нам вообще нужен этот атрибут.

атрибут ALT

Итак, для понимания данного текста в первую очередь необходимо разбираться в языке разметки HTML. Это — код, на котором пишутся базовые веб-страницы, который, как уже было отмечено, имеет свойство отображаться в браузере. Весь язык состоит из специальных атрибутов (например, IMG, ALT, FONT и так далее). Каждый из них отвечает за работу с тем или иным элементом дизайна. На практике применяется упомянутый выше атрибут ALT для картинок, которые можно встретить на страницах сайтов. Если говорить конкретнее, то с его помощью создается описание к картинкам, по которым пользователь (посетитель сайта) может легко и просто разобраться в том, что же на них показано. Наверняка вы и сами сталкивались с такими описаниями — они возникают при наведении мышки на картинку.

Практическое значение

Разумеется, эти атрибуты применяются на практике не просто так. Вебмастерам нужны описания их изображений не меньше, чем самим посетителям сайта (а скорее всего, даже больше). Ведь если у всех изображений отсутствует атрибут ALT, человек может этого даже и не заметить, если к картинкам на странице будут прибавлены пояснительные тексты. С другой стороны, поисковые роботы (при пустом ALT) могут недостаточно высоко оценить сайт, снизить его позицию в выдаче и, таким образом, не принесут достаточного количества посетителей. Поэтому мы можем с уверенностью сказать, что описания к картинкам на сайте также играют важную роль и для самих вебмастеров, поэтому нельзя ими пренебрегать.

у всех видимых изображений отсутствует атрибут ALT

Бонусы от поисковиков

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

Как прописать атрибут ALT?

как добавить атрибут ALT для картинок

Технически нет ничего сложного в том, чтобы заполнить под той или иной картинкой описание. Это очевидно: нужно зайти в HTML-редактор на своем сайте и найти код изображения (начинается с IMG и заканчивается им же). Внутри этого блока кода есть код. Именно его и имеют в виду, когда говорят, что нужно прописать атрибут ALT. Делается это так: “alt = “описание”.

атрибут ALT для картинок

Если вы работаете не с чистым кодом, а используете какой-то отдельный “движок” для сайта (например, WordPress или Joomla), — в нем интегрирован особый механизм добавления “альтов”, через которые наш сайт и запомнится поисковикам. Если вы заполняете новый ALT, обновление оказывается на вашей странице.

Что пишут в атрибуте?

Разумеется, когда у вас возникает задача прописать атрибут ALT, вы думаете не о технической стороне. Чаще всего этот вопрос задается в том случае, если вебмастер не знает, какую информацию ему нужно указывать о том или ином изображении. Из-за этого сложно сказать, какие сведения пойдут сайту на пользу с точки зрения поисковых механизмов.

На практике есть множество подходов к решению проблемы описания. Кто-то работает с типичными шаблонами, согласно которым тег просто заполняется ключевыми словами, под которые создается страница. Пожалуй, это наиболее распространенная практика, которую можно встретить часто. Иногда вместо того, чтобы искать, как прописать атрибут ALT, пользователь попросту оставляет это место пустым. Тут следует уточнить, что каждый самостоятельно принимает решения относительно того, какое описание указывать.

отсутствует атрибут ALT

Требования

Вместе с тем можно выделить несколько основных правил (или, если хотите, требований), по которым каждый может сложить идеальный атрибут для своих картинок. Они состоят из небольшого количества пунктов, каждый из которых относится к описаниям фото и картинок на сайте.

Например, первое такое требование — это длина всего текста. Если вы ищете, как правильно прописать атрибут ALT, решение элементарно: используйте не больше 2-3 слов. Текст такого размера будет, во-первых, идеально считываться поисковым роботом (и делать ваш сайт более релавантным); во-вторых, такое описание более понятно самим пользователям. Согласитесь, читать целое предложение, если вы хотите просто знать, что показано на картинке, никто не будет. Достаточно кратко и точно изложить описание, что будет полезно как вам, так и клиентам.

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

Еще один важный момент (который был установлен в ходе многочисленных практичных испытаний) — это уникальность. Если ищете, как прописать атрибут ALT к картинке, помните: его нужно подбирать уникальным для каждой из перечисленных фотографий на сайте. Например, публиковать три картинки подряд с подписью “мой слон” будет неправильно — это только навредит вашему ресурсу в поисковой выдаче. Лучше назвать изображения “слон 1” и “слон 2”, что сделает их более уникальными.

как правильно прописать атрибут ALT

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

Поиск ALT

Наконец, мы поговорили об основах атрибута, о некоторых правилах его составления и требованиях обеих сторон (как пользователей, так и поисковых роботов) к ним. Теперь подумаем: так как же искать ключевые слова и фразы, которые мы будем прописывать на своем сайте? Как уже отмечалось выше, поиск нужно направлять в сторону готовых баз ключевых слов, которыми реально начать привлечение клиентов на ваш сайт. Разумеется, этого не добиться, если у вас все же отсутствует атрибут ALT. Берите в готовом виде ключевые слова и фразы, которые применяете в контенте, и вставляйте в картинки.

Если таких сведений у вас нет и вы совсем не думали над тем, чтобы начать понемногу раскручивать свой ресурс, предлагаем начать искать базы таких “ключевиков”, с которыми вы сможете легко создавать новые сайты. Для этого отлично подойдут сервисы вроде Google Keyword Extract Tool или Yandex.Wordstat, где показана статистика поиска по тем или иным фразам. “Играя” с этими настройками, можно существенно расширить долю поискового трафика на своих сайтах и тем самым начать извлекать новую выгоду. Главное, чтобы не возникло ситуации, в которой у всех видимых изображений отсутствует атрибут ALT.

Выводы

Итак, что можем сказать об описанном в этой статье атрибуте? Он является частью языка, на котором создаются простейшие сайты — HTML. Делать это очень просто, поскольку описывается элементарный, базовый язык. Для того чтобы все-таки прописать тег в картинках, необходимо самостоятельно оформить его через исходный код. Или же, воспользовавшись новой инструкцией, начать оформлять заново. Как бы там ни было, а указание тегов ALT — это тот идеальный случай взаимной выгоды, когда остаются довольными и посетитель, и владелец ресурса.

Указание тега может привести и новых посетителей — особенно часто такое явление наблюдается на таких сервисах, как Google и Yandex Images. При клике на картинку сайт самостоятельно определяет источник, с которого было взято изображение, и перенаправляет посетителя. А это, как вы понимаете, очень важно уметь делать в будущем.

fb.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.