HTML: Все о ссылках «A HREF REL. Что всё это значит

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

Краткий перечень типов ссылок

Тип Для чего используется
alternate альтернативный способ отображения страницы
author За ссылкой подробная информация об авторе
bookmark Постоянная ссылка
help Справка или информация помогающая с какой-то частью сайта или контента
license Ссылка на информацию об авторском праве
nofollow Ссылка, которую вы не рекомендуете. Возможно вы ее разместили их корыстных мотивов
prefetch Ресурс, который скорее всего заинтересует пользователя. Сообщает браузеру, что его можно заранее поместить в кэш
search Поиск по сайту
tag Ключевое слово или название категории сайта
next Ссылка на следующую страницу
prev Ссылка на предыдущую страницу

Как определить тип ссылки?

Для определения типа используется атрибут rel

rel=alternate
Тип alternate указывает на то, что по этой ссылкой идет альтернативный вид отображения страницы. Например, это может быть PDF версия, или версия оптимизированная для печати.

PDF версия страницы

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

English version

rel=author
Этот тип сообщает, что за ссылкой находиться подробная информация об авторе сайта или страницы.

Постоянная ссылка на страницу автора

rel=help
Ссылка данного типа ведет к контенту справочного характера. Но есть важный момент. Help-ссылка контекстно-зависимая. Браузер сопоставит эту справочную информацию с родительским контейнером, в котором была размещена эта ссылка.

Помощь по комментариям

rel=license
Этот тип может использоваться когда ссылка ведет на лицензионное соглашение основного контента данной страницы. Ссылка данного типа должна быть размещена в пределах тега main сайта. Лицензионное соглашение относится только к тому контенту, которое размещено в пределах этой секции. Оно не будет относится к тому, что например у вас в подвале.

Лицензия

rel=nofollow
Этот тип сообщает, что поисковому роботу не следует воспринимать эту ссылку как ссылку, которую рекомендует публицист

Робот, не переходи на эту страницу

rel=prefetch
Ссылки этого типа следует использовать когда вы ссылаетесь на некие внешние ресурсы, которые пользователь скорее всего откроет. Браузер закеширует заранее эту ссылку и она откроется очень быстро без всяких ожиданий.

Это обязательно нужно прочитать

rel=search
Этот тип сообщает, что ссылка ведет на интерфейс поиска

Открыть поиск на сайте

Эта страница относится к странице поиска

rel=next и rel=prev
Указывает и используется в постраничной навигации. Ссылка на следующую страницу имеет тип next , а на предыдущую – prev

  • 1 страница
  • Текущая страница
  • 3 страница

LINK - это тег, который обеспечивает связь между страницами сайта, и связь между файлами ресурсов и сайтом. Он может быть расположен только в теле HEAD. Тег LINK регистро-независим. При помощи него можно связать ленту новостей со страницей сайта, можно подключить иконку страницы, подключить к странице таблицу стилей. Также можно логически вязать разные страницы сайта, если между ними есть определенная взаимосвязь. Действие тега LINK распространяется только на ту страницу сайта, на которой он установлен.

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

Синтаксис тега LINK выглядит следующим образом:

Свойство тега LINK "href" определяет файл, с которым будет связана страница (страница, на которую делается ссылка). Свойство "rel" определяет тип связи между файлом (документом) и страницей. "type" определяет тип файла, который связывается со страницей. "media" - тип устройства, на котором должна отражаться связь с файлом ресурсов.

Свойство HREF

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

Свойство REL

