Оптимизация: оптимизация ALT и TITLE в IMG

Назначение ALT и TITLE картинки

Несмотря на то, что использование при оптимизации изображения TITLE и ALT - это простой способ поднять позиции сайта в поисковых системах, многие веб-мастера не в полной мере применяют эти атрибуты, а то вовсе игнорируют. Некоторые их путают и не понимают, какая разница между TITLE и ALT. Следует отметить, что частенько TITLE и ALT по ошибке именуют тегами, хотя это атрибуты тега IMG (от слова "image"), а не отдельные тэги.

Назначение атрибутов ALT, TITLE и LONGDESC в теге IMG

HTML тег IMG нужен для отображения на странице картинок в графическом формате GIF, JPEG или PNG. Этот тег имеет строго обязательный параметр SRC, которым задается адрес файла с изображением. Если требуется, то картинку можно сделать гипер-ссылкой, поместив тег IMG в контейнер A. При этом вокруг рисунка появится рамка, которая убирается добавивлением параметра BORDER="0" в тег IMG.

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

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

Есть еще один атрибут графики, который предположительно может пригодиться для раскрутки картинок с веб-сайта - это атрибут LONGDESC, предназначенный для ссылки на "длинное" описания изображения. Он соединяет короткий альтернативный текст с длинным описанием на отдельной странице. При его использовании здесь указывается URL страницы, содержащей релевантный по отношению к атрибуту ALT контент.

Другие полезные для продвижения рисунка параметры

Рисунок, помещаемый на страницу сайта, можно окаймить рамкой различной ширины. Для этого применяется параметр BORDER тега IMG. По умолчанию рамка вокруг рисунка не появляется, за исключением тех случаев, когда картинка является гиперссылкой. При этом цвет рамки совпадает с цветом ссылки, заданного с помощью CSS или параметра LINK тега BODY.

Для указания размеров рисунка предусмотрены параметры WIDTH и HEIGHT. Хотя и допускается задавать эти значения в пикселах или процентах, так делать не рекомендуется (см. ниже). Если установлены процентные значения, то размеры картинки определяются по отношению родительского контейнера, в который заключен тег IMG. Если таковой отсутствует, то за него принимается окно браузера. То есть, запись WIDTH="100%" показывает, что изображение будет растянуто по всей ширине страницы. Указание лишь одного параметра HEIGHT или WIDTH сохраняет пропорции картинки. При этом браузер дожидается окончательной загрузки изображения, чтобы узнать его исходную ширину и высоту.

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

Надо ОБЯЗАТЕЛЬНО задавать размеры всех картинок в явном виде! Это ускоряет загрузку веб-страницы, поскольку браузеру не нужно вычислять размер каждого изображения, что можно сделать лишь после его получения. Браузер просто резервирует место под рисунок и продолжает свою работу; картинка же после ее получения встает на отведенное место. Это особенно значимо, если рисунок расположен внутри ячейки таблицы. Тем самым ускоряется загрузка страницы в целом, а это положительно влияет на результаты ее ранжирования в поисковиках.

Использование тега IMG для продвижения по картинкам

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

Оптимизация изображений для раскрутки сайтов: использование TITLE и ALT тега IMG

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

Несмотря на внушительный размер на экране, эта картинка достаточно легкая. Для этого пришлось ее подвергнуть перекомпрессии, чтобы при приемлемом качестве она весила как можно меньше. Это один из первых пунктов, что должен сделать оптимизатор при работе с графикой. Сохранить рисунок целесообразно с таким именем файла, которое содержит ключевые слова (для русского языка - на транслите). Про что эта статья? При использование тега IMG и его атрибутов для поисковой раскрутки картинок. Вот примерно так и надо назвать графический файл: "seo-raskrutka-image-img-alt-title-width-border.jpg". И положить его в директорию, имя которой также говорило бы поисковику, что в ней собраны картинки не про белок или отдых в Турции, а про SEO-продвижение и раскрутку сайтов. Так и назовем ее, по важнейшему ключевику этого проекта: "raskrutka". Путь к графическому файлу предпочтительнее указывать абсолютным, то есть, от корня домена.

Минимально-достаточный формат IMG для корректного показа рисунков.

