Атрибут `rel`

Какое отношение эта ссылка имеет к текущей странице?

Время чтения: больше 15 мин

Кратко

Скопировано

Атрибут rel описывает как связаны текущая страница и подключаемый ресурс. Работает с <a>, <link> и <area>.

Для чего нужен атрибут `rel`

Скопировано

Определение типа ресурса: атрибут rel="stylesheet" указывает браузеру, что подключаемый файл — это таблица стилей. Например, <link rel="stylesheet" href="styles.css">.

Улучшение SEO: атрибут rel="nofollow" не позволяет поисковикам передавать «вес» страницы по ссылке. А rel="noopener" защищает от уязвимостей при открытии новых вкладок.

Ускорение загрузки: значение rel="preload" говорит браузеру заранее загрузить важные ресурсы, например, шрифты. Это уменьшает время отображения страницы.

Управление навигацией: раньше rel="next" и rel="prev" помогали поисковикам понимать последовательность страниц. Сейчас эти значения считаются устаревшими, но их всё ещё можно встретить.

Как пишется

Скопировано

Атрибут rel используется с тегами <link>, <a> и <area>. Значения можно комбинировать через пробел.

        
          
          <link rel="alternate stylesheet" href="night-theme.css">
          <link rel="alternate stylesheet" href="night-theme.css">

Значения

Скопировано

`alternate`

Скопировано

Указывает на альтернативную версию текущего документа.

Альтернативная таблица стилей (через <link>): позволяет выбрать другую тему оформления.

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

        
          
          <head>  <link rel="stylesheet" href="main.css">  <link rel="alternate stylesheet" href="dark.css" title="Тёмная тема">  <link rel="alternate stylesheet" href="large-fonts.css" title="Крупный текст"></head>
          <head>
  <link rel="stylesheet" href="main.css">
  <link rel="alternate stylesheet" href="dark.css" title="Тёмная тема">
  <link rel="alternate stylesheet" href="large-fonts.css" title="Крупный текст">
</head>

RSS и Atom-фиды (через <link>): когда значение alternate сочетается с type="application/rss+xml" или type="application/atom+xml", браузер и RSS-ридеры понимают, что элемент <link> указывает на ленту новостей (фид) для подписки.

Как это работает:

браузеры отображают иконку подписки в адресной строке;
RSS-ридеры автоматически обнаруживают фид для импорта;
атрибут title задаёт человекочитаемое название ленты.

        
          
          <head>  <!-- Atom-фид -->  <link    rel="alternate"    type="application/atom+xml"    href="https://ru.wikipedia.org/w/...feedformat=atom"    title="Википедия&nbsp;— Atom-лента">  <!-- RSS-фид -->  <link    rel="alternate"    type="application/rss+xml"    href="https://ria.ru/export/rss2/archive/index.xml"    title="RSS-лента"></head>
          <head>
  <!-- Atom-фид -->
  <link
    rel="alternate"
    type="application/atom+xml"
    href="https://ru.wikipedia.org/w/...feedformat=atom"
    title="Википедия&nbsp;— Atom-лента">

  <!-- RSS-фид -->
  <link
    rel="alternate"
    type="application/rss+xml"
    href="https://ria.ru/export/rss2/archive/index.xml"
    title="RSS-лента">
</head>

Языковые версии статьи: поисковик Google покажет испанскую версию статьи пользователям из Мексики, а английскую — из США.

        
          
          <head>  <link    rel="alternate"    hreflang="en"    href="https://globalscience.com/en/article-quantum-physics">  <link    rel="alternate"    hreflang="es"    href="https://globalscience.com/es/articulo-fisica-cuantica"></head>
          <head>
  <link
    rel="alternate"
    hreflang="en"
    href="https://globalscience.com/en/article-quantum-physics">
  <link
    rel="alternate"
    hreflang="es"
    href="https://globalscience.com/es/articulo-fisica-cuantica">
</head>

PDF-версия инструкции: пользователи сразу видят, что ссылка ведёт к документу, а не к другой странице сайта.

        
          
          <a href="/manual.pdf" rel="alternate" type="application/pdf">  Скачать инструкцию в PDF</a>
          <a href="/manual.pdf" rel="alternate" type="application/pdf">
  Скачать инструкцию в PDF
</a>

`author`

Скопировано

