Поисковая оптимизация картинок: разница атрибутов ALT и Title

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

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

Для начала стоит отметить, что очень часто ALT и Title ошибочно называют тегами (сама неоднократно делала эту ошибку до недавнего времени). На самом деле это атрибуты тега <img >, а не отдельные теги.

Атрибут ALT

Согласно рекомендациям W3C, атрибут ALT:

  • задает альтернативный текст, описание картинки для браузеров, которые по той или иной причине не могут отобразить картинки (например, если пользователь отключил показ изображений)
  • является обязательным элементом для изображений
  • используется только с тегом img

Согласно Аарону Уоллу (Aaron Wall) ALT крайне важно использовать для баннера в “шапке” сайта.

При отсутствии текста ALT пользователь увидит просто пустую иконку, а если текст прописан, то пользователь видит этот текст:
Использование ALT атрибута на картинках для поисковой оптимизации

HTML код картинки в этом случае будет выглядеть следующим образом:

<img src=”http://www.shebta.com/wp-content/alt-text.jpg” alt=”Использование ALT атрибута для картинок”>

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

При написании текста ALT старайтесь придерживаться следующих правил:

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

Атрибут Title

Атрибут Title предоставляет дополнительную информацию об изображении. Текст этого атрибута также всплывает в большинстве браузеров при наведении мышкой на картинку.
Пример оптимизации картинки с атрибутом titleTitle также полезен для некоторых браузеров, которые не поддерживают атрибут ALT (например, текстовый браузер Lynx). HTML код картинки с атрибутами ALT и Title будет выглядеть следующим образом:

<img src=”http://www.shebta.com/wp-content/alt-text.jpg” alt=”Использование ALT атрибута для картинок” title=”Пример отображения картинки с атрибутом ALT и без него”>

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

Выводы и рекомендации

  • Рекомендуется указывать оба атрибута ALT и Title, хотя текст ALT гораздо более важен для поисковиков
  • Описание атрибутов ALT и Title должно соответствовать теме текста
  • Тексты ALT и Title должны быть разными для каждой картинки
  • Большое значение особенно для Google играет текст, окружающий изображение. Поэтому стоит не забыть обратить внимание на ключевые слова, которые вы используете рядом с картинкой.

Для блог-платформы WordPress оптимизацию изображении значительно облегчит плагин SEO Friendly Images. С его помощью атрибуты ALT и Title будут добавлены к каждой картинке автоматически. Необходимо, правда, убедиться, что в установках текст этих атрибутов для одного изображения будет всегда разный.

Видео: Мэт Каттс о важности использования атрибута ALT (на англ. языке)

Фото: Flickr/Martine Roch

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

Тэги:

15/05/2009 · Категория: Поисковая Оптимизация

Артур June 1, 2009 at 18:06

Спасибо за представленную информацию.

leko November 29, 2010 at 11:26

А вот такой вопрос:

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

Сканируют ли это поисковики, есть ли в этом смысл и какие параметры стоит прописывать, а какие нет?

Нури January 31, 2011 at 13:13

а как включить оба атрибута? у меня в Опере пишет “у всех изображении отсутствует атрибут ALT” . Как включить? пожалуйста можно ответ на е-mail. Ну или хотяб уведомление, что мне ответили =)

Оксана February 4, 2011 at 16:55

Как мне включить атрибут? У меня тоже в опере пишет “у всех видимых изображений неверен или отсутствует атрибут ALT. А я к ней уже привыкла. Помогите пожалуйста. Напишите на e-mail если не сложно. Спасибо.

Наташа February 22, 2011 at 12:37

У меня тоже в опере пишет “у всех видимых изображений неверен или отсутствует атрибут ALT”. Из-за этого не могу зайти в интернет через оперу. Напишите пожалуйста на e-mail что в таких случаях нужно делать. Заранее огромное спасибо за помощь :-)

сергей March 5, 2011 at 13:47

Вы не поверите у меня токая-же проблема с оперой пишет “у всех видимых изображений неверен или отсутствует атрибут ALT”. Из-за этого не могу зайти в интернет через оперу. Напишите пожалуйста на e-mail что в таких случаях нужно делать. Заранее огромное спасибо за помощь…

Луиза March 29, 2011 at 18:11

Помогите, пожалуйста!! У меня такая же проблема: в опере пишет “у всех видимых изображений неверен или отсутствует атрибут ALT”! Как мне это убрать?? Жду ответа на мой e-mail! Заранее спасибо!!!

yakoflef March 29, 2011 at 18:22

