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

Атрибут «rel=» активно используется разработчиками сайтов для взаимодействия с поисковыми системами. Он включает в себя несколько значений, например nofollow или canonical. Каждый из них предназначен для решения определенных задач.

В сегодняшней статье я подробно разберу атрибут «rel=» и покажу на примерах, в каких случаях его лучше всего использовать.

Атрибут «rel=»: определение и предназначение

Rel (от англ. «relationship» – отношение) – это атрибут HTML, описывающий ссылку. Он обозначает, что это за ссылка и на какой адрес она ведет. Работает это следующим образом: когда ссылка направляет пользователя на адрес, атрибут рассказывает поисковым системам, почему ссылка ведет на этот адрес. Например, ссылаться можно на файл стилей, который взаимодействует со страницей.

Еще ссылка может вести на PDF или иноязычную версию документа. Ссылка, как взаимосвязь между текущим и иным документом, часто используется в электронных книгах для переадресации на следующую или предыдущую страницу.

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

Атрибут rel может использовать вместе с тегом <a>:

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

Также допустимо его появление и в теге <link>:

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

Значения атрибута «rel=»

Если мы говорим об атрибуте rel, то чаще всего под ним подразумевается использование значения «nofollow», но есть и другие не менее важные значения. 

rel=nofollow

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

<a rel="nofollow" href="index.html">Эту страницу не нужно посещать</a>

Использование такого значения оправдано на сайтах с формами для комментариев: пользователи могут оставлять ссылки на некачественные ресурсы, а из-за этого сайт рискует потерять доверие поисковых систем.

rel=alternate

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

<a rel="alternate" type="application/pdf" href="page.pdf">Страница в формате PDF</a>

Также есть еще одна вариация:

...rel="alternate" hreflang="en"...

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

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

rel=canonical

Указывает на предпочитаемый адрес, который будет участвовать в поиске. Используется в теге <header>:

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

rel=author

Указывает на то, что приведенная ссылка относится к информации об авторе данной страницы или статьи.

<a href="/author-page.html" rel="author">link text</a>

rel=bookmark

Обозначает, что эта ссылка является якорем и ведет на какую-то часть в этом же документе. Также она говорит поисковым системам, что эта ссылка постоянная.

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

rel=help

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

Например, в форме на сайте это прописывается через тег <a>:

<form id="form">       

<label for="comment">Comment:</label>   

<textarea id="comment"></textarea>       

<input type="submit" value="Text Comment">       

<a rel="help" href="comments.html">Help</a>   

</form>

rel=license

Указывает на то, что по ссылке размещено лицензионное соглашение, которое относится к основному тексту страницы.

<a rel="license" href="license.html">Посмотреть лицензионное соглашение</a>

rel=dns-prefetch, preconnect, prefetch, preload

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

<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=icon

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

<link rel="shortcut icon" href="/favicon.ico"></link>

rel=external

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

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

rel=first, up, prev, next, last

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

<ul>

  <li><a rel="next" href="page-1.html">Первая страница</a></li>

  <li>Исходная страница</li>

  <li><a rel="prey" href="page-3.html">Последняя страница</a></li>

</ul>

Заключение

Атрибут rel позволяет улучшить связь между страницами и сделать их более привлекательными для поисковых роботов. В результате это может заметно сказаться на посещаемости ресурса. Не бойтесь использовать данный атрибут – он может существенно улучшить показатели вашего сайта.