Html rel – Атрибут «rel=» что собой представляет и для чего нужен?

Leave a Comment / Html / By /

Атрибут rel | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.50+4.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Атрибут rel определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href. Несмотря на то, что браузеры в большинстве своем не поддерживают атрибут rel, на сайтах часто можно встретить код rel=»nofollow», предназначенный для поисковых систем Google и Яндекс. Ссылки, помеченные таким образом, не передают PageRank и ТИЦ.

Синтаксис

<a rel="строка">...</a>

Обязательный атрибут

Нет.

Значения

Некоторые возможные значения перечислены ниже.

answer
Ответ на вопрос.
chapter
Раздел или глава текущего документа.
co-worker
Ссылка на страницу коллеги по работе.
colleague
Ссылка на страницу коллеги (не по работе).
contact
Ссылка на страницу с контактной информацией.
details
Ссылка на страницу с подробностями.
edit
Редактируемая версия текущего документа.
friend
Ссылка на страницу друга.
question
Вопрос.

Весь список значений можно посмотреть по адресу http://wiki.whatwg.org/wiki/RelExtensions

В HTML5 поддерживается следующие значения.

archives
Ссылка на архив сайта.
author
Ссылка на страницу об авторе на том же домене.
bookmark
Постоянная ссылка на раздел или запись.
first
Ссылка на первую страницу.
help
Ссылка на документ со справкой.
index
Ссылка на содержание.
last
Ссылка на последнюю страницу.
license
Ссылка на страницу с лицензионным соглашением или авторскими правами.
me
Ссылка на страницу автора на другом домене.
next
Ссылка на следующую страницу или раздел.
nofollow
Не передавать по ссылке ТИЦ и PR.
noreferrer
Не передавать по ссылке HTTP-заголовки.
prefetch
Указывает, что надо заранее кэшировать указанный ресурс.
prev
Ссылка на предыдущую страницу или раздел.
search
Ссылка на поиск.
sidebar
Добавить ссылку в избранное браузера.
tag
Указывает, что метка (тег) имеет отношение к текущему документу.
up
Ссылка на родительскую страницу.

Значение по умолчанию

Нет.

Пример 1

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег А, атрибут rel</title>
 </head>
 <body>
  <p><a href="http://ya.ru" rel="nofollow">Наш ответ Яндексу</a></p>
 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Добавить в избранное</title>
 </head>
 <body>
  <p><a href="http://htmlbook.ru" rel="sidebar">Добавить в избранное</a></p>
 </body>
</html>

Браузеры

Firefox поддерживает значение prefetch и sidebar. Opera поддерживает значение sidebar.

Атрибут «rel=» что собой представляет и для чего нужен?

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

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

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


<a rel="..." href="...">...</a>

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


<link rel="..." href="...">

Сегодня активно используют «nofollow». Это значение создает запрет на переход поисковой системы по определенной ссылке. Другими словами не передает им PR и тИЦ. Также используют и другие значения, такие как «canonical». Оно определяет, какой адрес является предпочтительным для поисковых машин. Использование rel может применяться более широко:

rel=nofollow

Такое значение используется поисковыми машинами для того, чтобы определить, передает ли ссылка вес той веб-странице, на которую ссылается:


<a rel="nofollow" href="page.html">Робот, не переходи на эту страницу</a>

rel=alternate

Используется для указания того, что ссылка ведет на альтернативное изображение страницы (версия для печати, PDF):


<a rel="alternate" type="application/pdf" href="page.pdf">PDF версия страницы</a>

Для этого типа можно задать hreflang, что позволит указать на то, что ссылка ведет на иноязычную версию:


<a rel="alternate" hreflang="en" href="english-version.html"> Spanish version</a>

rel=canonical

Это значение дает указание на адрес сайта, которому отдается предпочтение при поиске. Используется в теге <link> в хэдере:


<link rel="canonical" href="http://www.example.com/">

rel=bookmark

Указывает на то, что ссылка не меняется:


<a rel="bookmark" href="about.html">Постоянная ссылка на страницу</a>

rel=author

Используется для сообщения, что ссылка ведет на сведения об авторе страницы (сайта):


<a rel="author" href="about.html">О сайте</a>

rel=help

Говорит о том, что ссылка ведет на текст, являющийся справочной информацией.


<form>        
  <label for="comment">Ваш комментарий:</label>    
  <textarea></textarea>        
  <input type="submit" value="Оставить комментарий">        
  <a rel="help" href="comments.html">Помощь по комментариям</a>    
</form>

Эти примеры показывают, что ссылка ведет на контент, раскрывающий информацию о самом тексте, который расположен в комментариях.

rel=license

Указывает на то, что по ссылке размещено лицензионное соглашение, которое относится к основному тексту страницы. Размещение ссылки должно быть ограничено тегом main. Это определяет контент, к которому ссылка привязана:


<a rel="license" href="license.html"> Лицензионное соглашение</a>

rel=dns-prefetch, preconnect preload, preconnect, prefetch

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


<a rel="prefetch" href="license.html">Важная информация!</a>

rel=tag

Определяет категорию сайта или определяет ключевой запрос:


<a rel="tag" href="search.html">Эта страница относится к странице поиска</a>

rel=search

Такая ссылка ведет к поиску на сайте:


<a rel="search" href="search.html">Поиск по сайту</a>

rel=first, up, prev, next, last

Такие ссылки необходимы для навигации по странице. Они ведут на начало, конец, предыдущую, последующую страницы:


<ul>
  <li><a rel="next" href="page-1.html">2 страница</a></li>
  <li>Текущая страница</li>
  <li><a rel="prey" href="page-3.html">4 страница</a></li>
</ul>

rel=icon

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


<link rel="shortcut icon" href="/favicon.ico"></link>
Многие браузеры не учитывают это значение и автоматически связывают содержимое с основным логотипом ресурса. Размер иконки можно менять, для этого используется значение size:

<link rel="icon" href="favicon.png" type="image/png"></link>

rel=external

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


<a rel="external nofollow" href="page.html">Открыть в новом окне</a>

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

Атрибут rel | HTML | WebReference

Атрибут rel определяет отношения между текущим документом и документом, на который ведёт ссылка, заданная атрибутом href. Несмотря на то, что большинство браузеров не поддерживают атрибут rel, на сайтах часто можно встретить код rel=»nofollow», предназначенный для поисковых систем Google и Яндекс. Ссылки, помеченные таким образом, не передают PageRank и ТИЦ.

Синтаксис

<a rel="текст">...</a>

Значения

alternate
Даёт альтернативные представления текущего документа.
author
Указывает ссылку на автора текущего документа или статьи.
bookmark
Постоянная ссылка на ближайший родительский раздел.
help
Ссылка на контекстно-зависимую справку.
license
Указывает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
next
Указывает, что текущий документ является частью серии и ссылка ведёт на следующий документ в серии.
nofollow
Не передавать по ссылке ТИЦ и PR.
noreferrer
Требует, чтобы пользовательский агент не посылал в HTTP-заголовке Referer, если пользователь переходит по ссылке.
prev
Указывает, что текущий документ является частью серии и ссылка ведёт на предыдущий документ в серии.
search
Даёт ссылку на ресурс, который может быть использован для поиска по текущему документу и связанных с ней страниц.
tag
Указывает, что метка (тег) имеет отношение к текущему документу.

Значение по умолчанию

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>А, атрибут rel</title>
 </head>
 <body>
  <p><a href="http://ya.ru" rel="nofollow">Наш ответ Яндексу</a></p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Добавить в избранное</title>
 </head>
 <body>
  <p><a href="http://webref.ru" rel="sidebar">Добавить в избранное</a></p>
 </body>
</html>

Примечание

Firefox поддерживает значение prefetch и sidebar. Opera поддерживает значение sidebar.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.05.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Атрибут rel | HTML | WebReference

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

Значения

alternate
Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
author
Указывает ссылку на автора текущего документа или статьи.
help
Указывает ссылку на контекстно-зависимую справку.
icon
Адрес картинки, которая символизирует текущий документ или сайт.
license
Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
next
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ.
prev
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ.
search
Указывает ссылку на ресурс, который применяется для поиска по документу или сайту.
stylesheet
Определяет, что подключаемый файл хранит таблицу стилей (CSS).

Значение по умолчанию

Пример

<!DOCTYPE HTML>
<html>
  <head>
   <meta charset="utf-8">
   <title>LINK, атрибут rel</title> 
   <link rel="stylesheet" href="hb.css">
  </head> 
  <body>
   <p>...</p>
  </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.05.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

seodon.ru | Теги HTML — Тег A

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Атрибут rel, тега <A>, описывает прямую связь между текущим документом и документом открываемым по ссылке. Является противоположным атрибуту rev. На практике браузеры не поддерживают этот атрибут для тега <A>, поэтому использовать его можно только ради семантики HTML-кода.

Но все же одно значение rel может быть весьма полезно для поисковой оптимизации сайта. Это rel=»nofollow», которое понимают многие поисковики, например, Google. Для них оно значит то, что при индексировании такая ссылка не должна передавать «вес страницы» (у Google это PageRank), на которой она расположена. Значение nofollow не входит в спецификацию HTML 4.01 (но будет в HTML5).

Некоторые отечественные поисковики, например Яндекс, для поисковой оптимизации также поддерживают тег <NOINDEX>.

Значения

Значением атрибута rel является одно или несколько (через пробел) ключевых слов, указывающих тип ссылки по отношению к текущей HTML-странице:

  • alternate — альтернативная версия документа (например, на другом языке).
  • stylesheet — внешняя таблица стилей.
  • start — первый документ в серии.
  • next — следующий документ.
  • prev — предыдущий документ.
  • contents — документ с оглавлением.
  • index — документ по индексу (например, алфавитный указатель).
  • glossary — документ из словаря терминов.
  • copyright — документ с информацией об авторских правах.
  • chapter — глава в серии документов.
  • section — раздел в серии документов.
  • subsection — подраздел в серии документов.
  • appendix — дополнение в серии документов.
  • help — документ помощи.
  • bookmark — закладка в документе.

Значение по умолчанию: нет.

Синтаксис

<a href="URL" rel="тип ссылки">...</a>

Обязательный атрибут: нет.

Пример HTML: применение атрибута rel

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тег A, применение атрибута rel</title>
 </head>
 <body>
  <p><a href="/html/primer/files/hello.html" rel="nofollow">Скрыть ссылку</a></p>
  <p><a href="http://seodon.ru/contact/" rel="copyright">Контакты и авторство</a></p>
  <p><a href="/html/a-name.php" rev="prev">Тег A, атрибут name</a></p>
  <p><a href="/html/a-rev.php" rel="next">Тег A, атрибут rev</a></p>
</body>
</html>

Результат примера

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

Поддержка браузерами

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетНетНетНетНет

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

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