Показывает, где найти информацию об авторе страницы или статьи. Работает с тегами <link>, <a> и <area>.

Ссылка на автора (через <link>): добавляет метаинформацию об авторе всей страницы. Чаще всего используется с имейлом или профилем.

        
          
          <head>  <!-- Ссылка на страницу автора -->  <link rel="author" href="/about-igor">  <!-- Имейл для связи -->  <link rel="author" href="mailto:igor@example.com"></head>
          <head>
  <!-- Ссылка на страницу автора -->
  <link rel="author" href="/about-igor">

  <!-- Имейл для связи -->
  <link rel="author" href="mailto:igor@example.com">
</head>

Указание автора статьи (через <a>): если статья обёрнута в <article>, ссылка с rel="author" будет относиться к её автору. Иначе — к автору всей страницы.

        
          
          <!-- Автор статьи внутри <article> --><article>  <h1>Как вырастить авокадо</h1>  <p>    Автор:    <a href="/profile/anna" rel="author">      Анна Иванова    </a>  </p></article><!-- Имейл автора в подвале сайта --><footer>  <a href="mailto:contact@site.com" rel="author">    Написать автору  </a></footer>
          <!-- Автор статьи внутри <article> -->
<article>
  <h1>Как вырастить авокадо</h1>
  <p>
    Автор:
    <a href="/profile/anna" rel="author">
      Анна Иванова
    </a>
  </p>
</article>

<!-- Имейл автора в подвале сайта -->
<footer>
  <a href="mailto:contact@site.com" rel="author">
    Написать автору
  </a>
</footer>

`bookmark`

Скопировано

Атрибут rel="bookmark" используется с тегами <a> и <area>.

Создание постоянной ссылки: атрибут создаёт постоянную ссылку на определённую часть страницы. Такая ссылка обычно ведёт к ближайшему элементу <article>, если он есть. Если же <article> нет, ссылка будет вести к ближайшему разделу страницы.

        
          
          <!-- Ссылка на раздел без <article> --><section>  <h2>Советы по верстке</h2>  <p>Хотите узнать больше?    <a href="#details" rel="bookmark">      Читайте подробности.    </a>  </p></section><!-- Ссылка внутри <article> (запись блога) --><article id="post-1">  <h2>Как печь хлеб</h2>  <p>Рецепт...    <a href="#post-1" rel="bookmark">      Постоянная ссылка на эту запись.    </a>  </p></article>
          <!-- Ссылка на раздел без <article> -->
<section>
  <h2>Советы по верстке</h2>
  <p>Хотите узнать больше?
    <a href="#details" rel="bookmark">
      Читайте подробности.
    </a>
  </p>
</section>

<!-- Ссылка внутри <article> (запись блога) -->
<article id="post-1">
  <h2>Как печь хлеб</h2>
  <p>Рецепт...
    <a href="#post-1" rel="bookmark">
      Постоянная ссылка на эту запись.
    </a>
  </p>
</article>

`canonical`

Скопировано

Атрибут rel="canonical" помогает бороться с дублирующим контентом на сайте. Используется в теге <link>, чтобы указать поисковым системам каноническую (предпочтительную) версию страницы. Это важно для SEO, так как предотвращает «размытие» рейтинга между копиями контента.

Как это работает:

если у вас несколько URL с одинаковым содержимым (например, example.com/page и example.com/page?utm=1), каноническая ссылка сообщает поисковикам, какой URL считать основным;
может использоваться на разных доменах, например, если контент размещён на нескольких сайтах, можно выбрать один канонический источник;
поддерживает относительные и абсолютные пути.

Правила использования:

Контент должен совпадать, то есть каноническая страница обязана содержать тот же контент, что и текущая, иначе поисковики проигнорируют указание.
Одна каноническая ссылка на страницу. Несколько rel="canonical" запутает алгоритмы.
Канонический URL должен возвращать код 200 OK. Если он ведёт на страницу с ошибкой (например, 404), поисковики не смогут её обработать.
Относительные пути могут работать некорректно при копировании кода между страницами, поэтому лучше использовать абсолютные пути.

        
          
          <head>  <!-- Абсолютный URL -->  <link rel="canonical" href="https://example.com/main-page">  <!-- Относительный URL -->  <link rel="canonical" href="/main-page"></head>
          <head>
  <!-- Абсолютный URL -->
  <link rel="canonical" href="https://example.com/main-page">

  <!-- Относительный URL -->
  <link rel="canonical" href="/main-page">