Это свойство может принимать одно из следующих значений:

  • top или home - ссылка на самую первую в иерархии сайта страницу.
  • contents или toc - ссылка на файл оглавления сайта.
  • index - ссылка на файл, который может выполнять индексный поиск по странице. Индексный поиск - это поиск нужного слова или словосочетания в пределах одной страницы.
  • glossary - ссылка на файл, который является глоссарием страницы, и содержит термины и определения, которые упомянуты на странице. Обычно, ведет на краткий справочник.
  • copyright - ссылка на файл, в котором показаны авторские права на страницу.
  • next - ссылка на следующую страницу сайта по предполагаемому маршруту пользователя.
  • previous - ссылка на предыдущую страницу сайта по предполагаемому маршруту пользователя.
  • help - ссылка на файл помощи, в котором, скажем, более подробно расписано описанное на странице.
  • search - ссылка на страницу поиска по сайту.
  • start - точка входа, с которой начинается логическая структура сайта.
  • chapter - ссылка на страницу, которая является главой текущей страницы.
  • section - ссылка на страницу, которая является главным разделом текущей страницы.
  • subsection - ссылка на страницу, которая является главным подразделом текущей страницы.
  • bookmark - ссылка на закладку к текущей странице, установленную на другой странице.
  • up или parent - ссылка на страницу, которая находится выше текущей страницы по иерархии сайта.
  • first - ссылка на страницу, которая является первой по предполагаемому маршруту перемещения пользователя по сайту.
  • last или end - ссылка на страницу, которая является последней по предполагаемому маршруту перемещения пользователя по сайту.
  • child - ссылка на страницу, которая является дочерней по иерархии сайта в отношении к текущей странице.
  • stylesheet - ссылка на файл css , в котором зранятся стилевые настройки оформления страницы.
  • alternate - ссылка на альтернативный файл текущей страницы. Обычно, с таким свойством REL ссылаются на RSS-ленты обновлений сайта. Некоторые браузеры (Opera, Firefox) при обнаружении такого тега выводят в адресной строке кнопку для перехода на альтернативный файл.
  • icon или shortcut icon - ссылка на иконку страницы. Иконка будет отображаться в заголовке страницы.
  • canonical - свойство, разработанное для поисковых ботов. Это ссылка на оригинал материала, опубликованного на странице. Если у вас на сайте имеются 2 страницы с одинаковым контентом, то при помощи этого тега можно указать, который из контентов оригинал. Пример одинакового контента на одном сайте: страница с материалом и страница оптимизированная на печать.
  • chapter - ссылка на страницу, которая является отдельной главой к текущей странице.
  • appendix - ссылка на страницу добавления контента.

При использовании свойства rel="icon" или rel="shortcut icon" тега LINK иконка может быть любая, но, желательно, чтобы она была размером 16x16 пикселей и качеством 32 битов на пиксел. Возможны и анимированные иконки, но двигаться они будут только в браузере Firefox. Остальные браузеры будут показывать только первый кадр анимации.

Свойство TYPE

Это свойство определет тип файла, на который ссылается тег LINK . Значение этого свойства задается в MIME формате. Если вы подключаете файл CSS стилей, то MIME формат будет "text/css". Если ссылка ведет на другую страницу сайта, то значение этого свойства "text/html" или "text/xml", если на иконку, то "image/x-icon", если на rss-ленту, то "application/rss+xml". Это основные и самые используемые MIME-типы.

Свойство MEDIA

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

  • all - все устройства.
  • screen - экран монитора.
  • print - устройство печати. Обычно - принтер.
  • projection - проектор.
  • braille - устройства, предназначенные для чтения слепыми, на основе системы Брайля.
  • speech - устройства речевого вывода. Обычно - синтезаторы речи или речевые браузеры.

Обычно, для файлов стилей применяется MIME-тип "screen".

Свойство TITLE

Это свойство описывает файл, на который ссылается тег LINK . Свойство является необязательным и используется, в основном, для краткого описания или оглавления RSS-лент.

Примеры

Предлагаю несколько распространенных примеров, использующих тег LINK .

Подключение внешнего CSS файла стилей:

Подключение RSS канала новостей к странице:

Подключение своей иконки favicon производится двумя тегами LINK. Это нужно для поддержки тега разными браузерами:

сылка на главную страницу сайта:

Главная страница">

Это лишь некоторые способы использования тега LINK . Вы можете использовать его по-своему, но в рамках описанных выше правил.

Вы можете присоедениться к моему микроблогу в Твиттере

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

rel = alternate

Это отношение также весьма распространено. в сочетании с указанием медиа типа RSS или Atom «включает» так называемое «автоматическое обнаружение канала». Это позволяет организовать канал с последними статьями или новостями для читателей использующих, к примеру, Google Reader. Большинство браузеров тоже поддерживают автоматическое обнаружение такого канала и отображают специальный значок рядом с URL. (в отличии от rel="stylesheet" тут атрибут type нужен. Не выбрасывай его).

Ссылочное отношение rel="alternate" всегда было странным гибридом, даже в HTML4. В HTML5 его определение было уточнено и расширено для более точного описания веб контента. Как только что было показано, использование rel="alternate" в сочетании с type=application/atom+xml указывает канал Atom для текущей страницы. Но можно так же использовать rel="alternate" в сочетании с любым другим значением атрибута type для обозначения другого формата, например, PDF.

HTML5 так же закрывает глаза на запутанный вопрос — как указать отношение на документ с переводом. HTML4 говорит использовать в сочетании с rel="alternate" чтобы указать язык связанного документа. Но это не правильно: в списках ошибок HTML4 явно сказано, что использование rel="alternate" для указания языка документа является ошибкой. Но на этом дело пока и остановилось, вопрос не доработан. В HTML5 для указания языка документа используется .

Остальные ссылочные отношения в HTML5

rel="archives"

указывает, что ссылаемся на коллекцию записей, документов или другие материалы, представляющие исторический интерес. Ссылки на материалы из архива блогов могут содержать атрибут rel="archives"

Rel="external"

указывает, что документ, на который ведет ссылка, не является частью этого сайта, но текущей документ является частью того документа на который ссылаемся. Я думаю это пришло из WordPress, который использует эту связь для ссылок, оставленных комментаторами.

Rel="start", rel="prev" и rel="next"

определяет отношения между страницами, которые являются частями одной серии (например, главы книги или даже сообщения в блоге). Все вроде бы просто, но корректно используется только rel="next". Народ привык писать rel="previous" вместо rel="prev", rel="begin" и rel="first" вместо rel="start", используют rel="end" вместо rel="last". И еще, некоторые создают rel="up" для ссылок на «родительскую» страницу.

HTML5 включает rel="first", который получил наибольшее распространение как способ сказать, что «это первая страница серии» (rel="start" является синонимом, для поддержки обратной совместимости). Так же включены rel="prev" и rel="next" (поддерживается и rel="previous" для обратной совместимости), а так же rel="last" (последний документ в серии — противоположность rel="first") и rel="up".

Чтобы проще было понять как использовать rel="up", найди где-то и посмотри на навигацию вида «хлебные крошки» (ну или просто представь это себе). Главная страница, скорей всего, будет стоять первой, а текущая страница будет в конце. Так вот, rel="up" должен указывать на страницу, которая стоит перед последней (текущей) страницей в этой навигации.

Rel="icon"

второе по популярности ссылочное отношение. Обычно используется в паре со значением shortcut:

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

Ключевое слово any атрибута sizes означает что иконка может масштабироваться (используется векторный формат, вроде SVG). Если атрибут sizes отсутствует, браузер отобразит иконку с размерами, соответствующими реальному размеру графической картинки.

Rel="license"

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

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

rel="noreferrer"

указывает, что при переходе по такой ссылке ПА не должны включать в запрос HTTP заголовок Referer. Пока это не поддерживается браузерами, но недавно была добавлена поддержка rel="noreferrer" в Webkit nightlies, а значит, скоро появится в Safari, Chrome и других webkit-браузерах.

