Элементы ссылки в HTML
Ссылки.
Мы часто говорим о том, почему мы их хотим и как их получить, но сегодня мы обратимся к основам и рассмотрим соответствующий им код HTML. Эта статья рассчитана на начинающего оптимизатора или разработчика, желающего расширить свои познания, но даже опытные маркетологи могут захотеть ознакомиться с нюансами атрибутов этого замечательного тэга.
Вот пара примеров ссылок. Первая ссылка - для сайта Белого дома, вторая - для нового сайта Distilled.
Структура обеих ссылок одна и та же: открывающие тэг <a>, который может содержать множество атрибутов, содержимое ссылки ("кликабельная" часть "текста якоря") и закрывающая часть тэга - </a>.
Ниже я отметил те части ссылки HTML, которые представляют интерес с точки зрения оптимизации под поисковые системы (SEO), пользовательского интерфейса (UI) и ощущений пользователя (UX).
Атрибуты
В тэгах ссылок может быть множество параметров - одни являются обязательными, другие опциональными, а третьи вообще почти никогда не используются. Каждому типу людей интересны свои параметры::
href - 'путь назначения' ссылки (SEO UX)
например: href="http://kolua.ru/archives/413"
Как видно в обоих вышеприведенных примерах, параметр href (видимо, сокращение от 'hypertext reference') является адресом назначения (URL), по которому перейдет пользователь, кликнув по данной ссылке. Kolua.ru рекомендует даже для ссылок внутри того же сайта задавать полные URL, включая http:// и доменное имя ('абсолютные' URL).
В параметре href можно также указать 'mailto:name@example.com', и тогда по этой ссылке будет запущен почтовый клиент пользователя. У меня смешанные чувства относительно данной возможности. Если вы собираетесь ею воспользоваться, то советую четко разъяснить пользователю, что произойдет при нажатии на вашу ссылку (ниже будет пример того, как это можно сделать).
rel - отношение к данной странице той, на которую ведет ссылка (SEO UI UX)
например: rel="nofollow"
В роли оптимизаторов мы, в основном, видим этот параметр установленным в значение 'nofollow' (требование Google для определения оплачиваемых ссылок), но у него есть и другие потенциальные возможности применения. Список допустимых значений этого параметра будет расширен в HTML5, а сейчас он включает в себя 'alternate' (предназначено для указания на зеркала страницы, версии для печати и т.п.) и 'previous' / 'next' (для постраничной навигации; некоторые браузеры могут всегда отображать ссылки 'next' однотипно для облегчения навигации, или заранее загружать следующую страницу для ускорения переходов).
target - окно для открытия ссылки (UX)
например: target="_blank"
Этот атрибут был особенно полезен в те времена, когда сайты строились на основе фреймов. Сейчас он чаще всего установлен в значение '_blank', что дает браузеру указание открыть ссылку в новом окне (сегодня уже чаще в новой вкладке). Я рекомендую этот параметр не использовать, а позволить пользователю самому решать, где открывать ссылки - на текущей вкладке или на новой.
class / id - в основном используются для применения стилей CSS (UI UX)
например: class="menu decorated"
Как и большинству элементов HTML, ссылкам может быть присвоен class или id, что обычно делается для применения к ссылкам стилей CSS. Одно из практичных применений - это добавление к почтовой ссылке значка конвертика, чтобы показать, что при нажатии на ссылку будет запущен почтовый клиент, а не совершен переход на новую страничку.
Особенно полезны для ссылок псевдоклассы CSS :hover и :visited. Они позволяют ссылкам менять стиль, если они уже были посещены, или если на них наведен курсор - это улучшает пользовательский интерфейс и ощущения пользователя.
title - 'подсказка' ссылки (UI UX)
например: title="Узнайте больше о следующем семинаре SEOmoz"
Текс в атрибуте title обычно появляется во всплывающей подсказке при удержании курсора над ссылкой. Это можно использовать для предоставления пользователю дополнительной информации о целевой странице. Опять же, можно использовать его и для пояснения, что нажатие на ссылку приведет к запуску почтового клиента.
Текст якоря
(SEO UI)
Это - критичная часть ссылки для оптимизатора. Большинство поисковых систем использует этот текст как основной способ определения релевантности определенного термина и соответствующей ссылке страницы.
Если в ссылке стоит изображение вместо текста якоря, это еще не означает потери возможности передачи релевантного термина целевой странице. Тэг изображения может иметь атрибут 'alt' - текст, которые отображается при невозможности отобразить картинку. В большинстве случаев поисковая система примет этот текст как замену текста якоря..
Например: alt="Логотип SEOmoz"
Если вы постараетесь, чтобы текст атрибута alt соответствовал изображению, и будете избегать искушения пичкать его ключевыми словами, то польза от использования данного атрибута будет примерно такая же, как и от использования простых текстовых ссылок.
Пример и очевидный совет
Что же мы получим, соединив воедино все вышесказанное? Нечто вроде этого:
HTML:
<a href="http://twitter.com/RobOusbey" rel="author" title="Присоединитесь к Робу на Твиттере ">Роб Оусби </a>