</head>

`dns-prefetch`

Скопировано

Атрибут rel="dns-prefetch" помогает ускорить загрузку сайта. Используйте его в теге <link>, чтобы браузер заранее узнал IP-адрес домена. Это как сохранить номер телефона в быстром наборе — не придётся искать его, когда понадобится позвонить.

Как это работает:

DNS-запрос. Когда вы вводите адрес сайта (например, example.com), браузер ищет его IP-адрес через систему DNS.
Предзагрузка. С dns-prefetch браузер делает этот запрос заранее — ещё до того, как ресурс понадобится.
Экономия времени. Когда ресурс действительно понадобится (например, для загрузки шрифта), браузер уже знает, куда обращаться.

dns-prefetch полезно использовать для сайтов с внешними ресурсами, где шрифты, скрипты или изображения подключаются с других доменов, а также для мультимедийные страниц, чтобы видео или аудио с внешних платформ (YouTube, Vimeo) загружались быстрее. Полезно и для одностраничных приложений (SPA), чтобы предзагружать API-эндпоинты, которые понадобятся позже.

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

Подключение внешних ресурсов: ускоряет загрузку шрифтов, аналитики или виджетов.

        
          
          <head>  <!-- Предзагрузка DNS для Google Fonts -->  <link rel="dns-prefetch" href="https://fonts.googleapis.com">  <!-- Предзагрузка DNS для YouTube -->  <link rel="dns-prefetch" href="https://www.youtube.com"></head>
          <head>
  <!-- Предзагрузка DNS для Google Fonts -->
  <link rel="dns-prefetch" href="https://fonts.googleapis.com">

  <!-- Предзагрузка DNS для YouTube -->
  <link rel="dns-prefetch" href="https://www.youtube.com">
</head>

Относительные и абсолютные URL: можно указывать домен с протоколом или без.

        
          
          <head>  <!-- Без протокола -->  <link rel="dns-prefetch" href="//example.com">  <!-- С протоколом -->  <link rel="dns-prefetch" href="https://api.example.com"></head>
          <head>
  <!-- Без протокола -->
  <link rel="dns-prefetch" href="//example.com">

  <!-- С протоколом -->
  <link rel="dns-prefetch" href="https://api.example.com">
</head>

`expect`

Скопировано

Атрибут rel="expect" используется с элементами <link>, чтобы задержать отображение страницы до полной загрузки и обработки связанного ресурса. Это помогает избежать проблем, когда часть контента ещё не готова, а отрисовка страницы уже началась.

Когда браузер встречает <link rel="expect">, он:

Извлекает URL из атрибута href.
Проверяет корректность URL. Если что-то не так, отрисовка разблокируется.
Находит элемент, на который ссылается <link> (например, стили или скрипты).
Блокирует отрисовку, пока ресурс не загрузится и не будет обработан.

Условия блокировки:

документ ещё загружается (loading);
ресурс критически важен для отображения;
атрибут media соответствует текущим условиям (например, размер экрана).

Когда браузер реагирует на изменения?

при добавлении <link> в документ;
при изменении атрибутов href или media.

Здесь браузер задержит отрисовку, пока не загрузит critical-styles.css.

        
          
          <head>  <link rel="expect" href="critical-styles.css" media="screen"></head>
          <head>
  <link rel="expect" href="critical-styles.css" media="screen">
</head>

Если у элемента с rel="expect" меняются id или name, браузер:

Проверяет, не относится ли элемент к специальному типу, например, к элементам SVG или MathML.
Убедится, что элемент не обрабатывается в данный момент.
Обновляет связанные ресурсы (если это ссылка <a>).

`external`

Скопировано

Атрибут rel="external" используется с элементами <a>, <area> и <form>. Он не создает ссылку сам по себе, но помогает браузеру пометить ссылки как внешние — то есть, те, которые ведут на сайты, не связанные с текущим.

Когда у элемента есть атрибут rel="external", это означает, что ссылка ведет на внешний сайт. Это нужно чтобы пользователи сразу видели, что при переходе по ссылке они окажутся на другом сайте.