указывает адрес "pingback" сервера. Спецификация гласит: «система pingback — это возможность блогу автоматически получить уведомление, что на него кто-то сослался. Это предоставляет возможность собрать все комментарии/отзывы к статье в одном месте». Некоторые системы блогов, в частности WordPress, включают этот механизм у себя по умолчанию.

служит для оптимизации загрузки веб страниц. Указанный документ в такой ссылке (html, css-файл, изображение и т.д.) будет подгружен в кэш пользователю в фоновом режиме. Такие ссылки применяются к документам, которые скорей всего вот-вот понадобятся пользователю. Например, некоторые поисковые системы используют этот механизм для документов в топ выдаче. Сейчас данную технологию поддерживает только Firefox.

указывает, что документ, на который ссылаемся, содержит интерфейс для поиска для данной страницы и связанных с ней ресурсов. В частности, если хочешь чтобы rel="search" делал что-то полезное, то эта ссылка должна вести на Open Search документ с описанием для браузера, как ему выполнить поиск на данном ресурсе используя URL и ключевое слово. Поддержка формата Open Search (а вместе с ним и rel="search") была включена в IE7 и FF2.

служит для добавления, указанного в ссылке документа, в закладки браузера. Когда кликаешь на ссылку с rel="sidebar", показывается окошко с предложением добавить страницу в закладки. Сейчас поддерживается Opera и Mozilla, остальные браузеры это правило игнорируют.

указывает, что эта ссылка является тегом, относящимся к данной странице. Навигация по тегам (ключевые фразы, категории блога/сайта) впервые была применено Technorati, чтобы как-то классифицировать сообщения в блоге. Сначала их так и называли — теги Technorati. Позже тегирование было стандартизировано сообществом микроформатчиков и теги получили обозначение rel="tag". Большинство систем блогов добавляют ссылкам-тегам данный атрибут. Браузеры на это никак не реагируют. Это знак для поисковых систем о том, куда ведет данная ссылка.

rel=author и rel=publisher. Чем они отличаются друг от друга и какую из связей использовать для своего сайта? Можно ли использовать одновременно rel=author и rel=publisher? В этой статье дается пояснение к каждому из упомянутых атрибутов и инструкция, как их правильно использовать.

Что такое rel=author?

Авторская разметка Google это способ связать авторов с их контентом с помощью использования профиля Google+ и двустороннего подтверждения связи профиля с контентом (см. ). Создание этой связи дает ряд преимуществ:

— В результатах поиска рядом со сниппетами ваших страниц будет отображаться фото из профиля Google+.

— Увеличится кликабельность (CTR) сниппета. Можно получать больше трафика, оставаясь на тех же поизициях в поиске.

— При воровстве контента с вашего сайта, Google будет знать первоисточник и, скорей всего, показывать его выше сворованного.

— Это хорошо влияет на персональный брендинг и повышение узнаваемости автора.

— У вас появляется возможность иметь специальную панель в результатах поиска, при вводе пользователем навигационных/брендовых запросов. Эта панель не отображается, пока вы не наберете определенное вовлечение пользователей на странице Google+ (сколько именно нужно плюсов, постов или комментариев, пока не известно). В этой панели отображается ваш логотип, имя компании, количество фоловеров, кнопка подписки и ваши последние посты в Google+.

(кликните для просмотра примера непосредственно в Google)

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

Когда использовать rel=author, а когда rel=publisher?

Из-за того, что оба атрибута создают связь, возникает вопрос, как определить, что лучше использовать?

Из описанного выше, основная разница между rel=author и rel=publisher в следующем:

  • rel=author относится к статьям (у разных статей могут быть разные авторы), rel=publisher относится ко всему сайту.
  • rel=author для персональных профилей, rel=publisher для бизнес-страниц.
  • в поиске rel=author дает возможность отобразить свое фото вместе со сниппетом сайта, rel=publisher будет отображать описание со страницы Google+ в боковой панели.
  • rel=author добавляет фото по любым запросам, rel=publisher отображает панель только по брендовым запросам.