Столкнулся с такой же проблемой. Решение:
Удаляем Opera через удаление программ.
* папку установки “Оперы”, которая по умолчанию располагается в [системный раздел]:\Program Files\Opera\, если вы, разумеется, не указали другой путь при инсталляции программы;
* папка персональных настроек пользователя “Оперы” (или профиль), путь к которой обычно такой: [системный раздел]:\Documents and Settings\[пользователь]\Application Data\Opera\Opera\profile\ (напомню, что папка Application Data является скрытой). ОБЯЗАТЕЛЬНО
Вычищаем оттуда всё, что касается Opera
Ставим всё по новой.
Скрытая папка: панель управления/папки/вид/показывать скрытые папки/ок

Михаил April 26, 2011 at 11:02

спасибо, статья интересная

Влад June 20, 2011 at 11:21

Господа, проблема решается так.
Заходите в меню “Вид”, далее – “Стиль” и убираете галочку с поля “Отладка ALT”. Проверено на Opera 10.62
А если меню другое,как в Opera 11.11, при нажатии на “меню” Вы не видите кнопку “вид”, поставьте галочку напротив предпоследнего пункта “показать меню”, после этого у Вас наверху появится кнопка “вид”. Далее следуйте установкам указанным выше.

Светлан August 26, 2011 at 10:20

Влад, Спасибо за помощь. Вы умница и желаю Вам удачи.

Валентина August 28, 2011 at 09:28

У меня тоже в опере пишет “у всех видимых изображений неверен или отсутствует атрибут ALT”. Из-за этого не могу зайти в интернет через оперу. Напишите пожалуйста на e-mail что в таких случаях нужно делать. Заранее огромное спасибо за помощь

1 September 29, 2011 at 21:21

Влад огромное спасибо!!!!!!!!!

Антон October 12, 2011 at 01:11

Была проблема с ALT в Опере, совет про галачку помог. Огромное спасибо. А каковы причины такой ошибки?

Aleks October 27, 2011 at 13:07

Благодарен вашим советам. пересмотрев свой сайт и сделав корекцию на основании Вашей полезной статьи смог улучшить свои результаты в выдаче

Василий Алибабаевич October 30, 2011 at 04:43

у себя на сайте тоже сделал Атрибуты alt и title в стандартный bbcode [img] для TorrentPier
http://rustrek.ru/viewtopic.php?t=9318

Elena November 25, 2011 at 22:32

Спасибо большое за статью! Уже дописываю все Altы)!
Только подскажите, пожалуйста, на каком языке их заполнять для рунета? Я их прописала на английском? А теперь думаю, может надо было на русском)?

Твитти March 27, 2012 at 23:47

Спасибо за тему…. И огромное спасибо за подсказку с Оперой))

Юрий July 5, 2012 at 12:24

Подскажите, пожалуйста, а можно как-то сделать так чтобы не выводилась стандартная пустая иконка если нет изображения? Что бы было просто пустое место. И когда прописан alt чтобы возле текста тоже небыло этой иконки, только текст. Может есть какое-то специальное правило CSS? Спасибо.

Марина July 17, 2012 at 15:07

Безусловно полезная статья. Спасибо.

Internov December 25, 2012 at 00:53

@Elena. Язык то не вопрос, раз сайт на русском значит и картинки на русскком. Вопрос о кодировке этих аттрибутов. Записал их кириллицей в UTF8 и некоторые СЕО анализаторы пишут, что Алт атрибут пустой. Может он будет не виден и для поисковиков? Лучше ли будет записать эти аттрибуты транслитом?
например, вместо:

записать

Буду благодарен за совет :)

Сергей December 25, 2012 at 19:59

а в яндекс браузере не отображается alt текст((( ответ лучше на e-mail послать) serg52799@yandex.ru

Антон May 29, 2015 at 17:21

Тексты ALT и Title должны быть разными для каждой картинки –
Пример:
– то что alt и title совпадают это ведь норм? Здесь имеется ввиду что у разных картинок не должны совпадать эти атрибуты?

cl-service.com July 12, 2015 at 00:11

Благодаря картинкам можно повысить посещаемость своего ресурса на 5-10%, а оптимизированные ссылки улучшают юзабилити сайта. Каждая поисковая система учитывает эти атрибуты, и их неправильное использование может привести к негативным последствиям, но если вы будете выполнять некоторые правила, то атрибуты ALT и TITLE очень хорошо помогут вам в продвижении ресурса.

Александра July 28, 2015 at 22:49

Переходите на Хром;)
Я вот пытаюсь заниматься оптимизацией и в голове уже полный хаос!! мысли одна на другую Оо(( сейчас решила картинками заняться.. Надеюсь благодаря этой статье хоть здесь всё по полочкам ляжет:) спс автору;)

Александра July 28, 2015 at 22:52

и вопрос кстати.. я с этим плагином ( SEO Friendly Images ) не оч поняла что-то:/ установила и что дальше должно произойти? написано что автоматически должен прописать, а где это видно и прописывается ли или так и остается абра-кадабра? Может что-то доп сделать нужно?? Объясните плиззз!!

Leave a Comment