В примере ниже браузер поймёт, что ссылка ведет на внешний ресурс.

        
          
          <a href="https://www.wikipedia.org" rel="external">  Посетить Wikipedia</a>
          <a href="https://www.wikipedia.org" rel="external">
  Посетить Wikipedia
</a>

В этом примере ссылка на Unsplash помечена как внешняя с помощью атрибута rel="external".

        
          
          <figure>  <a    href="https://www.unsplash.com"    rel="external"    target="_blank">    <img      src="https://img.unsplash.com/photo-172"      alt="Willian Justen de Vasconcellos">    <figcaption>      Изображение с Unsplash    </figcaption>  </a></figure>
          <figure>
  <a
    href="https://www.unsplash.com"
    rel="external"
    target="_blank">
    <img
      src="https://img.unsplash.com/photo-172"
      alt="Willian Justen de Vasconcellos">
    <figcaption>
      Изображение с Unsplash
    </figcaption>
  </a>
</figure>

Здесь форма отправляет данные на сайт example.com, и это тоже помечается как внешняя ссылка с rel="external".

        
          
          <form action="https://www.example.com/submit" method="post" rel="external">  <label for="name">Имя:</label>  <input type="text" id="name" name="name">  <input type="submit" value="Отправить"></form>
          <form action="https://www.example.com/submit" method="post" rel="external">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Отправить">
</form>

`help`

Скопировано

Атрибут rel="help" используется с элементами <link>, <a>, <area> и <form>. Он обозначает ссылку на страницу с дополнительной информацией или помощью, которая может помочь пользователю разобраться с функциями на сайте.

По сути, это способ указать, что по клику на ссылку пользователь получит инструкции или подсказки. В некоторых браузерах ссылка c rel="help" может подсвечиваться или изменять курсор, чтобы пользователь понял, что это страница помощь.

Ссылка на помощь по теме: ссылка ведёт на страницу с дополнительной информацией о теме, которую пользователь вводит в поле. Кликнув по ссылке, он получит подсказки.

        
          
          <label>  Тема:  <input name="topic">  <a href="help/topic.html" rel="help">Помощь</a></label>
          <label>
  Тема:
  <input name="topic">
  <a href="help/topic.html" rel="help">Помощь</a>
</label>

Ссылка на помощь по заполнению формы: ссылка ведёт на страницу, которая объяснит, как правильно заполнить форму. Это полезно для тех, кто может не понять, что именно нужно ввести.

        
          
          <form>  <label for="name">Имя:</label>  <input type="text" id="name" name="name">  <a href="help/form_help.html" rel="help">Помощь с формой</a>  <button type="submit">Отправить</button></form>
          <form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">

  <a href="help/form_help.html" rel="help">Помощь с формой</a>

  <button type="submit">Отправить</button>
</form>

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

        
          
          <ul>  <li>    <a href="help/site_navigation.html" rel="help">      Помощь с навигацией    </a>  </li>  <li>    <a href="help/content.html" rel="help">      Помощь с содержимым    </a>  </li></ul>
          <ul>
  <li>
    <a href="help/site_navigation.html" rel="help">
      Помощь с навигацией
    </a>
  </li>
  <li>
    <a href="help/content.html" rel="help">
      Помощь с содержимым
    </a>
  </li>
</ul>

`icon`

Скопировано

Атрибут rel="icon" — это способ сообщить браузеру, где взять иконку для страницы. Используется вместе с тегом <link> и помогает подключить внешний ресурс с фавиконом. При этом можно задать разные форматы и размеры при помощи атрибута sizes, чтобы иконка выглядела хорошо на любом устройстве.

