Атрибут rel в HTML - полное практическое руководство

Введение

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

• безопасность (открытие ссылок в новой вкладке, защита от перехвата вкладок);
• SEO (передача или блокировка веса ссылок, канонизация страниц, языковые версии);
• поведение браузера (предзагрузка, предзапросы, навигация);
• доступность и семантика (понимание структуры сайта роботами и вспомогательными средствами).

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

Где используется атрибут rel

Основные HTML-элементы с rel

Атрибут rel используется не только в ссылках. Давайте разберем основные элементы по очереди.

В теге a

Это самый частый случай.

Пример:

<a href="https://example.com" rel="noopener noreferrer">
  Перейти на внешний сайт
</a>
<!-- rel описывает отношение текущей страницы к целевой -->

Для a rel задает тип отношения к документу, на который указывает href. Браузеры и поисковые системы используют это для:

• понимания, безопасна ли ссылка;
• передачи или блокировки ссылочного веса;
• правильной интерпретации структуры сайта (например, prev/next).

В теге link

link чаще всего используется в head, и rel здесь ключевой атрибут, который говорит, что именно вы подключаете.

Пример:

<link rel="stylesheet" href="/styles/main.css">
<!-- rel="stylesheet" - браузер понимает, что это CSS -->

На основе rel браузер решает:

• как обработать ресурс (как CSS, иконку, preconnect и т.п.);
• когда загружать файл;
• как этот ресурс связан с документом (canonical, alternate).

В теге area

area используется внутри map для создания кликабельных областей на изображении.

<img src="scheme.png" usemap="#scheme-map" alt="Схема">

<map name="scheme-map">
  <area shape="rect" coords="0,0,100,100"
        href="https://example.com/part1"
        rel="noopener"
        alt="Часть 1">
</map>

Здесь rel работает так же, как в a — описывает связь между картой области и целевым ресурсом.

Значения rel для ссылок (a, area)

Давайте подробно посмотрим на основные значения rel, которые вы будете использовать со ссылками.

Значения безопасности и поведения

rel="noopener"

Используется с target="_blank". Помогает защититься от перехвата вкладки новой страницей.

<a href="https://external-site.com"
   target="_blank"
   rel="noopener">
  Открыть в новой вкладке
</a>
<!-- rel="noopener" отключает доступ новой вкладки к window.opener -->

Зачем это нужно:

• по умолчанию новая вкладка получает доступ к window.opener;
• вредоносный сайт может изменить location исходной вкладки;
• noopener обрывает эту связь.

Лучше всегда применять noopener для внешних ссылок с target="_blank".

rel="noreferrer"

Дополняет или заменяет noopener.

<a href="https://external-site.com"
   target="_blank"
   rel="noreferrer">
  Перейти без передачи реферера
</a>
<!-- браузер не отправит HTTP-заголовок Referer -->

Особенности:

• отключает отправку Referer (иногда политика безопасности компании этого требует);
• во многих браузерах автоматически включает эффект noopener;
• может влиять на аналитику, так как принимающая сторона не увидит источник трафика.

Часто используется комбинация:

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

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

rel="nofollow"

Подсказывает поисковым системам не передавать ссылочный вес по ссылке.

<a href="https://partner-site.com"
   rel="nofollow">
  Партнерская ссылка
</a>
<!-- Поисковик может проигнорировать эту ссылку при ранжировании -->

Использование:

• рекламные ссылки;
• партнерские программы;
• комментарии пользователей, где вы не доверяете контенту.

Современные поисковики (Google, Яндекс) могут воспринимать nofollow как «подсказку», а не жесткий запрет, но использовать его по-прежнему стоит.

rel="sponsored"

Более точное значение, чем nofollow, для платных ссылок.

<a href="https://ad-site.com"
   rel="sponsored">
  Рекламное предложение
</a>

Рекомендуется для:

• нативной рекламы;
• ссылок, за которые вы получили денежное вознаграждение или бартер.

Часто комбинируется с nofollow:

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

rel="ugc"

ugc (User Generated Content) — ссылки из пользовательского контента.

<!-- Комментарий пользователя -->
<a href="https://unknown-site.com"
   rel="ugc nofollow">
  Сайт пользователя
</a>

Применяйте в:

• комментариях;
• форумах;
• отзывах.

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

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

rel="prev" и rel="next"

Обозначают соседние страницы в последовательности (пагинации).

<!-- На странице 2 -->
<a href="/articles?page=1" rel="prev">Предыдущая страница</a>
<a href="/articles?page=3" rel="next">Следующая страница</a>

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

• для вспомогательных средств;
• для некоторых алгоритмов анализа структуры.

rel="bookmark"

Помечает ссылку как постоянную ссылку на ресурс или запись (например, на пост в блоге).

