Что такое «rel=»?

Объясняем поисковым роботам и веб-службам, почему конкретная ссылка ведет к определенному адресу.

В HTML атрибут rel (от англ. "relationship" ‒ «отношение, взаимосвязь») определяет взаимосвязь между текущим и связанным с ним ссылкой документом.

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

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

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

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

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

Сейчас чаще всего используют значение «nofollow», которое запрещает поисковой системе переходить по конкретной ссылке, то есть, не передает им тИЦ и PR, и «canonical», которая определяет предпочитаемый адрес для индексации поисковыми системами. Но использование атрибута rel не ограничивается только значениями «nofollow» и «canonical».

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

rel=stylesheet

Самое распространенное значение для тега <link>. Указывает браузеру, что подключаемый файл является таблицей стилей CSS. Это обязательное значение при подключении CSS-файлов:

<link rel="stylesheet" href="styles.css">

rel=nofollow

Значение предназначено для поисковых систем: указывает им, что ссылка не передает свой вес той странице, на которую ссылается. Пример:

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

rel=canonical

Указывает на предпочитаемый адрес, который будет участвовать в поиске. Используется в теге <link> в хэдере страницы. Помогает бороться с дублирующим контентом и указывает поисковым системам, какая версия страницы является основной:

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

Важно: на странице должен быть только один тег canonical. Не используйте canonical вместе с noindex, так как это может создать противоречивые сигналы для поисковых систем. Подробнее об использовании rel=canonical в нашей статье о комплексном аудите сайта.

rel=noopener

Критически важное значение для безопасности. Используется вместе с target="_blank" для защиты от уязвимостей, связанных с доступом нового окна к объекту window.opener. Рекомендуется всегда использовать при открытии внешних ссылок в новой вкладке:

<a href="https://example.com" target="_blank" rel="noopener">Внешняя ссылка</a>

Без rel="noopener" открываемая страница может получить доступ к вашему window.opener и потенциально перенаправить пользователя на фишинговый сайт.

rel=noreferrer

Предотвращает передачу HTTP-заголовка Referer при переходе по ссылке. Также включает функциональность noopener. Используется для защиты приватности и предотвращения утечки информации о том, откуда пришел пользователь:

<a href="https://example.com" rel="noreferrer">Ссылка без referer</a>

Часто используется вместе с noopener: rel="noopener noreferrer" для максимальной защиты.

rel=sponsored

Новое значение, введенное Google в 2019 году. Указывает, что ссылка является платной или спонсорской (реклама, платные размещения). Помогает поисковым системам лучше понимать природу ссылок на вашем сайте:

<a href="https://example.com" rel="sponsored">Рекламная ссылка</a>

Может использоваться вместе с nofollow: rel="sponsored nofollow".

rel=ugc

User Generated Content — еще одно новое значение от Google (2019). Используется для ссылок в пользовательском контенте: комментариях, форумах, отзывах. Помогает поисковым системам различать редакторский и пользовательский контент:

<a href="https://example.com" rel="ugc">Ссылка в комментарии пользователя</a>

Также может комбинироваться с nofollow: rel="ugc nofollow".

rel=preload

Указывает браузеру заранее загрузить критически важные ресурсы (шрифты, изображения, скрипты) для ускорения загрузки страницы. Используется в теге <link>:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Отличается от prefetch тем, что preload загружает ресурс с высоким приоритетом и сразу, а prefetch — в фоновом режиме для будущего использования.

rel=preconnect

Устанавливает раннее соединение с сервером, на котором находится ресурс. Полезно для внешних доменов (CDN, шрифты Google Fonts, аналитика). Ускоряет последующую загрузку ресурсов:

<link rel="preconnect" href="https://fonts.googleapis.com">

Браузер устанавливает соединение заранее, что экономит время при загрузке шрифтов или других ресурсов с этого домена.

rel=alternate

Указывает на то, что по этой ссылкой располагается альтернативный вид отображения страницы. Например, это может быть PDF-версия, или версия для печати:

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

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

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

rel=author

Сообщает, что за ссылкой находится информация об авторе сайта или страницы:

<a rel="author" href="about.html">Об авторе</a>

rel=bookmark

Говорит, что ссылка является постоянной и адрес этой страницы не меняется никогда:

<a rel="bookmark" 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=prefetch

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

<link rel="prefetch" href="next-page.html">

Отличается от preload тем, что prefetch имеет низкий приоритет и загружается в фоне, не блокируя основной контент.

rel=dns-prefetch

Выполняет предварительный DNS-запрос для домена, что ускоряет последующую загрузку ресурсов с этого домена. Особенно полезно для внешних ресурсов:

<link rel="dns-prefetch" href="https://cdn.example.com">

Браузер заранее разрешает доменное имя в IP-адрес, что экономит время при реальной загрузке ресурсов.

О тонкостях использования этих значений оптимизации производительности — в статье на Хабре.

rel=search

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

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

rel=tag

Ссылка этого типа ведет дает определения ключевого слова или категории сайта:

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

rel=first, next, up, last, prev

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

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

rel=external

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

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

rel=icon

Используется для ассоциации иконки сайта с его содержимым. Указывается в теге :

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

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

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

Комбинирование значений

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

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Безопасная внешняя ссылка</a>
<a href="https://example.com" rel="sponsored nofollow">Платная ссылка без передачи веса</a>
<a href="https://example.com" rel="ugc nofollow">Пользовательский контент без веса</a>