Атрибут rel

Атрибут rel — это атрибут HTML, используемый для указания типа отношений между текущим документом и связанным с ним ресурсом (чаще всего — внешней ссылкой). Он применяется преимущественно в тегах <a>, <link> и <area>, а также в некоторых других элементах, таких как <form>. Значение атрибута представляет собой набор ключевых слов (токенов), разделённых пробелами, каждое из которых описывает определённый аспект связи.

История

Атрибут rel (от англ. relationship — отношение) был введён в спецификации HTML 4.0 (1997 год) как средство для семантической разметки гиперссылок. Изначально он поддерживал ограниченный набор значений, таких как stylesheet, next, prev, contents и index. Основной целью было улучшение навигации и структурирования документов, особенно в контексте веб-страниц, организованных в виде последовательности глав или разделов.

С развитием веба и появлением HTML5 (2014 год) атрибут rel получил значительное расширение. В него были добавлены новые значения, связанные с безопасностью (noreferrer, noopener), поисковой оптимизацией (nofollow, sponsored, ugc), а также с интеграцией веб-приложений (manifest, preload, prefetch). В 2019 году в спецификации HTML Living Standard была введена формальная регистрация новых значений в реестре Microformats Wiki, что упорядочило процесс их добавления.

Синтаксис и использование

Атрибут rel указывается внутри открывающего тега элемента. Его значение может состоять из одного или нескольких ключевых слов, разделённых пробелами. Порядок слов не имеет значения, но каждое слово должно быть уникальным.

Пример: ``html <a href="https://example.com"; rel="nofollow noopener">Ссылка</a> ``

В этом примере указано, что ссылка не должна передавать реферальные данные (noreferrer) и не должна открывать новую вкладку с доступом к объекту window.opener (noopener).

Классификация значений

Значения атрибута rel можно разделить на несколько категорий по функциональному назначению.

### Навигационные и структурные значения

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

• alternate — указывает на альтернативное представление текущего документа (например, перевод на другой язык, версию в формате PDF, RSS-ленту). Часто используется с атрибутами hreflang и type.
• canonical — указывает на канонический (основной) URL для страницы, помогая поисковым системам избежать дублирования контента.
• next и prev — обозначают следующую и предыдущую страницы в последовательности (например, в многостраничных статьях).
• start — указывает на первую страницу последовательности.
• contents — ссылается на оглавление документа.
• index — ссылается на индексную страницу.
• search — указывает на инструмент поиска по сайту.
• help — ссылается на страницу справки.
• license — указывает на лицензию, под которой распространяется содержимое страницы.
• copyright — ссылается на страницу с информацией об авторских правах.

### Значения для поисковой оптимизации (SEO)

Эти значения используются для управления поведением поисковых роботов.

• nofollow — указывает поисковым системам не передавать вес ссылки (PageRank) на целевой ресурс. Введён компанией Google в 2005 году для борьбы со спамом в комментариях.
• sponsored — обозначает ссылки, размещённые на платной основе (реклама, партнёрские программы). Введён в 2019 году.
• ugc (User Generated Content) — указывает, что ссылка размещена пользователем (например, в комментариях, на форумах). Введён в 2019 году.
• noopener — предотвращает передачу контекста открытия новой вкладки через свойство window.opener, что повышает безопасность и производительность.
• noreferrer — запрещает передачу HTTP-заголовка Referer (информация о том, с какой страницы пришёл пользователь). Включает в себя эффект noopener.
• external — указывает, что ссылка ведёт на внешний ресурс (не принадлежащий текущему сайту).

### Значения для производительности и загрузки ресурсов

Эти значения используются в теге <link> для управления предварительной загрузкой ресурсов.

• preload — указывает браузеру немедленно начать загрузку ресурса (например, шрифта, изображения, скрипта) с высоким приоритетом.
• prefetch — указывает браузеру загрузить ресурс в фоновом режиме, который может понадобиться при следующей навигации.
• preconnect — указывает браузеру заранее установить соединение (DNS, TCP, TLS) с указанным сервером.
• dns-prefetch — указывает браузеру выполнить предварительный DNS-запрос для указанного домена.
• prerender — указывает браузеру полностью загрузить и отрендерить страницу в фоновом режиме (устаревшее, не рекомендуется к использованию).
• modulepreload — указывает браузеру предварительно загрузить JavaScript-модуль.

### Значения для веб-приложений и манифестов

• manifest — указывает на файл веб-манифеста (JSON), который описывает, как приложение должно вести себя при установке на устройство пользователя.
• icon — указывает на иконку сайта (favicon). Может использоваться с атрибутами sizes и type.
• apple-touch-icon — указывает на иконку для устройств Apple (iOS, macOS).
• shortcut icon — устаревшее значение, синоним icon.

### Значения для микроформатов и социальных сетей

• me — используется в микроформате XFN (XHTML Friends Network) для указания, что ссылка ведёт на страницу, представляющую то же лицо (например, профиль в социальной сети).
• author — указывает на автора текущего документа или статьи.
• tag — указывает на метку (тег), связанную с текущим документом.
• bookmark — указывает на постоянную ссылку (permalink) для определённого фрагмента страницы (например, для комментария).

Применение

### В теге <a>

Атрибут rel в теге <a> используется для семантической разметки гиперссылок. Наиболее распространённые случаи:

• Управление индексацией: nofollow, sponsored, ugc — для указания поисковым системам, как обрабатывать ссылку.
• Безопасность: noopener и noreferrer — для защиты от фишинга и утечки реферальных данных.
• Навигация: next, prev, start — для организации многостраничного контента.
• Социальные сети: me, author, external — для указания связей между профилями.

### В теге <link>

Атрибут rel в теге <link> используется для подключения внешних ресурсов к документу. Он обязателен для этого тега.

• Стили: stylesheet — для подключения CSS-файлов.
• Иконки: icon — для favicon.
• Предварительная загрузка: preload, prefetch, preconnect — для оптимизации производительности.
• Канонические URL: canonical — для указания предпочтительного адреса страницы.
• Альтернативные версии: alternate — для указания переводов или RSS-лент.

### В теге <form>

Атрибут rel может использоваться в теге <form> для указания отношения между формой и целевым ресурсом (например, nofollow для форм, отправляемых на внешние серверы).

Интересные факты

• Значение nofollow было введено Google в 2005 году как временная мера для борьбы со спамом в комментариях, но впоследствии стало стандартом де-факто.
• Значения sponsored и ugc были добавлены в 2019 году в рамках совместной инициативы Google, Twitter и других платформ для более точной классификации ссылок.
• Атрибут rel может содержать до 256 символов, включая пробелы.
• В HTML5 атрибут rel стал обязательным для тега <link> при указании stylesheet, хотя в HTML 4.01 он был необязательным.
• Существует реестр зарегистрированных значений rel на сайте Microformats Wiki, который поддерживается сообществом разработчиков.

Критика

Основная критика атрибута rel связана с его избыточностью и сложностью для разработчиков. Некоторые значения, такие как nofollow, могут быть проигнорированы поисковыми системами, если они не соответствуют их алгоритмам. Кроме того, из-за большого количества значений (более 50 зарегистрированных) разработчики часто не знают о существовании многих из них или используют их неправильно. Также отмечается, что атрибут rel не всегда поддерживается всеми браузерами одинаково, особенно в отношении значений для предварительной загрузки (preload, prefetch).

Источники

• HTML Living Standard — The rel attribute
• Microformats Wiki — rel registry
• Google Developers — Link attributes
• Mozilla Developer Network (MDN) — HTML attribute: rel
• W3C HTML 4.01 Specification — Link types