<a href="https://example.com/blog/post-1"
   rel="bookmark">
  Пост о rel в HTML
</a>

Это семантическая подсказка: ссылка указывает на постоянный URL, который стабильно ведет на этот материал.

rel="author"

Указывает на страницу автора материала.

<a href="/authors/oleg-markov" rel="author">
  Автор материала
</a>

Некоторые системы и сервисы могут использовать это значение для связывания контента с профилем автора.

Значения rel для SEO и индексации

Сейчас давайте посмотрим на критически важные для SEO значения rel: canonical, alternate и связанные сценарии.

rel="canonical"

Указывает каноническую (основную) версию страницы при наличии дубликатов или очень похожего контента.

Пример в head:

<head>
  <link rel="canonical" href="https://example.com/catalog/shoes">
  <!-- Сообщаем поисковикам - основная версия страницы именно эта -->
</head>

Когда это нужно:

• у страницы есть параметры (sort, filter), но контент в целом одинаков;
• одна страница доступна по разным URL (например, с / и без /, с www и без);
• есть копии страниц для разных кампаний, но основной контент совпадает.

Типичный пример:

<!-- URL: https://example.com/catalog/shoes?sort=price_asc -->
<head>
  <link rel="canonical" href="https://example.com/catalog/shoes">
</head>

Обратите внимание:

• canonical — это рекомендация, а не жесткий редирект;
• указанный URL должен быть доступен и возвращать 200;
• желательно, чтобы каноничный URL указывал сам на себя (self canonical).

rel="alternate"

Используется для указания альтернативных версий страницы:

• другие языки;
• мобильная версия (устаревший подход, но вы могли его встретить).

Языковые версии

<head>
  <!-- Текущая страница на русском -->
  <link rel="alternate" href="https://example.com/ru/" hreflang="ru">
  <!-- Английская версия -->
  <link rel="alternate" href="https://example.com/en/" hreflang="en">
  <!-- Общая версия для всех языков (по желанию) -->
  <link rel="alternate" href="https://example.com/" hreflang="x-default">
</head>

Смотрите, в этом примере мы явно указываем поисковикам, какие версии страницы соответствуют каким языкам. Это помогает:

• правильно показывать версию страницы пользователям из разных стран;
• избежать дублей контента из-за переводов.

rel="nofollow" в контексте SEO

Мы уже смотрели nofollow с точки зрения поведения ссылок. Теперь уточним примеры типичных SEO-сценариев.

Когда имеет смысл ставить nofollow:

• платные ссылки (желательно вместе с sponsored);
• комментарии и форумные сообщения (вместе с ugc);
• любые внешние ссылки, которым вы не доверяете.

Когда не стоит ставить nofollow:

• на все исходящие ссылки без разбора;
• на внутренние ссылки в навигации;
• на важные страницы сайта (это мешает поисковым роботам правильно обходить сайт).

Значения rel для link и работы браузера

Теперь давайте перейдем к элементу link. Здесь rel управляет тем, как именно браузер работает с ресурсом.

Подключение стилей

rel="stylesheet"

Базовый случай:

<head>
  <link rel="stylesheet" href="/css/main.css">
  <!-- Подключаем основной CSS-файл -->
</head>

Браузер:

• понимает, что это таблица стилей;
• блокирует отрисовку до загрузки CSS (critical render path).

Иконки сайта

rel="icon" и rel="shortcut icon"

Обозначают фавикон (иконку вкладки).

<head>
  <link rel="icon" href="/favicon.ico" sizes="any">
  <!-- Современный способ указать иконку -->
</head>

Поддерживаются и другие варианты:

<head>
  <link rel="icon" type="image/svg+xml" href="/icon.svg">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <!-- Иконка для устройств Apple -->
</head>

Некоторые старые проекты до сих пор используют:

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

Но сейчас достаточно rel="icon".

Canonical и alternate в link

Мы уже посмотрели эти значения в кратком виде. Здесь еще один пример, где я комбинирую их в одном head:

<head>
  <!-- Канонический URL -->
  <link rel="canonical" href="https://example.com/product/123">

  <!-- Языковые версии -->
  <link rel="alternate" href="https://example.com/product/123" hreflang="en">
  <link rel="alternate" href="https://example.com/ru/product/123" hreflang="ru">
</head>

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

Оптимизация загрузки ресурсов

Сейчас давайте посмотрим значения rel, которые помогают ускорить сайт.

rel="preload"

Сообщает браузеру, что ресурс нужно загрузить как можно раньше, до того как он будет явно использован.

<head>
  <link rel="preload"
        href="/fonts/Roboto.woff2"
        as="font"
        type="font/woff2"
        crossorigin="anonymous">
  <!-- Предзагружаем шрифт до применения стилей -->