Значения в атрибуте sizes указывают реальные размеры (сырые пиксели), а не те, что заданы в CSS. Например, для ретина-экранов, где 1 CSS-пиксель равен 2 сырым, иконка шириной 50 пикселей должна иметь фактическую ширину 100 пикселей. Если ресурс представляет собой масштабируемую иконку (например, SVG), используйте значение any.

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

        
          
          <head>  <link    rel="icon"    href="favicon.png"    sizes="16x16"    type="image/png">  <link    rel="icon"    href="windows.ico"    sizes="32x32 48x48"    type="image/vnd.microsoft.icon">  <link    rel="icon"    href="mac.icns"    sizes="128x128 512x512 8192x8192 32768x32768">  <link    rel="icon"    href="iphone.png"    sizes="57x57"    type="image/png">  <link    rel="icon"    href="gnome.svg"    sizes="any"    type="image/svg+xml"></head>
          <head>
  <link
    rel="icon"
    href="favicon.png"
    sizes="16x16"
    type="image/png">
  <link
    rel="icon"
    href="windows.ico"
    sizes="32x32 48x48"
    type="image/vnd.microsoft.icon">
  <link
    rel="icon"
    href="mac.icns"
    sizes="128x128 512x512 8192x8192 32768x32768">
  <link
    rel="icon"
    href="iphone.png"
    sizes="57x57"
    type="image/png">
  <link
    rel="icon"
    href="gnome.svg"
    sizes="any"
    type="image/svg+xml">
</head>

`license`

Скопировано

rel="license" используется для создания ссылки на документ с условиями лицензии. Его можно применять с элементами <link>, <a>, <area> и <form>. Такая ссылка указывая на документ с условиями авторского права.

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

        
          
          <figure>  <img src="/pix/39627052_fd8dcd98b5.jpg" alt="Kissat">  <figcaption>Kissat</figcaption></figure><a  rel="license"  href="http://www.opensource.org/licenses/mit-license.php">  Лицензия MIT</a>
          <figure>
  <img src="/pix/39627052_fd8dcd98b5.jpg" alt="Kissat">
  <figcaption>Kissat</figcaption>
</figure>
<a
  rel="license"
  href="http://www.opensource.org/licenses/mit-license.php">
  Лицензия MIT
</a>

`manifest`

Скопировано

Атрибут rel="manifest" применяется вместе с тегом <link> для указания на файл-манифест, который содержит метаданные, связанные с текущей страницей. Такой файл чаще всего используется в веб-приложениях для настройки работы в автономном режиме и определения внешнего вида приложения.

Манифест — это JSON-файл с информацией о приложении. Файл манифеста определяет, какие ресурсы должны быть кэшированы, а также задаёт информацию для установки веб-приложения на устройство (например, значки и название).

        
          
          <head>  <link rel="manifest" href="/manifest.json"></head>
          <head>
  <link rel="manifest" href="/manifest.json">
</head>

`modulepreload`

Скопировано

Атрибут rel="modulepreload" используется с тегом <link> для предварительной загрузки модульных скриптов. Это позволяет браузеру заранее скачать указанные модули, чтобы они были готовы к использованию в момент их вызова, что ускоряет запуск приложения.

        
          
          <!DOCTYPE html><head>  <link rel="modulepreload" href="app.mjs">  <link rel="modulepreload" href="awesome-viewer.mjs"></head><body>  <script type="module" src="app.mjs"></script>  <button onclick="import('./awesome-viewer.mjs').then(m => m.view())">    Просмотр удивительной вещи  </button></body></html>
          <!DOCTYPE html>
<head>
  <link rel="modulepreload" href="app.mjs">
  <link rel="modulepreload" href="awesome-viewer.mjs">
</head>
<body>
  <script type="module" src="app.mjs"></script>
  <button onclick="import('./awesome-viewer.mjs').then(m => m.view())">
    Просмотр удивительной вещи
  </button>
</body>
</html>

Браузер загружает модули app.mjs и awesome-viewer.mjs ещё до их непосредственного использования. Это гарантирует, что когда скрипт app.mjs начнёт выполняться, все необходимые модули и зависимости уже будут в наличии.

Если один модуль зависит от другого, предварительная загрузка помогает уменьшить количество сетевых запросов и сократить задержку при выполнении кода. Кроме того, если используется динамический импорт, как в случае с import('./awesome-viewer.mjs'), модуль уже будет загружен, что обеспечивает плавный пользовательский опыт.

`nofollow`

Скопировано

Атрибут rel="nofollow" используется с элементами <a>, <area> и <form>. Он не создаёт новую ссылку, а помечает уже существующие, сигнализируя поисковикам, что ссылка не поддерживается автором или издателем страницы. Это может быть полезно, если ссылка добавлена по коммерческим причинам или по другим причинам, не связанным с рекомендацией контента.

