Атрибут «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 id="form">        
  <label for="comment">Ваш комментарий:</label>    
  <textarea id="comment"></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" sizes="18x18" type="image/png"></link>

rel=external

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

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

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