</head>

Особенности:

• обязательно указывайте атрибут as (font, script, style, image и т.п.);
• для CORS-ресурсов добавляйте crossorigin, чтобы браузер не загружал шрифт дважды.

Еще пример:

<head>
  <link rel="preload" href="/css/critical.css" as="style">
  <!-- Подгружаем критический CSS заранее -->
</head>

rel="prefetch"

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

<head>
  <link rel="prefetch" href="/next-page.html" as="document">
  <!-- Браузер загрузит страницу на фоне с низким приоритетом -->
</head>

Чем отличается от preload:

• preload — ресурс нужен очень скоро;
• prefetch — ресурс «возможно пригодится», можно подгружать на фоне.

rel="preconnect"

Ускоряет установку соединения с внешними ресурсами: DNS, TCP, TLS.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <!-- Экономим время на установку соединения -->
</head>

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

rel="dns-prefetch"

Менее мощная, но более легкая версия preconnect — браузер только заранее разрешает DNS.

<head>
  <link rel="dns-prefetch" href="//example-cdn.com">
  <!-- Браузер заранее узнает IP адрес домена -->
</head>

Часто используется совместно с preconnect:

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

rel="prerender" (устаревающее)

В некоторых браузерах использовалось для полной предварительной загрузки и отрисовки страницы.

<head>
  <link rel="prerender" href="https://example.com/next">
</head>

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

Множественные значения rel

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

Пример:

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer nofollow">
  Внешняя ссылка без передачи веса
</a>
<!-- Здесь три независимых значения rel:
     noopener - защита от перехвата вкладки
     noreferrer - не передаем Referer
     nofollow - ограничиваем передачу ссылочного веса -->

Давайте разберемся на примере с link:

<link rel="alternate stylesheet"
      href="/css/dark-theme.css"
      title="Темная тема">
<!-- alternate + stylesheet означают альтернативную таблицу стилей -->

Значения alternate и stylesheet вместе дают браузеру понять, что это не основная, а альтернативная тема.

Важно:

• не дублируйте взаимоисключающие значения;
• значения регистронезависимы, но по стандарту лучше писать в нижнем регистре;
• порядок значений обычно не имеет значения, но для читаемости придерживайтесь устойчивых комбинаций (например, "noopener noreferrer nofollow").

Частые практические сценарии использования rel

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

Безопасные внешние ссылки

<a href="https://external.com/article"
   target="_blank"
   rel="noopener noreferrer">
  Читать на внешнем сайте
</a>

Комментарий:

// target="_blank" - открываем в новой вкладке
// rel="noopener noreferrer" - защищаемся от перехвата и не передаем Referer

Рекламные и партнерские ссылки

<a href="https://partner.com/deal?id=123"
   target="_blank"
   rel="sponsored nofollow noopener noreferrer">
  Специальное предложение партнера
</a>

Комментарий:

// sponsored - явно помечаем ссылку как рекламную
// nofollow - не передаем ссылочный вес
// noopener noreferrer - защищаем вкладку и не передаем Referer

Навигация между соседними страницами

<nav class="pagination">
  <a href="/blog?page=1" rel="prev">Назад</a>
  <a href="/blog?page=3" rel="next">Вперед</a>
</nav>

Комментарий:

// rel="prev" и rel="next" помогают описать структуру пагинации

Канонизация страниц с параметрами

<head>
  <!-- URL: https://example.com/products?category=1&sort=price_asc -->
  <link rel="canonical" href="https://example.com/products?category=1">
</head>

Комментарий:

// Сообщаем поиску - основная страница для этого контента без параметра sort

Предзагрузка критичных ресурсов

<head>
  <!-- Предзагружаем критический CSS -->
  <link rel="preload" href="/css/critical.css" as="style">
  <!-- Подключаем его как обычный стиль -->
  <link rel="stylesheet" href="/css/critical.css">
</head>

Комментарий:

// preload помогает начать загрузку раньше
// stylesheet подключает CSS и применяет стили

Типичные ошибки при использовании rel

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

Ошибка 1. target="_blank" без noopener

<!-- Плохо -->
<a href="https://external.com" target="_blank">
  Открыть
</a>

Проблема:

// Новая вкладка может получить доступ к исходному окну через window.opener
// Потенциальный риск XSS и перехвата вкладки

Решение:

<a href="https://external.com"
   target="_blank"
   rel="noopener noreferrer">
  Открыть
</a>

Ошибка 2. Избыточное nofollow на внутренних ссылках

<!-- Плохо -->
<a href="/contacts" rel="nofollow">Контакты</a>

Проблема:

// Поисковый робот получает сигнал не следовать по этой ссылке
// Внутренняя индексация сайта может ухудшиться

Решение:

<a href="/contacts">Контакты</a>

Используйте nofollow только там, где это действительно нужно.

Ошибка 3. Неправильный canonical

<head>
  <!-- URL: https://example.com/page-1 -->
  <link rel="canonical" href="https://example.com/page-2">
</head>

Проблема:

// Если это разные по смыслу страницы, вы фактически «спрячете» page-1 от индексации

Рекомендация:

• canonical должен вести на страницу с тем же или почти тем же контентом;
• не ставьте все страницы на один и тот же canonical, если они различаются по смыслу.

Ошибка 4. Неуказанный as в preload

<!-- Плохо -->
<link rel="preload" href="/css/main.css">

Проблема:

// Браузер не знает тип ресурса
// Эффект preload может быть частично потерян

Правильно:

<link rel="preload" href="/css/main.css" as="style">

Ошибка 5. Смешивание несовместимых значений

<!-- Сомнительный пример -->
<a href="https://example.com"
   rel="nofollow sponsored ugc">
  Ссылка
</a>

Комментарий:

// Это ситуация, когда вы помечаете ссылку и как рекламную (sponsored)
// и как пользовательскую (ugc) одновременно
// Для поисковика это может быть противоречивый сигнал

Решение:

• определите, к какой категории реально относится ссылка;
• комбинируйте значения осознанно.

Заключение

Атрибут rel в HTML — это не просто «дополнительная опция» для ссылок и тега link. Через него вы:

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

Давайте кратко зафиксируем основные практические правила:

• Для всех внешних ссылок с target="_blank" добавляйте rel="noopener noreferrer".
• Для рекламных, партнерских и недоверенных ссылок используйте rel="sponsored" и/или rel="nofollow", а для пользовательского контента дополняйте rel="ugc".
• Для борьбы с дубликатами страниц применяйте rel="canonical" в head.
• Для языковых версий страниц используйте rel="alternate" с hreflang.
• Для ускорения загрузки используйте rel="preload", "prefetch", "preconnect" и "dns-prefetch" там, где это действительно дает эффект.

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

Частозадаваемые технические вопросы по теме и ответы

1. Нужно ли добавлять rel="noopener" если я уже использую rel="noreferrer"?

В большинстве современных браузеров rel="noreferrer" автоматически включает поведение noopener. Но ради ясности и лучшей читаемости кода рекомендуется указывать оба значения: rel="noopener noreferrer". Так вы не зависите от тонкостей реализации конкретного браузера.

2. Как задать rel динамически в JavaScript при генерации ссылок?

Вы можете устанавливать атрибут rel через свойство rel или setAttribute:

// Создаем ссылку
const link = document.createElement('a');
link.href = 'https://example.com';
link.target = '_blank';

// Добавляем безопасные значения rel
link.rel = 'noopener noreferrer'; // или link.setAttribute('rel', 'noopener noreferrer');

// Вставляем ссылку в DOM
document.body.appendChild(link);

Комментарии: // link.rel - удобный способ задать rel как строку
// setAttribute позволяет задать атрибут универсально, как и другие

3. Как проверить, что rel="canonical" работает корректно?

Пошагово:

1. Откройте страницу в браузере и проверьте наличие тега <link rel="canonical" ...> в head через DevTools.
2. Убедитесь, что указанный href:
   • открывается без редиректов (по возможности);
   • возвращает код ответа 200.
3. Воспользуйтесь инструментами вебмастеров (Google Search Console, Яндекс Вебмастер) — там можно посмотреть, какой URL поисковик считает каноническим.
4. Убедитесь, чтоcanonical не противоречит другим сигналам (редиректам, sitemap).

4. Можно ли использовать rel="preload" без последующего обычного подключения ресурса?

Не рекомендуется. preload только загружает ресурс заранее, но не применяет его. Например, для CSS вы все равно должны добавить <link rel="stylesheet">, для шрифтов — подключить их через @font-face в CSS. Иначе браузер загрузит файл, но он не будет использоваться.

5. Как правильно комбинировать rel="alternate" с hreflang и canonical при мультиязычном сайте?

Базовый шаблон:

1. На каждой языковой версии страницы:

   • ставьте <link rel="canonical" href="URL_этой_версии"> (self-canonical);
   • перечисляйте все языковые версии через <link rel="alternate" hreflang="...">, включая текущую.

2. Пример для страницы на русском:

<head>
  <link rel="canonical" href="https://example.com/ru/page">
  <link rel="alternate" href="https://example.com/ru/page" hreflang="ru">
  <link rel="alternate" href="https://example.com/en/page" hreflang="en">
  <link rel="alternate" href="https://example.com/" hreflang="x-default">
</head>

Так поисковики однозначно понимают, какая версия канонична и какие языки доступны.