В этом примере ссылка на сайт example.com помечена как nofollow, что означает отсутствие поддержки данного ресурса автором страницы.

        
          
          <p>  Смотрите этот  <a href="https://example.com" rel="nofollow">    внешний сайт  </a>  для дополнительной информации.</p>
          <p>
  Смотрите этот
  <a href="https://example.com" rel="nofollow">
    внешний сайт
  </a>
  для дополнительной информации.
</p>

Здесь ссылка на сомнительный сайт также помечена nofollow, чтобы показать, что её содержимое не рекомендуется.

        
          
          <p>  <a href="https://spammy-site.com" rel="nofollow">    Ссылка на сомнительный сайт  </a></p>
          <p>
  <a href="https://spammy-site.com" rel="nofollow">
    Ссылка на сомнительный сайт
  </a>
</p>

Значение nofollow помогает контролировать передачу ссылочного веса, особенно если на странице присутствуют ссылки на ненадёжные ресурсы. Это улучшает SEO. nofollow часто используется для ссылок в комментариях или на сторонних ресурсах, что помогает снизить влияние спам-ссылок на репутацию сайта. Также это значение указывает, что ссылки могут быть размещены по партнерским или рекламным соглашениям, а не на основе качества контента.

`noopener`

Скопировано

Атрибут rel="noopener" используется с элементами <a>, <area> и <form>. Он не создаёт новую ссылку, а добавляет уже существующим ссылкам дополнительное свойство безопасности.

Когда вы открываете ссылку с target="_blank", браузер создаёт новую вкладку или окно. Без noopener эта новая страница получает доступ к объекту window.opener — ссылке на исходную страницу. Это может позволить злоумышленникам вмешаться в работу вашего сайта. Добавив rel="noopener", вы гарантируете, что новая вкладка не сможет получить такой доступ.

Здесь добавление rel="noopener" защищает вашу страницу, не позволяя новой вкладке получить доступ к window.opener.

        
          
          <a href="https://example.com" target="_blank" rel="noopener">  Перейти на Example.com</a>
          <a href="https://example.com" target="_blank" rel="noopener">
  Перейти на Example.com
</a>

`noreferrer`

Скопировано

Атрибут rel="noreferrer" используется с элементами <a>, <area> и <form>. Он не создаёт новую ссылку, а дополняет уже существующую, изменяя её поведение.

При переходе по ссылке с этим атрибутом браузер не передаёт информацию о реферере — то есть, сайт, на который ведёт ссылка, не узнает, с какого URL пришёл пользователь. Это помогает защитить данные о трафике и источнике перехода.
Кроме того, поведение noreferrer включает функциональность noopener: новая страница не получает доступа к объекту window.opener исходной страницы, что снижает риск потенциальных атак.

Здесь при открытии ссылки информация о реферере не будет передана, а доступ к window.opener будет заблокирован.

        
          
          <a href="https://example.com" target="_blank" rel="noreferrer">  Перейти на Example.com</a>
          <a href="https://example.com" target="_blank" rel="noreferrer">
  Перейти на Example.com
</a>

Этот вариант дублирует защитное поведение — ссылка не передаст данные о реферере и не позволит новой странице управлять исходной.

        
          
          <a href="https://example.com" target="_blank" rel="noreferrer noopener">  Перейти на Example.com</a>
          <a href="https://example.com" target="_blank" rel="noreferrer noopener">
  Перейти на Example.com
</a>

`opener`

Скопировано

Атрибут rel="opener" используется с элементами <a>, <area> и <form>. Он сообщает браузеру, что новая вкладка или окно, открываемые по ссылке, должны иметь доступ к родительской странице — то есть, к странице, с которой пользователь перешёл по ссылке.

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

В этом примере при клике по ссылке страница help.html откроется в новой вкладке, которая сможет взаимодействовать с родительской страницей.

        
          
          <a href="help.html" rel="opener" target="_blank">  Помощь!</a>
          <a href="help.html" rel="opener" target="_blank">
  Помощь!
</a>

`pingback`

Скопировано

Атрибут rel="pingback" используется с элементом <link> для создания ссылки на внешний ресурс, который принимает уведомления о том, что контент с вашей страницы был упомянут на другом сайте.

Когда другой ресурс ссылается на ваш контент, система может автоматически отправить запрос по указанному URL. Это уведомление помогает информировать автора о том, что его материал используется где-то ещё.