Для корректного отображения рисунка минимально-достаточный формат тега IMG такой (обратите внимание, как правильно пишется закрывающая часть тега для Image!):
<img src="http://com-seo.ru/raskrutka/seo-raskrutka-image-img-alt-title-width-border.jpg" alt="" />

Однако для раскрутки картинок в поисковиках он бесполезен. Несмотря на понятный пользователям смысл рисунка и подпись в графике, поисковый робот не сможет узнать, что на нем изображено и написано. Давайте ему поможем! Для этого достаточно прописать поле ALT. Но как? Это зависит от геометрического размера изображения: чем больше картинка - тем длиннее допустима к ней описание как в ALT, так и в TITLE. Экспериментально установлено: поисковики нормально относятся к тексту такой длины, если он полностью умещается под рисунком примерно этим шрифтом, как в примере. Поскольку аттрибут TITLE тоже имеет значение для поискового продвижения изображений, уместно заполнить и его, но не прямой копией ALT, а измененным текстом, также содержащим важные ключевые слова.

Оптимальный с точки зрения SEO-продвижения HTML код для картинки.

Памятуя также, что мы говорили раньше про поля WIDTH и HEIGHT, составим ОПТИМАЛЬНЫЙ с точки зрения SEO формат картинки в HTML:
<img src="http://com-seo.ru/raskrutka/seo-raskrutka-image-img-alt-title-width-border.jpg" title="Оптимизация и раскрутка рисунков IMG: TITLE, ALT, WIDTH, HEIGHT, BORDER" alt="SEO-оптимизация изображений для раскрутки сайтов: использование TITLE и ALT тега IMG" width="640" height="480" border="0" />

Одна маленькая, но крайне эффективная хитрость при оптимизации рисунков: поисковики большое внимание придают текстовому окружению изображения, и в первую очередь тому, что написано непосредственно под ним, воспринимая это как подпись к картинке. Для этого подпись должна стоять в том же абзаце "P", ячейке таблицы "TD" или теге "DIV", что и графическое изображение. Подпись лучше делать ТОЧНОЙ КОПИЕЙ атрибута ALT (проверено на практике). В данном примере текст подписи отделен от рисунка тегом BR, и все это заключено в DIV для красивого расположения на странице (смотрите код страницы).

Избыточный вариант HTML-кода для изображения (аттрибут LONGDESC).

Любители поэксприментировать могут указать атрибут LONGDESC, о смысле которого говорили раньше. Однако я не заметил, чтобы он приносил какую-либо пользу для продвижения по рисункам. Поэтому, с учетом главной концепции поисковой СЕО-оптимизации "Что не полезно - то вредно", этот вариант нельзя считать оптимальным. Вот HTML-код примера применения атрибута LONGDESC:
<img src="http://com-seo.ru/raskrutka/seo-raskrutka-image-img-alt-title-width-border.jpg" title="Оптимизация и раскрутка рисунков IMG: TITLE, ALT, WIDTH, HEIGHT, BORDER" alt="SEO-оптимизация изображений для раскрутки сайтов: использование TITLE и ALT тега IMG" longdesc="http://com-seo.ru/seo-prodvidenie-kartinka-image-foto-grafika-photo.html" width="640" height="480" border="0" />

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

Применение изображений в качестве графической ссылки на страницы.

Помимо текстовых гипер-ссылок, бывают еще и графические, у которых вместо анкора стрит изображение. В этом случае аттрибут ALT имеет первостепенное значение: по нему поисковики определяют, по каким словам передавать вес с донора на акцептор. Графические ссылки имеют чрезвычайно широкое применение - например, в качестве кнопок 88 на 31. Считается, что для поискового продвижения графическая ссылка уступает текстовой. Логика поисковых систем понятна: в текстовой ссылке пользователь может прочитать анкор и решить, надо ему туда переходить, или нет, а графическую он может не заметить вообще, сччитая, что это просто картинка. Например, если бы я сейчас не написал, что картинка в следующей главе - это ссылка, очень немногие бы догадались кликнуть по ней, чтобы посмотреть, что там лежит за страница.

Оптимальный с точки зрения поисковой оптимизации и раскрутки формат графических ссылок выглядит таким образом (это точный HTML-код картинки-ссылки из следующей главы):
<a href="http://com-seo.ru/slova-markery-prodvizhenie-kartinok-image-slovo-marker.html" title="Слово-маркер при продвижении картинки"><img class="uimg" src="http://com-seo.ru/raskrutka/image-title-alt-slovo-marker-kartinka.jpg" title="Применение слов-маркеров для продвижения по картинкам" alt="Слова-маркеры и SEO-продвижение картинок" width="250" height="190" border="0" align="left" /><a>