Эти теги также можно использовать совместно.

Если подвести итог, используйте rel=publisher для связи бизнес-страниц со всем сайтом, аrel=author для связи страниц/статей отдельного автора с его профилем в Google+. Сайт может иметь несколько авторов, а также бизнес-страницу. И в любом случае потребуется двусторонняя верификация, то есть ссылка не только с сайта, но и на сайт с настроек страницы или профиля Google+.

Несколько полезных советов:

— Добавьте на свой сайт виджет Google+ . Так посетителям будет легче добавлять страницу в свои круги.


или

— Если вы подтвердили сайт в панели вебмастеров Google, и на этом же аккаунте имеете персональный профиль Google+, дополнительно верифицировать сайт нет необходимости.

— Ознакомьтесь с ответами Google на часто задаваемые вопросы по авторской разметке.

Дата публикации: 01 декабря, 2013

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

Сперва надо создать файл-описание поисковой системы вашего сайта. Вот примерный шаблон такого файла:

  1. < OpenSearchDescription xmlns = "http://a9.com/-/spec/opensearch/1.1/" >
  2. < ShortName > Site Name
  3. < Description > Site Name - Search
  4. < InputEncoding > windows - 1251
  5. < Contact > your_mail @ domain
  6. < Image width = "16" height = "16" > data : image / x - icon ; base64 , AAABAAEAE ... AAAA
  7. < Developer > Admin
  8. < Url type = "text/html" method = "GET"
  9. template = "http://site/search?q={searchTerms}&do=action" />

Вы можете менять следующие поля: ShortName - краткое название сайта, не более 16 символов. Description - описание сайта, не более 1024 символов. InputEncoding - кодировка сайта. Contact - контактный ардес e-mail администратора сайта. Developer - имя или никнейм администратора сайта. Url - шаблон ссылки, которая формируется для обращения к странице поиска. Переменная {searchTerms} будет автоматически заменяться на строку, которую пользователь будет вводить в форму поиска браузера. В шаблоне она должна быть записана именно в таком виде. Image - иконка, которая будет отображаться рядом с названием вашего сайта. Она может быть двух типов: в виде ссылки на файл на сервере или в виде закодированных двоичных данных. Например:илиВ этом случае данные представляют собой содержимое файла иконки, сконвертированное в текстовое представление по алгоритму base64. По возможности придерживайтесь стандартного размера иконки - 16х16 пикселов. Это минимально необходимый набор параметров для файла описания. Полный их список вы можете найти в официальной спецификации OpenSearch и в руководстве по созданию поисковых плагинов для Firefox.

После того, как файл-описание вашей поисковой системы создан и размещен на сервере, надо сообщить об этом браузеру пользователя. Делается это специальным мета-тегом в заголовке страницы:Здесь search.xml - имя файла-описания и полный путь до него, title - краткий заголовок, который будет отображаться в меню добавления поисковой системы в браузере, остальные поля служебные и не должны меняться. Теперь при заходе на web-страницу с таким мета-тегом, например браузером Firefox, в окне поиска появится кнопка "плюсик". При нажатии на нее поисковая система вашего сайта будет добавлена в список поисковых систем пользователя. Firefox обрабатывает OpenSearch-файл и конвертирует его в собственный поисковый плагин.

Для личных нужд наклепал несколько поисковых плагинов для Mozilla Firefox. Это поисковики по трекерам kinozal.tv, demonoid.com, thepiratebay.org, по базе форматов файлов formats.ru, поисковики для программеров wotsit.org, php.net, msdn.com, и, конечно, проверка правописания gramota.ru. Может кому и пригодится.

Mozilla.Firefox.Searchplugins.zip (8,399 bytes)


Для установки скопируйте файлы в папку \Mozilla Firefox\searchplugins и перезапустите браузер.
  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то