В этом примере URL example.com/pingback получает уведомление, если контент текущей страницы упоминается на других ресурсах. Такой механизм удобен для поддержания связи между сайтами и позволяет авторам быть в курсе, где их материалы находят применение.

        
          
          <head>  <link rel="pingback" href="http://example.com/pingback"></head>
          <head>
  <link rel="pingback" href="http://example.com/pingback">
</head>

`preconnect`

Скопировано

Атрибут rel="preconnect" используется с элементом <link> для предварительной установки соединения с указанным ресурсом. Это помогает уменьшить задержки при загрузке, если браузер предвидит, что ресурс понадобится пользователю.

При обнаружении ссылки с rel="preconnect" браузер начинает установку соединения до фактического запроса ресурса. Этот процесс включает в себя:

разрешение DNS для указанного домена;
установление TCP-соединения;
выполнение TLS-рукопожатия для HTTPS-соединений.

Использование preconnect позволяет ускорить загрузку ресурсов, так как соединение уже установлено, когда браузеру потребуется обратиться к серверу.

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

`prefetch`

Скопировано

Атрибут rel="prefetch" используется с элементом <link> для предварительной загрузки и кэширования ресурсов, которые могут понадобиться пользователю в ближайшем будущем.

Когда браузер встречает <link rel="prefetch">, он загружает указанный ресурс в фоновом режиме с низким приоритетом. Это не влияет на производительность текущей страницы, но ускоряет загрузку при последующем обращении к ресурсу.

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

        
          
          <head>  <link rel="prefetch" href="https://example.com/future-resource"></head>
          <head>
  <link rel="prefetch" href="https://example.com/future-resource">
</head>

`preload`

Скопировано

Атрибут rel="preload" используется с элементами <link> для предварительной загрузки ресурсов, которые с высокой вероятностью понадобятся во время текущей сессии.

Когда браузер обнаруживает <link rel="preload">, он начинает загружать указанный ресурс в фоновом режиме с высоким приоритетом. Это помогает ускорить рендеринг страницы, так как ресурс уже загружен к моменту его фактического использования, и улучшить производительность, особенно на страницах с большими файлами.

В этом примере используется атрибут as, которые указывает тип загружаемого ресурса (style, script, font, image, video и так далее). В итоге браузер загружает ресурс, но не применяет его, пока он не понадобится.

Важно: rel="preload" требует правильного указания атрибута as, иначе браузер может игнорировать загрузку.

        
          
          <head>  <link rel="preload" href="styles.css" as="style">  <link rel="preload" href="script.js" as="script">  <link    rel="preload"    href="font.woff2"    as="font" type="font/woff2"    crossorigin="anonymous"></head>
          <head>
  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="script.js" as="script">
  <link
    rel="preload"
    href="font.woff2"
    as="font" type="font/woff2"
    crossorigin="anonymous">
</head>

`search`

Скопировано

Атрибут rel="search" используется с элементами <link>, <a>, <area> и <form> для указания на документ, который предоставляет интерфейс для поиска по текущему сайту и связанным ресурсам.

<link> c rel="search" сообщает браузеру о наличии поискового механизма на сайте. Если браузер поддерживает OpenSearch, он может предложить пользователю добавить поиск по сайту в список доступных поисковых систем.

        
          
          <head>  <link    rel="search"    type="application/opensearchdescription+xml"    href="/search.xml"    title="Поиск по сайту"></head>
          <head>
  <link
    rel="search"
    type="application/opensearchdescription+xml"
    href="/search.xml"
    title="Поиск по сайту">
</head>

`stylesheet`

Скопировано

Атрибут rel="stylesheet" используется с элементами <link> для подключения внешней таблицы стилей CSS.

Как это работает:

указывает, что ресурс является таблицей стилей;
указывает браузеру приостановить отрисовку страницы, пока стили не будут загружены и обработаны;
позволяет не указывать type="text/css", так как тип MIME по умолчанию интерпретируется text/css;
поддерживает указание альтернативных таблицы стилей при помощи атрибутов title и alternate.

Простое подключение CSS:

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

Если необходимо предложить несколько вариантов оформления:

        
          
          <head>  <link    rel="stylesheet"    href="light-theme.css"    title="Светлая тема">  <link    rel="stylesheet"    href="dark-theme.css"    title="Темная тема"    alternate></head>
          <head>
  <link
    rel="stylesheet"
    href="light-theme.css"
    title="Светлая тема">
  <link
    rel="stylesheet"
    href="dark-theme.css"
    title="Темная тема"
    alternate>