Слова-маркеры и особые случаи ранжирования по фото

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

Для некоторых сочетаний "поисковый запрос - класс изображения" существует возможность продемонстрировать свой рисунок прямо в основной выдаче. Для каждой темы это надо проверять экспериментальное, и если показ картинки в главном SERP'е практикуется поисковиком - то включать в адрес, ALT, TITLE и окружение картинки СЛОВО-МАРКЕР. Что такое слова-маркеры и как пользоваться маркером для раскрутки рисунков? Посмотрите статью "Слова-маркеры и продвижение картинок" (именно на эту страницу ведет графическая ссылка слева), и не забывайте о маркерах, если по тематике сайта это целесообразно.

К сожалению, такой показ бывает возможен лишь примерно для 10% картинок, но пробовать стоит: вдруг сайт как раз той тематики, которая входит в эти проценты? Например, о животных. В этом случае по запросу вида "фото _вид_животного_" такой показ почти наверняка будет и в Яндексе, и в Гугле. А статистика поисковых запросов показывает, что пользователи ищут изображения не только с помощью специального поиска в картинках. Часто люди начинают поиск фото и графики в стандартной выдаче поисковой машины. Все эти особенности поведения картинок в поиске можно использовать для продвижения следующим образом:

• узнайте, что чаще всего ищут со словами "фото", "фотографии", "рисунок", "картинка", "изображение", "иллюстрация", "графика" по тематике Вашего сайта
• проверьте, не осуществляется ли показ по комбинациям "слово-маркер + Ваш ключевик" в основной части выдачи
• установите, не происходит ли такое по другим важнейшим ключевым фразам сайта; например, в статье по ссылке слова-маркеры разбираются на примере поискового запроса "дизайн квартир"
• если такое происходит, то отнеситесь к оптимизации графики самым серьезным образом, поскольку ее задача - взять ТОР-3, никак не меньше, чтоы оказаться среди "избранных"; как это сделать - есть в статье о словах-маркерах по графической ссылке
• в общем случаее найдите, оптимизируйте и разместите на сайте графические изображения или фото в формате JPG, которые хотите предложить пользователям в ответ на их поисковые запросы
• при ранжировании страниц самая важная часть - это заголово TITLE для страниц (не путать с одноименным атрибутом для рисунков и ссылок!). Поэтому используйте ключевые слова из заголока страницы в атрибутах тега IMG
• расположите поблизости с фото его текстовое описание (подпись): поисковые роботы обращают внимание на окружение картинок. Об особенностях верстки для этого мы говорили раньше.
• показывайте все изображения и фотографии ТОЛЬКО со своего домена! Долго, да и не нужно объяснять, чем хуже это делать с бесплатных хранилищ файлов или чужих сайтов
• по возможности ставьте графические ссылки, в анкоры которых включены теги IMG Ваших фотографий; замечено, что публикация графики на форумах редко вызывает нарекания - а ведь это ПРЯМАЯ ссылка на Вас! Разумеется, в этом случае графический рисунок должен быть интересен форумчанам, очень хорошо подходит юмор в картинках

Все это увеличит шансы рисунка на лучшее ранжирование в результатах поиска. В заключении скажу очевидную вещь, о которой почему-то мало кто задумывается. Обычно говорят о продвижении по картинкам и раскрутке сайта по контенту, как будто они никак не связаны. Ну как же, ведь выдача совершенно разная... А вот связаны! Мы перед этим говорили, как текстовый контент страницы влияет на ранжирование картинок с нее; а теперь представьте, что обратное утверждение тоже верно. Ведь даже ребенок знает, что сказка с картинками интереснее не-иллюстрированной; неужели современные поисковые системы не догадываются, что пользователям интереснее на страницах, где есть иллюстрации к тексту?! Еще как догадываются, и потому ранжируют такие страницы в обычном web-поиске выше. Например, на этой странице есть приличных размеров фотография плюс графическая ссылка на релевантную страницу - поэтому при прочих равных условиях шанс попасть в ТОП по текстовому поиску у нее выше, чем у такой же страницы, но без рисунков или фото.