</head>

Если некритичный CSS должен загружаться без блокировки рендеринга:

        
          
          <head>  <link    rel="preload"    href="styles.css"    as="style"    onload="this.rel='stylesheet'"></head>
          <head>
  <link
    rel="preload"
    href="styles.css"
    as="style"
    onload="this.rel='stylesheet'">
</head>

`tag`

Скопировано

Атрибут rel="tag" используется в элементах <a> и <area> для указания, что связанный документ относится к определенной категории или тегу, который характеризует текущий документ.

Как это работает:

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

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

        
          
          <footer>  Теги:  <a rel="tag" href="https://example.com/tag/technology">    Технологии  </a></footer>
          <footer>
  Теги:
  <a rel="tag" href="https://example.com/tag/technology">
    Технологии
  </a>
</footer>

Эта ссылка указывает, что текущая страница связана с тегом «JavaScript».

        
          
          <p>Другие статьи по теме:  <a rel="tag" href="https://example.com/tag/javascript">    JavaScript  </a></p>
          <p>Другие статьи по теме:
  <a rel="tag" href="https://example.com/tag/javascript">
    JavaScript
  </a>
</p>

`terms-of-service`

Скопировано

Атрибут rel="terms-of-service" используется в элементах <link>, <a> и <area> для обозначения ссылки на документ с условиями использования (Terms of Service, ToS).

Как это работает:

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

В этом случае ссылка ведёт на страницу с условиями использования, а рядом размещена политика конфиденциальности.

        
          
          <footer>  <a rel="terms-of-service" href="/terms">    Условия использования  </a>  <a rel="privacy-policy" href="/privacy">    Политика конфиденциальности  </a></footer>
          <footer>
  <a rel="terms-of-service" href="/terms">
    Условия использования
  </a>
  <a rel="privacy-policy" href="/privacy">
    Политика конфиденциальности
  </a>
</footer>

`next` и `prev`

Скопировано

Некоторые документы образуют последовательность, в которой каждый документ может иметь предыдущего и следующего «соседа». Документ без предыдущего элемента — это начало последовательности, а документ без следующего — её конец. Один и тот же документ может принадлежать сразу нескольким последовательностям.

Тип ссылки next: атрибут rel="next" можно использовать в элементах <link>, <a>, <area> и <form>. Ключевое слово next указывает, что текущий документ является частью последовательности, а ссылка ведёт к следующему документу.

        
          
          <head>  <link rel="next" href="document2.html"></head><body>  <a rel="next" href="document2.html">    Следующий документ  </a></body>
          <head>
  <link rel="next" href="document2.html">
</head>
<body>
  <a rel="next" href="document2.html">
    Следующий документ
  </a>
</body>

Тип ссылки prev: так же, как и next, может использоваться в <link>, <a>, <area> и <form>. Ключевое слово prev обозначает, что текущий документ связан с предыдущим документом в последовательности.

        
          
          <head>  <link rel="prev" href="document1.html"></head><body>  <a rel="prev" href="document1.html">    Предыдущий документ  </a></body>
          <head>
  <link rel="prev" href="document1.html">
</head>
<body>
  <a rel="prev" href="document1.html">
    Предыдущий документ
  </a>
</body>

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

Кратко

Для чего нужен атрибут rel

Как пишется

Значения

alternate

author

bookmark

canonical

dns-prefetch

expect

external

help

icon

license

manifest

modulepreload

nofollow

noopener

noreferrer

opener

pingback

preconnect

prefetch

preload

search

stylesheet

tag

terms-of-service

next и prev

Читайте также

<link>

Поисковая оптимизация для начинающих

Атрибуты defer и async

Для чего нужен атрибут `rel`

`alternate`

`author`

`bookmark`

`canonical`

`dns-prefetch`

`expect`

`external`

`help`

`icon`

`license`

`manifest`

`modulepreload`

`nofollow`

`noopener`

`noreferrer`

`opener`

`pingback`

`preconnect`

`prefetch`

`preload`

`search`

`stylesheet`

`tag`

`terms-of-service`

`next` и `prev`

`<link>`

Атрибуты `defer` и `async`