Html link rel: Атрибут rel | htmlbook.ru — Эксперт — интернет-магазин электроники и бытовой техники

Содержание

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.

Синтаксис

HTML	`<head> <link атрибуты> </head>`
XHTML	`<head> <link атрибуты /> </head>`

Атрибуты

charset: Кодировка связываемого документа.
href: Путь к связываемому файлу.
media: Определяет устройство, для которого следует применять стилевое оформление.
rel: Определяет отношения между текущим документом и файлом, на который делается ссылка.
sizes: Указывает размер иконок для визуального отображения.
type: MIME-тип данных подключаемого файла.

Также для этого тега доступны универсальные атрибуты.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
  <head>
   <meta charset="utf-8">
   <title>Тег LINK</title>  
   <link rel="stylesheet" href="ie.css">
   <link rel="alternate" type="application/rss+xml" 
     title="Статьи с сайта htmlbook.ru" href="http://htmlbook.ru/rss.xml"> 
   <link rel="shortcut icon" href="http://htmlbook.ru/favicon.ico">
  </head> 
  <body>
    <p>...</p>
  </body>
</html>

В данном примере подключается внешний файл со стилями с помощью атрибута rel=»stylesheet» тега <link>, указывается RSS-документ текущего сайта (link rel=»alternate» type=»application/rss+xml») и устанавливается иконка сайта в адресной строке браузера (link rel=»shortcut icon»).

Атрибут media | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Синтаксис

HTML	`<link media="all\|braille\|handheld\|print\|screen\|speech\|projection\|tty\|tv">`
XHTML	`<link media="all\|braille\|handheld\|print\|screen\|speech\|projection\|tty\|tv" />`

Значения

all: Все устройства.
braille: Устройства, основанные на системе Брайля, предназначены для слепых людей.
handheld: Наладонники, смартфоны, устройства с малой шириной экрана.
print: Печатающее устройство вроде принтера.
screen: Экран монитора.
speech: Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
projection: Проектор.
tty: Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пикселы в качестве единиц измерения.
tv: Телевизор.

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение по умолчанию

all

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

: Элемент — ссылка на внешний ресурс — HTML

Элемент HTML — Ссылка на Внешний Ресурс (<link>) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле «favicon», так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.

Чтобы подключить таблицу стилей, вы должны включить элемент <link> внутри вашего <head> следующим образом:

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

В этом простом примере указывается путь к таблице стилей внутри атрибута href и атрибут

rel со значением stylesheet. rel означает «отношения (relationship)», и, вероятно, является одной из ключевых особенностей элемента <link> — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике типы ссылок, есть много различных видов отношений.

Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:

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

Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:

<link rel="apple-touch-icon-precomposed"
      href="apple-icon-114.png" type="image/png">

Атрибут sizes определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.

Вы можете, также, указать медиа тип или запрос внутри атрибута media; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

В элемент <link> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:

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

Значение rel — preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel=»preload» для более подробной информации), атрибут

as указывает на определённый класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса CORS.

Другие замечания по использованию:

Элемент <link> может присутствовать в элементах <head> или <body>, в зависимости от того, имеет ли он тип ссылки, являющейся body-ok. Например, ссылка типа stylesheet является body-ok,и, поэтому, <link rel="stylesheet"> допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <link> от содержимого body, помещая их в <head>.
При использовании <link> для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что img-src директива заголовка Content-Security-Policy (en-US) не препятствует доступу к ней.
Спецификации HTML и XHTML определяют обработчики событий для элемента <link>, но не указывают как они будут использоваться.
В XHTML 1.0, пустые элементы, такие как <link>, требуют слеш: <link />.
WebTV поддерживает использование значения next для rel в качестве предварительной загрузки следующей страницы в серии документов.

Этот элемент включает в себя глобальные атрибуты.

as

Этот атрибут используется только для элементов <link> с атрибутом rel="preload" или rel="prefetch".

Он указывает тип контента, загружаемого <link>, который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного Accept запрашиваемого заголовка.

crossorigin

Этот перечисляемый атрибут указывает, должен ли CORS использоваться при загрузки ресурса. CORS-поддерживаемые изображения могут быть повторно использованы в элементе <canvas> не искажая их. Допустимы значения:

anonymous: Cross-origin запрос (т.е. с HTTP-заголовком Origin) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка Access-Control-Allow-Origin), изображение будет искажено, а его использование ограничено.
use-credentials: Cross-origin запрос (т. е. с HTTP-заголовком Origin) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок Access-Control-Allow-Credentials (en-US)), ресурс будет искажён, а его использование ограничено.

Если атрибут отсутствует, ресурс загружается без запроса CORS (т.е. без отправки HTTP-заголовка Origin), предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова anonymous. Для получения дополнительной информации смотрите CORS settings attributes.

href

Этот атрибут определяет URL, связываемого ресурса. URL может быть абсолютным или относительным.

hreflang

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

Используйте этот атрибут только если присутствуют атрибуты href.

importance

Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:

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

high: указывает браузеру, что ресурс находится в высоком приоритете.

low: указывает браузеру, что ресурс находится в низком приоритете.

Примечание: Атрибут importance можно использовать только для элементов <link> с атрибутами rel="preload" или rel="prefetch".

integrity

Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки.

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

media

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

Примечания:

В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print, screen, aural, braille. HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.

referrerpolicy

Строка, указывающая какой реферер использовать при загрузки ресурсов:

no-referrer означает, что заголовок Referer не будет отправлен.
no-referrer-when-downgrade означает, что заголовок Referer не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.
origin означает, что реферером будет источник, который соответствует схеме, хосту и порту.
origin-when-cross-origin означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .
unsafe-url означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищённых ресурсов в незащищённые источники.

rel

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

sizes

Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если rel содержит значение icon или нестандартный тип, например apple-touch-icon Apple. Может иметь следующие значения:

any, означает, что иконка может быть масштабируема до любого размера, например в векторном формате image/svg+xml.
пробелоразделенный список размеров, каждый в формате <width in pixels>x<height in pixels> или <width in pixels>X<height in pixels>. Каждый из этих размеров должен содержаться в ресурсе.

Примечание: Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего sizes содержит только одну запись. MS’s ICO формат, как и Apple’s ICNS. ICO более распространены; вы должны использовать их.

title

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

type

Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как text/html, text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, text/css), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок rel="preload", чтобы браузер загружал только те типы файлов, которые он поддерживает.

Нестандартные атрибуты

disabled: Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.
Примечание: Хотя в стандарте HTML нет атрибута disabled, атрибут disabled есть в объекте DOM HTMLLinkElement.
methods: Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту title) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.
prefetch Secure context: Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.
target: Определяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса.

Устаревшие атрибуты

charset Этот API вышел из употребления и его работа больше не гарантируется.

Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в RFC 2045. Значение по умолчанию iso-8859-1. Примечание по использованию: Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок Content-Type на связываемый ресурс.

rev Этот API вышел из употребления и его работа больше не гарантируется.

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

Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит.

Взамен, вы должны использовать атрибут rel с противоположным значением типов ссылки. Например, чтобы установить обратную ссылку для made, укажите author. Также, этот атрибут не означает «ревизия» и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.

Элемент <link> не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться.

Включение таблицы стилей

Включение таблицы стилей на страницы имеет следующий синтаксис:

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

Предоставление альтернативных таблиц стилей

Вы можете указать альтернативные таблицы стилей.

Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

Предоставление иконок для различных контекстов использования

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


<link rel="apple-touch-icon-precomposed" href="favicon144.png">

<link rel="apple-touch-icon-precomposed" href="favicon114.png">

<link rel="apple-touch-icon-precomposed" href="favicon72.png">

<link rel="apple-touch-icon-precomposed" href="favicon57.png">

<link rel="icon" href="favicon32.png">

Условная загрузка ресурсов с медиавыражениями

Вы можете предоставить тип медиа или запрос внутри атрибута media; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

События загрузки таблицы стилей

Вы можете определить, когда таблица стилей была загружена, наблюдая за событием load, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием error:

<script>
var myStylesheet = document. querySelector('#my-stylesheet');

myStylesheet.onload = function() {
  
}

myStylesheet.onerror = function() {
  console.log("An error occurred loading the stylesheet!");
}
</script>

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

Примечание: Событие load запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.

Preload примеры

BCD tables only load in the browser

Об HTML-элементе link

Элемент link HTML содержит связанную с документом информацию: альтернативные версии, авторы, авторские лицензии, иконки и т.д. Он должен содержать атрибут rel или itemprop, но не оба сразу. Атрибут href также является обязательным.

Когда атрибут itemprop отсутствует, этот элемент может быть объявлен только в разделе head. В противном случае он может быть объявлен в другом месте.

В следующем примере предоставляется информация о документе с помощью HTML-элемента link с различными типами гиперссылок (в частности, link rel=»stylesheet», используемый для указания ссылки на таблицу CSS-стилей):

<!DOCTYPE html>

<html>

  <head>

    <title>Фильм "Звездные войны: Новая надежда"</title>

    <link rel="license" href="copyright. html">

    <link rel="next" href="the-empire-strikes-back.html">

    <link rel="search" href="movies-search.html">

    <link rel="alternate" hreflang="es" href="es/una-nueva-esperanza.html">

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

    <link rel="stylesheet alternate" media="print" href="print.css">

    <link rel="icon" href="a-new-hope-16.png">

  </head>

  <body>

    <h2>Новая надежда</h2>

    <p>После падения демократии и восстановления империи надежда была утеряна...</p>

  </body>

</html>

Этот атрибут тега link в HTML содержит адрес (URI) связанного ссылкой ресурса. Он указывает браузеру, куда переходить по ссылке.

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

Пример

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

Указывает, должен ли запрос к внешнему серверу предоставлять учетные данные CORS или нет. Допустимы два значения (без учета регистра):

anonymous: CORS запросы к элементу будут содержать установленный флаг «omit credentials«;
use-credentials: CORS запросы к элементу не будут содержать установленный флаг «omit credentials«.

Пример

<link rel="icon" href="http://www.otherserver.com/icons/default.png" crossorigin="anonymous">

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

Элемент link должен содержать либо атрибут rel, либо атрибут itemprop, но не оба сразу. Атрибут href также является обязательным.

Пример

<link rel="prev" href="article1.html"> 
<link rel="next" href="article3.html"> 
<link rel="license" href="copyright.html"> 
<link rel="alternate" href="spanish-version.html" hreflang="es">

Список медиа-запросов с указанием типов медиа (и их характеристик), для которых предназначен связанный ссылкой ресурс. Например, документ или ресурс может быть оптимизирован для печати (меньше цветов, изображений и фоновых тонов), под мобильные устройства или обычные экраны. Значение по умолчанию -«all«.

Пример

<link rel="alternate" href="printer-version.html" media="print">

Этот HTML link tag указывает язык, который будет использоваться в связанном ссылкой ресурсе (указан в атрибуте HREF).

Пример

<link rel="alternate" hreflang="es" href="spanish-version.html">

Тип контента (или Internet Media Type), который должен содержать связанный ресурс.

Пример

<link rel="icon" href="icon.png" type="image/png"> 
<link rel="next" href="article2.html" type="text/html">

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

Этот атрибут тега link в HTML должен объявляться только, когда присутствует атрибут rel и он имеет значение «icon«. Иначе ситуации его использование является недействительным.

Пример

<link rel="icon" href="icon.ico"> <link rel="icon" href="icon.svg">

Кодировка символов целевого ресурса. Этот атрибут является устаревшим и в HTML5 уже не используется. Вместо него разработчикам рекомендуется использовать HTTP-заголовки Content-Type, чтобы предоставить информацию о наборах символов в документах и других ресурсах.

Пример

<link rel="next" href="article2.html" charset="utf-8">

Значение текущего документа (содержащего ссылку) для связанного ссылкой ресурса.

Этот атрибут HTML link tag является устаревшим и в HTML5 уже не используется. Разработчикам рекомендуется заменить его атрибутом rel.

Пример

<link rev="index" href="article1.html"> 
<link rev="index" href="article2.html"> 
<link rev="index" href="article3.html">

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

Вадим Дворниковавтор-переводчик статьи «LINK ELEMENT»

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

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

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

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

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

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

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

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

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

rel=nofollow

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

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

rel=canonical

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

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

Подробнее об использовании rel=canonical в нашей статье о комплексном аудите сайта.

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>        
<label for="comment">Ваш комментарий:</label>    
<textarea></textarea>        
<input type="submit" value="Оставить комментарий">        
<a rel="help" href="comments.html">Помощь по комментариям</a>    
</form>

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

rel=license

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

<a rel="license" href="license.html">Лицензионное соглашение</a>

rel=dns-prefetch, preconnect, prefetch, preload

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

<a rel="prefetch" href="license.html">Важная информация!</a>

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

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" type="image/png">

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

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

rel (атрибут HTML) — CoderLessons.com

Описание

Атрибут rel В большинстве случаев этим ресурсом будет просто « stylesheetrel="alternate stylesheet" Фактически, вы можете определить несколько альтернативных стилей, хотя основная проблема этого подхода заключается в том, чтобы дать понять пользователю, что доступна альтернативная таблица стилей. В Firefox вы можете выбрать «Просмотр»> «Стиль страницы» и выбрать одну из доступных таблиц стилей в продаже, но в любом браузере нет явных указаний на то, что эти альтернативы существуют — обычно разработчик должен предоставить какой-то переключатель стиля на основе JavaScript, который визуализирует как элемент управления на странице. Следующая разметка показывает страницу, которая имеет одну основную таблицу стилей и две альтернативы:

 <link rel = "stylesheet" href = "main.css"
     type = "text / css" media = "screen" />
 <link rel = " alternate stylesheet" title = "Более высокая контрастность"
     href = "контраст.css" type = "text / css" media = "screen" />
 <link rel = " альтернативная таблица стилей" title = "Бесплатный CSS"
     href = "hot.css" type = "text / css" media = "screen" />

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

Название таблицы стилей, как показано в Firefox

Opera также предлагает нам возможность изменить стиль страницы из меню «Вид», но в остальном не обращает внимания на альтернативный стиль — вы должны охотиться за ним!

« alternate

  <link rel = "alternate" type = "application / rss + xml"
     href = "/ rss. xml" title = "RSS 2.0">
 <link rel = "alternate" type = "application / atom + xml"
     href = "/ atom.xml" title = "Atom 1.0">

Если вы хотите связать пользовательский значок с вашим веб-сайтом (в большинстве браузеров этот значок будет отображаться рядом с URL-адресом в адресной строке, но его также можно использовать при сохранении страницы в избранном или в виде ярлыка на рабочем столе, в зависимости от в браузере или операционной системе), вы можете использовать атрибут rel следующим образом:

  <link rel = " ярлык " href = "/ favicon.ico" />

Ссылка относится к значку, который находится в корневой папке документа веб-сервера, и принято называть его favicon.ico Вы можете разместить любимую иконку в другом месте на веб-сервере, но вам придется соответствующим образом изменить местоположение, указанное в атрибуте href.

Аспект отношений rel Например, в последовательности страниц, которые имеют логический линейный поток, вы можете использовать атрибут rel для определения страниц « nextprev

Атрибут rel Обратитесь к использованию микроформата rel

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

пример

В этом примере атрибут rel

  <link rel = "stylesheet" href = "basic.css" />

Значение

Обратитесь к синтаксической диаграмме для приемлемых предопределенных значений. Помните, однако, что вы не ограничены только этим: вы можете определить свое собственное значение атрибута rel, но оно не будет иметь большого значения для любого веб-браузера (хотя вы можете использовать эту информацию для каких-то других целей). например, для запроса или доступа к значению атрибута с использованием JavaScript и DOM).

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

Что такое rel=canonical?

Использование записи rel=canonical определяет наиболее предпочтительную для индексации страницу для поисковых роботов.
Помогает улучшить ссылочные показатели страниц доступных по множеству ссылок для правильного ранжирования в поиске.
Канонический URLS решает проблемы с дублированием контента.

Пример:

<link rel="canonical" href="https://var.com/main.html"/>

Приведенный выше код означает:

Что данная страница должна индексироваться по приведенной ниже ссылке
«https://var.com/main.html».

Цель

Основная цель использования записи rel=canonical — указание предпочтительного для индексации поисковыми роботами URL

Зачем указывать для поисковых роботов URL-ы?

Чтобы ваш сайт лучше ранжировался в выдаче. Основным фактором для ранжирования является количество сайтов, которые ссылаются на данную страницу.

Основные проблемы, которые rel=canonical решает

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

Предположим, что есть сайт с адресом www.example.com и так как он состоит только из одной страницы, вроде бы не должно быть проблем с дублями. Верно?

Не верно.

Ниже приведен список возможных вариаций адреса, по которому доступен данный сайт.

http://www.example.com/
http://www.example.com
http://example.com/
http://example.com
https://www.example.com/
https://example.com/
http://www.example.com/index.html
http://example.com/index.html
https://www.example.com/index.html
https://example.com/index.html

И это не полный список.

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

Ссылка может быть любой из приведенного списка вариаций.

Как это повлияет на ранжирование

Если несколько человек укажут 10 разных вариантов ссылки на страницы, то каждая версия страницы, будет иметь только одну ссылку.

Однако, если вы укажете канонический URL, тогда у вас будет 10 ссылок на один url, а не 1 ссылка на 10 url-ов.

Динамические url-ы

Допустим у нас есть страница, которая продает носки, и ее URL:

http://www. example.com/socks.html

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

http://www.example.com/socks.html?color=purple

По данному сценарию, можно понять, что мы имеем множество различных URL-ов, по которым можем попасть на страницу по носкам.

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

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

Где указывать rel=canonical used?

Как правило запись добавляют в тэг head.

Примечание: Можно также указать запись и в header сайта, однако данный способ не всегда хорошо работает и не всеми поддерживается.

Что такое rel=dns-prefetch?

Это способ ускорить загрузку веб-страницы, с помощью предварительного разрешения доменных записей.
Использование rel=dns-prefetch предполагает, что браузер сначала сделает вызов DNS необходимого домена, до фактической загрузки.

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

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

Приведенный выше код означает:

Я хочу получить доменное имя, перед загрузкой
Имя домена «cdn.varvy.com»

Цель

Основная цель использования rel=dns-prefetch – это ускорение загрузки веб-страниц, когда для страниц используются разные домены.

Процесс запроса и загрузки страницы оптимизируется, благодаря эффективному контролю.

Процесс часто называют «DNS prefetching».

Определение W3C

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

Где используется rel=»dns-prefetch» used?

В тэге head документа.

Важность применения DNS предзагрузки

В жизни можно быть уверенным в двух вещах — в смерти и налогах.

При загрузке страницы, можно быть уверенным в одном запросе DNS на один домен.

Это значит, если ваша страница найдена на трех доменах, будет сделано соответственно минимум три запроса. Если вы используете ресурсы с 10 доменов, вы получите минимум 10 запросов.

Поэтому используйте возможность минимизировать dns запросы.

Где полезно применять DNS предзагрузку?

Например, у вас на сайте целая пачка js файлов, которые используются при загрузке страницы. У вас также могут использоваться другие сторонние инструменты (adsense, seo инструменты, инструменты маркетинга и т.д.).

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

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

Предзапрос DNS фактически дает вам возможность контролировать то, как страница будет загружаться, «намекая» браузеру, с чего начать.

Где НЕ полезен DNS предзапрос?

Если все ресурсы и файлы страницы лежат на одном домене с html.

Если все файлы js, css, картинки и т. д. лежат на одном домене вместе с самим сайтом, тогда нет необходимости указывать предзапрос, это может только навредить.

Как правило лучше правильно организовать веб-страницу, чем делать предзапросы.

Перед тем как делать предзапрос DNS, возможно вам стоит узнать как можно уменьшить количество вызовов доменов. Я понимаю, что не на каждом сайте это можно сделать, но все же задайте себе 3 вопроса:

Есть ли на странице ресурсы с разных доменов?
Данные ресурсы вызываются одинаково?
Могу ли я уменьшить кол-во доменов?

1. Есть ли на странице ресурсы с разных доменов?

Если HTML файл лежит на домене example. com, а CSS на cdn.example.com, а картинки подгружаются с 1234bucket.cdn.com, значит вы делаете загрузку с трех разных доменов, а могли бы перенести все эти ресурсы на один.

2. Данные ресурсы вызываются одинаково?

Если один CSS файл грузится c «www.example.com», а другой с «example.com», нужно это исправить. Убедитесь, что оба ресурса вызываются либо с версии www либо без «www».

То же самое касается https vs http, довольно распространенная практика.

3. Могу ли я уменьшить кол-во доменов?

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

Узнайте, как загружаются ваши страницы, с помощью сервиса page resource tool, так вы узнаете какие домены вызываются при загрузке.

Что такое rel=nofollow?

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

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

<a href="/example.com" rel="nofollow">текст ссылки</a>

Приведенный выше код говорит…

Вот ссылка на example.com
Если вы — поисковая система, пожалуйста, не отдавайте должное этой ссылке, поскольку я ее не одобряю.

Определение W3C

«Ключевое слово nofollow указывает, что ссылка не подтверждена оригинальным автором или издателем страницы или что ссылка на ссылочный документ была включена, прежде всего, из-за коммерческих отношений между людьми, связанными с этими двумя страницами.» ¹

Где используется rel=»nofollow»?

Поскольку rel=nofollow является директивой, специфичной для ссылок, она используется в HTML-ссылке.

До появления rel=nofollow вам приходилось ставить nofollow для всех ссылок на странице, либо вообще ничего. Теперь, когда стал доступен rel=nofollow, мы использовать атрибут для конкретной ссылки.

Цель

Основными причинами существования rel=nofollow является контроль спама и запись платных ссылок.

2004: поисковые системы вводят rel=nofollow для управления спамом комментариев
2005: рекомендуется Google для платных ссылок
2016: добавлено в руководство Google для веб-мастеров

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

Когда использовать rel=»nofollow»?

Существует четыре основных сценария, когда рекомендуется rel=nofollow.

1. Ненадежный контент

Есть много ситуаций, когда вы можете не контролировать, что люди публикуют на вашем сайте. Общие сценарии …

Комментарии к блогу
Обсуждение форума
Социальные виджеты

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

2. Платные ссылки

Google наказывает сайты, которые не добавляют rel=nofollow к платным ссылкам.

Если у вас есть следующие типы ссылок, вы не должны следовать им …

Платная ссылка (кто-то дал вам деньги или услуги, чтобы добавить ссылку)
Партнерские ссылки
Ссылка рекламного объявления
Ссылки с оптимизированным текстом-якорем в статьях или пресс-релизах, распространяемых на других сайтах

Добавление rel=nofollow к платным ссылкам уже включено в руководства Google для веб-мастеров. Подробнее о платных ссылках читайте здесь.

3. Приоритезация сканирования

Приоритезация сканирования означает изменение способа взаимодействия поисковых роботов, таких как Googlebot, с вашим сайтом.

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

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

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

Добавив rel=nofollow к вашим внутренним ссылкам на эти 90 страниц, вы превратите свой 100-страничный веб-сайт в 10-страничный веб-сайт в отношении робота Googlebot и других поисковых систем.

Это определило бы «приоритет» этих десяти страниц.

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

4. Защита от наказания

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

Не использовать nofollow для платных ссылок? — Ваш рейтинг будет снижен в Google.
Не использовать rel=nofollow на сомнительных ссылках? — Ваш рейтинг будет снижен в Google.
Не использовать rel=nofollow в своих пресс-релизах? — Ваш рейтинг будет снижен в Google.

Что касается функциональности rel=nofollow, то это защиты от спама. Что касается человеческой реальности, почему nofollow активно используется …

Защита от штрафов/наказаний/санкций со стороны поисковой системы.

Иногда это означает, что веб-мастер будет злоупотреблять rel=nofollow, а не рисковать чем-либо.

Как мы используем rel=nofollow

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

Мы не используем его ни на каких других ссылках, потому что мы единственные авторы на этом сайте, и поэтому каждая ссылка создается нами. Поэтому нет риска непреднамеренных ссылок, исходящих с этого сайта (как это было бы, если бы у нас были комментарии или другой контент созданный пользователем).

Единственными ссылками nofollow являются ссылки, которые вы видите на боковой панели партнерские ссылки в объявлениях.

Мы делаем это, следуя руководству Google для веб-мастеров по платным ссылкам и рекламным объявлениям.

Что такое rel=author?

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

Пример:

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

Приведенный выше код означает:

Что есть ссылка «author-page.html»
и данная ссылка относится к документу с информацией об авторе.

HTML5 определение

«атрибут author указывает на то, что документ, на который ссылаются, предоставляет более подробную информацию об авторе контента, расположенного в текущем блоке (где расположен сам атрибут) или всего контента на странице»

Где применяется?

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

Цель

Указать взаимосвязь между документом и автором документа.

Запись rel=author можно использовать при ранжировании

Несколько лет назад Google использовал авторство в своей выдаче для показа картинок/фото (сейчас данной функции нет).

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

Google не заявляет открыто о том, что rel=author используется при ранжировании, но однако вероятность существует.

Способ применения rel=author

Наиболее частый вариант указания автора – это стандартный атрибут HTML ссылки. Пример:

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

Однако, rel=author также можно использовать внутри тэга head. Например:

<link rel="author" href="https://varvy.com/author.html">

Еще один вариант использования, когда вместо ссылки на документ указывается e-mail автора. Например:

<a href="mailto:Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript." rel="author">

Можно использовать запись rel=author на каждой странице сайта.

На мой взгляд, это лучший способ защиты контента от кражи. Конечно, rel=author не защищает контент в буквальном смысле этого слова, однако мы знаем, что несколько лет назад Google идентифицировал авторов и представители Google также отмечали, что владельцам сайтов имеет смысл указывать авторов статьей.

Что такое rel=amphtml?

Запись rel=amphtml определяет AMP версию контента на странице.
Указание AMP для ссылки на страницу, позволяет Google определить версию AMP для текущей страницы.

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

<link rel="amphtml" href="https://varvy.com/amp-page.html">

Приведенный выше код указывает:

AMP версию данной страницы
Версия находится по адресу amp-page. html

Где применяется?

Так как атрибут rel=amphtml определяет AMP версию страницы, он должен быть расположен на обычной странице без AMP.

На стандартной странице атрибут rel=amphtml указывает AMP версию. В свою очередь сослаться на стандартную версию страницы можно с помощью записи rel=canonical.

Цель

Основная цель использовать запись rel=amphtml — распознать и индексировать AMP страницу.

AMP и Google распознание/анализ

Когда Googlebot находит запись rel=amphtml, он сканирует страницу, чтобы затем внести ее в индекс Google.

При условии, что страница Amp не содержит ошибок, она будет добавлена в Google CDN (Сеть доставки (и дистрибуции) контента).

В будущем, когда пользователь мобильного устройства будет искать эту страницу, Google покажет ему ее сохраненную копию из CDN.

Что такое rel=apple-touch-icon?

Запись rel=apple-touch-icon определяет картинку/иконку на устройствах Apple, которая определяет данный сайт или страницу.

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

<link rel="apple-touch-icon" href="/custom_icon.png">

Приведенный выше код означает:

Для данной страницы определена иконка
Иконка расположена по адресу «/custom_icon.png»

Где используется данный код?

В тэге head документа.

Цель

Основная цель применения записи rel=apple-touch-icon – это обозначение иконки/логотипа для страницы.

Ее функцию можно также сравнить с Favicon для операционной системы Windows, которые присваиваются закладкам, ссылкам, сохраненным страницам.

HTML-ссылка Атрибут rel

❮ HTML тег

Пример

Внешняя таблица стилей:

Попробуй сам »

Определение и использование

Требуемый атрибут rel определяет связь между текущим документом и связанным документом / ресурсом.

Поддержка браузера

Атрибут
отн.	Есть	Есть	Есть	Есть	Есть

Синтаксис

Значения атрибутов

Значение	Описание
альтернативный	Предоставляет ссылку на альтернативную версию документа (т.е. распечатать страницу, переведенную или отразить). Пример:
автор	Дает ссылку на автора документа
предварительная выборка dns	Указывает, что браузер должен выполнять приоритетное разрешение DNS для источника целевого ресурса.
справка	Предоставляет ссылку на справочный документ.Пример:
значок	Импортирует значок для представления документа. Пример:
лицензия	Предоставляет ссылку на информацию об авторских правах для документа
следующая	Дает ссылку на следующий документ в серии.
пингбэк	Предоставляет адрес сервера pingback, который обрабатывает pingback-запросы к текущему документу.
предварительное соединение	Указывает, что браузер должен предварительно подключиться к источнику целевого ресурса.
предварительная выборка	Указывает, что браузер должен предварительно получить и кэшировать целевой ресурс, поскольку он может потребоваться для последующей навигации.
предварительный натяг	Указывает, что агент браузера должен предварительно получить и кэшировать целевой ресурс для текущей навигации в соответствии с пунктом назначения, заданным атрибутом «as» (и приоритетом, связанным с этим пунктом назначения).
предварительная обработка	Указывает, что браузер должен предварительно отрисовать (загрузить) указанный веб-страница в фоновом режиме.Итак, если пользователь переходит на эту страницу, он ускоряет увеличить загрузку страницы (потому что страница уже загружена). Предупреждение! Это тратит полосу пропускания пользователя! Используйте пререндер только в том случае, если вы абсолютно уверены что веб-страница требуется на каком-то этапе пути пользователя
предыдущая	Указывает, что документ является частью серии, и что предыдущий документ в серии является ссылочным документом
поиск	Предоставляет ссылку на ресурс, который можно использовать для поиска в текущем документе и связанных с ним страницах.
таблица стилей	Импортирует таблицу стилей

❮ HTML-тег

HTML тег ссылки

Пример

Ссылка на внешнюю таблицу стилей:

Попробуй сам »

Определение и использование

Тег определяет связь между текущим документом и внешним ресурс.

Тег чаще всего используется для ссылки на внешние таблицы стилей.

Элемент — пустой элемент, он содержит только атрибуты.

Поддержка браузера

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

Элемент
<ссылка>	Есть	Есть	Есть	Есть	Есть

Атрибуты

Атрибут	Значение	Описание
перекрестное происхождение	анонимный учетные данные для использования	Определяет, как элемент обрабатывает запросы из разных источников.
href	URL	Задает расположение связанного документа
hreflang	language_code	Задает язык текста в связанном документе
СМИ	media_query	Указывает, на каком устройстве будет отображаться связанный документ
ссылка на политику	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin небезопасный URL	Указывает, какой реферер использовать при выборке ресурса
отн.	альтернативный автор dns-prefetch help icon лицензия следующий pingback preconnect prefetch preload prerender предыдущий поиск таблица стилей	Обязательно.Определяет связь между текущим документом и связанным документом
размеры	Высота x Ширина любая	Задает размер связанного ресурса. Только для rel = «icon»
название		Определяет предпочтительную или альтернативную таблицу стилей
тип	media_type	Задает тип носителя для связанного документа

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Учебное пособие по HTML: стили HTML

Ссылка на HTML DOM: объект ссылки

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

ссылка {
дисплей: нет;
}

: элемент ссылки на внешний ресурс — HTML: язык разметки гипертекста

Элемент HTML определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на таблицы стилей, но также используется для установки значков сайта (как значков стиля «favicon», так и значков для домашнего экрана и приложений на мобильных устройствах) среди прочего.

Чтобы связать внешнюю таблицу стилей, вы должны включить элемент в свой следующим образом:

Этот простой пример предоставляет путь к таблице стилей внутри атрибута href и атрибута rel со значением таблица стилей . rel означает «взаимосвязь» и, вероятно, является одной из ключевых особенностей элемента — значение указывает, как элемент, на который делается ссылка, связан с содержащим его документом. Как вы увидите из нашего справочника по типам ссылок, существует много различных видов отношений.

Есть ряд других распространенных типов, с которыми вы столкнетесь. Например, ссылка на фавикон сайта:

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

Атрибут sizes указывает размер значка, а тип содержит MIME-тип связываемого ресурса. Они предоставляют полезные подсказки, позволяющие браузеру выбрать наиболее подходящий значок из имеющихся.

Вы также можете указать тип носителя или запрос внутри атрибута носителя ; этот ресурс будет загружен только в том случае, если условие мультимедиа истинно.Например:

В элемент были добавлены некоторые интересные новые функции производительности и безопасности. Возьмем этот пример:

Значение rel для preload указывает, что браузер должен предварительно загрузить этот ресурс (дополнительные сведения см. В разделе «Предварительная загрузка содержимого с rel =» preload «), при этом атрибут как указывает конкретный класс извлекаемого содержимого.Атрибут crossorigin указывает, следует ли извлекать ресурс с помощью запроса CORS.

Другие примечания по использованию:

Элемент может встречаться либо в элементе , либо в элементе , в зависимости от того, имеет ли он тип ссылки body-ok . Например, тип ссылки таблицы стилей является нормальным для тела, поэтому разрешен в теле.Однако это не лучшая практика; имеет смысл отделить элементы от содержимого тела, поместив их в .
При использовании для создания значка для сайта, а ваш сайт использует политику безопасности контента (CSP) для повышения своей безопасности, политика применяется к значку. Если вы столкнулись с проблемами, когда значок не загружается, убедитесь, что директива img-src заголовка Content-Security-Policy не препятствует доступу к нему.
Спецификации HTML и XHTML определяют обработчики событий для элемента , но неясно, как они будут использоваться.
В XHTML 1.0 пустые элементы, такие как , требуют завершающей косой черты: .
WebTV поддерживает использование значения следующий для rel для предварительной загрузки следующей страницы в серии документов.

Этот элемент включает глобальные атрибуты.

as

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

Значение Относится к

аудио элементов

документ

  </code> и <code><frame> </code> элементов</td></tr><tr><td> вставить</td><td> <code> <embed> </code> элементов</td></tr><tr><td> получить</td><td><p> выборка, XHR</p><p> <strong> Примечание: </strong> Это значение также требует <code> <ссылка> </code>, чтобы содержать атрибут crossorigin.<img class="lazy lazy-hidden" src="//expertnov.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/www.templatemonster.com/help/wp-content/uploads/2015/08/Landing_Page_How_to_change_color_scheme_3.png' /><noscript><img src='/800/600/https/www.templatemonster.com/help/wp-content/uploads/2015/08/Landing_Page_How_to_change_color_scheme_3.png' /></noscript></p></td></tr><tr><td> шрифт</td><td> CSS @ font-face</td></tr><tr><td> изображение</td><td> <code> <img> </code> и <code> <picture> </code> элементы с
 атрибуты srcset или imageset, элементы SVG <code> <image> </code>,
 CSS <code> * -image </code> rules</td></tr><tr><td> объект</td><td> <code> <объект> </code> элементов</td></tr><tr><td> сценарий</td><td> <code> </code> </pre><p> <strong> Примечание: </strong> Событие <code> load </code> срабатывает после загрузки и анализа таблицы стилей и всего ее импортированного содержимого, а также непосредственно перед тем, как стили начинают применяться к содержимому.</p><h4><span class="ez-toc-section" id="i-40"> Примеры предварительной загрузки </span></h4><p> Таблицы BCD загружаются только в браузер</p><h2><span class="ez-toc-section" id="_HTML_rel_-_HTML_HyperText_Markup_Language"> Атрибут HTML: rel - HTML: HyperText Markup Language </span></h2><dt> <b> <code> альтернативный </code> </b></dt><dd><p> Указывает альтернативное представление текущего документа.Действительно для <code><link> </code>, <code> <a> </code> и <code><area> </code>, значение зависит от значений других атрибутов.</p><ul><li> С ключевым словом <code> styleheet </code> в <code><link> </code> создается альтернативная таблица стилей.<pre> <code>


<link rel = "альтернативная таблица стилей" href = "highcontrast.css" title = "Высокая контрастность">
 </code> </pre></li><li> Атрибут hreflang, который отличается от языка документа, указывает на перевод.</li><li> Атрибут type указывает, что указанный документ имеет то же содержимое в другом формате. Например, с <code> type = "application / rss + xml" </code> он создает гиперссылку, ссылающуюся на канал распространения.<pre> <code> <link rel = "alternate" type = "application / atom + xml" href = "posts.xml" title = "Blog">
 </code> </pre></li><li> Оба атрибута hreflang и type определяют ссылки на версии документа в альтернативном формате и на другом языке, предназначенные для других носителей:<pre> <code> <link rel = alternate href = "/ fr / html / print" hreflang = fr type = text / html media = print title = "Французский HTML (для печати)">
<link rel = alternate href = "/ fr / pdf" hreflang = fr type = application / pdf title = "French PDF">
 </code> </pre></li></ul><p> <strong> Примечание: </strong> Устаревший <code> rev = "made" </code> обрабатывается как <code> rel = "alternate" </code></p></dd><dt> <b> <code> автор </code> </b></dt><dd><p> Указывает автора текущего документа или статьи.Релевантно для элементов <code><link> </code>, <code> <a> </code> и <code><area> </code>, ключевое слово <code> author </code> создает гиперссылку. С <code> <a> </code> и <code><area> </code> он указывает, что связанный документ (или <code> mailto: </code>) предоставляет информацию об авторе ближайшего предка <code><article> </code>, если он есть, в противном случае - весь документ. Для <code> <ссылка> </code> он представляет автора всего документа.</p></dd><dt> <b> <code> закладка </code> </b></dt><dd><p> Соответствующая значению атрибута <code> rel </code> для элементов <code> <a> </code> и <code><area> </code>, закладка предоставляет постоянную ссылку для раздела предка, который является ближайшим предком <code><article> </code> или <code><section> </code>, если есть хотя бы один, в противном случае - ближайший к следующему родственнику или предку - потомок заголовка.</p></dd><dt> <b> <code> канонический </code> </b></dt><dd><p> Действительно для <code> <ссылка> </code>, он определяет предпочтительный URL для текущего документа, который полезен для поисковых систем.</p></dd><dt> <b> <code> dns-prefetch </code> </b></dt><dd><p> Релевантный для элемента <code><link> </code> как в <code><body> </code>, так и в <code><head> </code>, он сообщает браузеру, что необходимо выполнить приоритетное разрешение DNS для источника целевого ресурса. Полезно для ресурсов, которые, вероятно, понадобятся пользователю, помогает уменьшить задержку и тем самым повысить производительность, когда пользователь действительно обращается к ресурсам, поскольку браузер выполняет приоритетное разрешение DNS для источника указанного ресурса.См. Dns-prefetch, описанный в подсказках по ресурсам.</p></dd><dt> <b> <code> внешний </code> </b></dt><dd><p> Относится к <code><form> </code>, <code> <a> </code> и <code><area> </code>, это означает, что указанный документ не является частью текущего сайта. Это можно использовать с селекторами атрибутов для стилизации внешних ссылок таким образом, чтобы указать пользователю, что они покидают текущий сайт.</p></dd><dt> <b> <code> помощь </code> </b></dt><dd><p> В соответствии с <code><form> </code>, <code><link> </code>, <code> <a> </code> и <code><area> </code> ключевое слово <code> help </code> указывает, что ссылка на контент предоставляет контекстно-зависимую справку, предоставляя информацию для родительского элемента, определяющего гиперссылку, и его дочерних элементов.При использовании в <code> <ссылка> </code> справка предназначена для всего документа. При включении в <code> <a> </code> и <code><area> </code> и поддержке курсором <code> по умолчанию </code> будет <code> help </code> вместо указателя <code> </code>.</p></dd><dt> <b> <code> значок </code> </b></dt><dd><p> <strong> Примечание: </strong> Действительно с <code> <ссылка> </code>, связанный ресурс представляет значок, ресурс для представления страницы в пользовательском интерфейсе для текущего документа.</p><p> Чаще всего для значка <code> используется значение </code> favicon:</p>.<pre> <code> <link rel = "icon" href = "favicon.ico">
 </code> </pre><p> Если существует несколько <code><link rel = "icon"> </code> s, браузер использует их атрибут <code> media </code>, <code> type </code> и <code> sizes </code> для выбора наиболее подходящего значка. Если несколько значков одинаково подходят, используется последний. Если позже окажется, что наиболее подходящий значок не подходит, например из-за того, что он использует неподдерживаемый формат, браузер переходит к следующему наиболее подходящему значку и так далее.</p><p> <strong> Примечание. </strong> Apple iOS не использует ни этот тип ссылки, ни атрибут <code> sizes </code>, как это делают другие мобильные браузеры, для выбора значка веб-страницы для веб-клипа или заполнителя при запуске. Вместо этого он использует нестандартные <code> apple-touch-icon </code> и <code> apple-touch-startup image </code> соответственно.</p><p> <strong> Примечание: </strong> Ярлык <code> Тип ссылки </code> часто встречается перед значком <code> </code>, но этот тип ссылки не соответствует требованиям, игнорируется, и веб-авторы <strong> не должны больше использовать его </strong>.</p></dd><dt> <b> <code> лицензия </code> </b></dt><dd><p> <strong> Примечание: </strong> Действительно для элементов <code> <a> </code>, <code><area> </code>, <code><form> </code>, <code><link> </code>, значение <code> license </code> указывает, что гиперссылка ведет к документу, описывающему информацию о лицензировании. ; что основное содержание текущего документа защищено лицензией на авторские права, описанной в указанном документе. Если не внутри элемента <code><head> </code>, стандарт не делает различий между гиперссылкой, относящейся к определенной части документа или к документу в целом.Об этом могут свидетельствовать только данные на странице.</p><pre> <code> <link rel = "license" href = "# license">
 </code> </pre><p> <strong> Примечание: </strong> Хотя синоним <code> авторских прав </code> признан, он неверен, и его следует избегать.</p></dd><dt> <b> <code> манифест </code> </b></dt><dd><p> Манифест веб-приложения. Требуется использование протокола CORS для выборки из разных источников.</p></dd><dt> <b> <code> модуль предварительной загрузки </code> </b></dt><dd><p> Полезно для повышения производительности и актуально для <code><link> </code> в любом месте документа, установка <code> rel = "modulepreload" </code> указывает браузеру предварительно получить сценарий (и зависимости) и сохранить его в карте модулей документа для последующего использования. оценка.<code> modulepreload </code> ссылки могут гарантировать, что выборка из сети выполняется с готовым (но не оцененным) модулем в карте модуля до того, как это обязательно понадобится. См. Также типы ссылок: <code> modulepreload </code>.</p></dd><dt> <b> <code> следующая </code> </b></dt><dd><p> В соответствии с <code><form> </code>, <code><link> </code>, <code> <a> </code> и <code><area> </code>, значения <code> next </code> указывают, что текущий документ является частью серии, и что следующий документ в серии есть ссылка на документ.При включении в <code><link> </code> браузеры могут предполагать, что документ будет извлечен следующим, и рассматривать его как подсказку ресурса.</p></dd><dt> <b> <code> nofollow </code> </b></dt><dd><p> В соответствии с <code><form> </code>, <code> <a> </code> и <code><area> </code> ключевое слово <code> nofollow </code> указывает паукам поисковых систем игнорировать взаимосвязь ссылок. Отношение nofollow может указывать на то, что владелец текущего документа не поддерживает документ, на который имеется ссылка.Его часто включают поисковые оптимизаторы, которые притворяются, что их фермы ссылок не являются страницами для спама.</p></dd><dt> <b> <code> Ноопенер </code> </b></dt><dd><p> Соответствует <code><form> </code>, <code> <a> </code> и <code><area> </code>, создает контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра, если гиперссылка создаст любой из них с самого начала (т. Е. имеет соответствующее значение атрибута <code> target </code>). Другими словами, он заставляет ссылку вести себя так, как будто окно <code>.opener </code> были пустыми, а <code> target = "_ parent" </code> были установлены.</p><p> Это противоположность открывателя.</p></dd><dt> <b> <code> noreferrer </code> </b></dt><dd><p> Соответствует <code><form> </code>, <code> <a> </code> и <code><area> </code>, включение этого значения делает реферер неизвестным (заголовок <code> Referer </code> не будет включен) и создает контекст просмотра верхнего уровня, как если бы Также были установлены <code> ноопенер </code>.</p></dd><dt> <b> <code> открывалка </code> </b></dt><dd><p> Создает вспомогательный контекст просмотра, если гиперссылка в противном случае создала бы контекст просмотра верхнего уровня, который не является дополнительным контекстом просмотра (т.е., имеет "<code> _blank </code>" как <code> целевое значение атрибута </code>). Фактически, противоположность noopener.</p></dd><dt> <b> <code> пингбэк </code> </b></dt><dd><p> Предоставляет адрес сервера pingback, который обрабатывает pingback-запросы к текущему документу.</p></dd><dt> <b> <code> предварительное соединение </code> </b></dt><dd><p> Указывает, что пользовательский агент должен предварительно подключиться к источнику целевого ресурса.</p></dd><dt> <b> <code> предварительная выборка </code> </b></dt><dd><p> Указывает, что пользовательский агент должен предварительно получить и кэшировать целевой ресурс, поскольку он может потребоваться для последующей навигации.</p></dd><dt> <b> <code> предварительный натяг </code> </b></dt><dd><p> Указывает, что пользовательский агент должен предварительно выбрать и кэшировать целевой ресурс для текущей навигации в соответствии с потенциальным пунктом назначения, заданным атрибутом <code> как </code> (и приоритетом, связанным с соответствующим пунктом назначения).</p></dd><dt> <b> <code> предварительная обработка </code> </b></dt><dd><p> Указывает, что пользовательский агент должен предварительно получить целевой ресурс и обработать его таким образом, чтобы в будущем доставлять более быстрый ответ.</p></dd><dt> <b> <code> предыдущая </code> </b></dt><dd><p> Подобно следующему ключевому слову, относящемуся к <code><form> </code>, <code><link> </code>, <code> <a> </code> и <code><area> </code>, значения <code> prev </code> указывают, что текущий документ является частью серии , и что ссылка ссылается на предыдущий документ в серии, является указанным документом.</p><p> Примечание: синоним <code> предыдущий </code> неверен и не должен использоваться.</p></dd><dt> <b> <code> поиск </code> </b></dt><dd><p> В отношении элементов <code><form> </code>, <code><link> </code>, <code> <a> </code> и <code><area> </code> ключевые слова <code> search </code> указывают, что гиперссылка ссылается на документ, интерфейс которого специально разработан для поиска в текущий документ, сайт и связанные ресурсы, содержащие ссылку на ресурс, который можно использовать для поиска.</p><p> Если для атрибута <code> type </code> установлено значение <code> application / opensearchdescription + xml </code>, то ресурс представляет собой подключаемый модуль OpenSearch, который можно легко добавить в интерфейс некоторых браузеров, таких как Firefox или Internet Explorer.</p></dd><dt> <b> <code> таблица стилей </code> </b></dt><dd><p> Действителен для элемента <code><link> </code>, он импортирует внешний ресурс, который будет использоваться в качестве таблицы стилей. Атрибут <code> type </code> не нужен, так как это таблица стилей <code> text / css </code>, так как это значение по умолчанию. Если это не таблица стилей типа <code> text / css </code>, лучше всего объявить этот тип.</p><p> Хотя этот атрибут определяет ссылку как таблицу стилей, взаимодействие с другими атрибутами и другими ключевыми терминами в значении rel влияет на то, загружается ли и / или используется ли таблица стилей.</p><p> При использовании с альтернативным ключевым словом определяет альтернативную таблицу стилей. В этом случае включите непустой <code> заголовок </code>.</p><p> Внешняя таблица стилей не будет использоваться или даже загружаться, если носитель не соответствует значению атрибута <code> носителя </code>.</p><p> Требует использования протокола CORS для выборки из разных источников.</p></dd><dt> <b> <code> тег </code> </b></dt><dd><p> Действителен для элементов <code> <a> </code> и <code><area> </code>, он дает тег (идентифицируемый по заданному адресу), который применяется к текущему документу.Значение тега означает, что ссылка относится к документу, описывающему тег, применяемый к документу, в котором он расположен. Этот тип ссылки не предназначен для тегов в облаке тегов, поскольку эти теги применяются к группе страниц, тогда как значение <code> tag </code> атрибута <code> rel </code> предназначено для одного документа.</p></dd><h2><span class="ez-toc-section" id="HTML_rel_SEO"> HTML атрибут rel, который имеет значение для SEO, объяснил </span></h2><h3><span class="ez-toc-section" id="i-41"> Что такое атрибут отношения ссылки? </span></h3><p> В SEO-индустрии атрибут отношения ссылок, обозначенный в исходном коде как <code><link rel = "value"> </code>, наиболее широко известен как средство сообщения отношений между страницами с поисковыми системами.</p><p> Однако атрибут отношения ссылок уже более десяти лет используется для множества других целей, таких как загрузка таблиц стилей CSS, значков и для обозначения версии страниц для печати.</p><p> В этой статье мы опишем наиболее распространенные атрибуты отношения ссылок для SEO, о которых вам следует знать.</p><h3><span class="ez-toc-section" id="link_rel_alternate_hreflang"> link rel = "alternate" hreflang </span></h3> Атрибут hreflang сигнализирует о переведенных версиях страницы<p> Атрибут rel = "alternate" hreflang = "x", для краткости <code> hreflang </code>, используется для обозначения целевой аудитории страницы.Это может быть исключительно на основе языка (например, «английский») или сочетания языка и географического положения (например, «английский в Канаде»).</p><h4><span class="ez-toc-section" id="_hreflang"> Как выглядит атрибут hreflang? </span></h4><p> Пример атрибута <code> hreflang </code> в источнике страницы:</p><pre> <code data-lang="text"> <link rel = "alternate" hreflang = "en" href = "https://www.example.com/" />
<link rel = "alternate" hreflang = "es" href = "https://www.example.es/" /> </code> </pre><h4><span class="ez-toc-section" id="_hreflang-2"> Зачем вам нужен атрибут hreflang? </span></h4><p> Если у вас есть веб-сайт, доступный на нескольких языках, вы хотите, чтобы поисковые системы показывали нужный контент нужной аудитории.Используйте атрибут <code> hreflang </code>, чтобы сообщить поисковым системам, какова ваша целевая аудитория для контента, и поисковые системы с гораздо большей вероятностью покажут правильный контент нужной аудитории.</p><p> Помимо того, что поисковым системам ясно, какой вариант они должны обслуживать своих пользователей, есть дополнительное преимущество в предотвращении проблем с дублированием контента.</p><p> <strong> Рекомендуемая литература: </strong></p><p> Не пропустите органический трафик</p><p> Быстро проверьте, правильно ли реализован ваш атрибут rel ссылки, и посмотрите, что можно улучшить с помощью ContentKing.</p><h3><span class="ez-toc-section" id="_rel-3"> ссылка rel = "альтернативный" носитель </span></h3> Реализация мобильного атрибута<p> Атрибут носителя rel = "alternate", для краткости <code> мобильный атрибут </code>, используется для обозначения связи между настольным компьютером и мобильным веб-сайтом для поисковых систем. Использование атрибута mobile необходимо только в том случае, если у вас есть отдельный веб-сайт для ПК и мобильных устройств. В настоящее время только Google и Яндекс поддерживают использование атрибута mobile.</p><h4><span class="ez-toc-section" id="_mobile"> Как выглядит атрибут mobile? </span></h4><p> Пример атрибута <code> mobile </code> в источнике страницы:</p><pre> <code data-lang="text"> <link rel = "alternate" media = "только экран и (max-width: 640px)" href = "http: // m.example.com / "> </code> </pre><h4><span class="ez-toc-section" id="_mobile-2"> Зачем вам нужен атрибут mobile? </span></h4><p> Если у вас есть отдельный веб-сайт для ПК и мобильных устройств, и вы заботитесь о SEO, вам необходимо использовать атрибут mobile. Атрибут mobile помогает поисковым системам показывать нужную страницу нужному пользователю, а это означает: пользователь на настольных компьютерах будет видеть версию для ПК при поиске в Google и Яндексе, а пользователь на мобильных устройствах увидит мобильную версию.</p><p> Опять же, помимо разъяснения поисковым системам, какой вариант они должны обслуживать своих пользователей, есть дополнительное преимущество предотвращения проблем с дублированием контента при использовании атрибута mobile.В противном случае настольные и мобильные веб-сайты будут конкурировать друг с другом.</p><p> <strong> Рекомендуемая литература: </strong></p><h3><span class="ez-toc-section" id="_rel-4"> ссылка rel = "предыдущая" / "следующая" </span></h3><p> Атрибуты ссылки <code> rel = "next" </code> и <code> rel = "prev" </code>, для краткости атрибут <code> pagination </code>, используются для указания отношений между последовательностью страниц для поисковых систем.</p> Использование атрибутов разбивки на страницы<h4><span class="ez-toc-section" id="i-42"> Как выглядит атрибут разбивки на страницы? </span></h4><p> Пример атрибутов <code> разбивки на страницы </code> в источнике страницы:</p><pre> <code data-lang="text"> <link rel = "prev" href = "http: // www.example.com/page-2.html ">
<link rel = "next" href = "http://www.example.com/page-4.html"> </code> </pre><h4><span class="ez-toc-section" id="i-43"> Зачем вам нужен атрибут нумерации страниц? </span></h4><p> Атрибут <code> разбивки на страницы </code> помогает поисковым системам понять взаимосвязь между последовательностью страниц. Часто эти последовательности страниц не содержат большого количества уникального контента, поэтому поисковые системы понимают, что вы предпочитаете, чтобы они обслуживали альтернативный контент, а не страницы с разбивкой на страницы.</p><p> <strong> Рекомендуемая литература: </strong></p><h3><span class="ez-toc-section" id="_rel_amphtml"> ссылка rel = "amphtml" </span></h3> AMP помогает оптимизировать для мобильных устройств<p> Атрибут <code> link rel = "amphtml" </code> используется для обозначения взаимосвязи между страницей без AMP и страницей AMP.</p><h4><span class="ez-toc-section" id="_rel_amphtml-2"> Как выглядит ссылка rel = "amphtml"? </span></h4><p> Версия URL без AMP, например <code> https://www.example.com/ice-cream/ </code>, есть ссылка на AMP-версию URL: <br/> <code><link rel = "amphtml" href = "https://www.example.com/ мороженое / amp / "</code>.</p><h4><span class="ez-toc-section" id="_rel_amphtml-3"> Зачем вам нужна ссылка rel = "amphtml"? </span></h4><p> Без атрибута </code> link rel = "amphtml" </code> Google не узнал бы о существовании AMP-версии страниц.</p><p> <strong> Рекомендуемая литература: </strong></p> Атрибут<h2><span class="ez-toc-section" id="HTML_Link_Rel"> HTML Link Rel: что это такое и когда его использовать? </span></h2><p> Итак, вы дали ссылку для своей работы по SEO или справочника. Вы могли дать эту ссылку из сообщения или страницы на другой веб-сайт. Или вы могли сделать это на своем собственном веб-сайте. Предоставляя эти ссылки, вы используете атрибут HTML rel для исследований SEO. Вы когда-нибудь задумывались, что такое атрибут rel HTML-ссылки? Если ваш ответ утвердительный, мы проясним вам этот вопрос в оставшейся части этой статьи.Самый четкий ответ, который мы можем дать на этот вопрос, заключается в следующем.</p> <iframe title="Relationship (REL) Attribute for Anchors" src="https://www.youtube.com/embed/Bp3iL9paTCM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""/>  Что такое Link Rel HTML? 
 Атрибут отношения ссылки указывается как ссылка rel = value в технической части SEO. Эта функция используется для информирования поисковых систем об отношениях между страницами, которые ссылаются друг на друга. Эта функция очень распространена.
 Ссылки Rel являются микроформатами. Это параметры, которые показывают большинство областей использования HTML 4 и HTML 5. REL определяет, как ссылка относится к веб-сайту.Боты поисковых систем идентифицируют и читают ссылки. При этом большое внимание уделяется типу rel. Это потому, что они служат для передачи данных о ссылке паукам поисковых систем. По этим причинам вам следует использовать на своих веб-сайтах типы ссылок REL. Таким образом, вы можете внести значительный вклад в развитие своих веб-сайтов с точки зрения SEO. Итак, каковы типы ссылок REL?
 Что такое теги ссылки HTML Rel? 
 Альтернативный тип ссылки REL указывает, что ссылка является альтернативной версией текущей страницы.Он определяет разные версии страницы, такие как печатные и переведенные страницы.
 Приложение Тип REL указывает, что ссылка является вложением к текущей странице.
 Автор REL указывает автора страницы.
 Закладка REL указывает, что ссылка является закладкой, относящейся к текущей странице.
 Тип главы указывает, что ссылка указывает на любой раздел в серии страниц.
 Contents REL указывает, что ссылка указывает на источник оглавления серии страниц.
 Тип Copyright REL указывает, что ссылка указывает на источник, содержащий информацию об авторских правах текущей страницы.
 Глоссарий REL указывает, что ссылка указывает на глоссарий терминов, описывающих термины, используемые на текущей странице.
 Справка REL указывает, что ссылка указывает на страницу справки для текущей страницы. Другими словами, он определяет справочный документ.
 Другие теги Rel 
 Значок REL указывает значок для представления документа.
 Индекс REL указывает, что ссылка указывает на индекс / каталог массива страниц.
 Лицензия REL определяет информацию об авторских правах документа.
 Следующий тип REL указывает, что ссылка находится на странице после текущей страницы.
 Prefetch REL указывает целевую страницу для кэширования.
 Предыдущий Тип REL указывает, что ссылка - это страница перед текущей страницей.
 Search REL указывает, что документ является средством поиска.
 Раздел REL указывает, что ссылка указывает на основную часть текущей страницы.
 Начало REL указывает, что ссылка указывает на первую страницу в серии страниц.
 Ссылка Таблица стилей REL указывает, что ссылка содержит шаблоны стилей для текущей страницы.
 Подраздел REL указывает, что ссылка указывает на нижнюю часть текущей страницы.
 Значок ярлыка REL указывает на две вещи. Это означает, что ссылка имеет значок для текущей страницы, которая будет отображаться в окне браузера и в списке избранного.
 Ссылка Nofollow Тип REL указывает, что ссылка не имеет ничего общего с текущей страницей. Или это указывает на то, что это ссылка, по которой не следует переходить.
 Когда использовать теги HTML Rel Link 
 Вам не нужно определять каждую ссылку на своем веб-сайте. Таким образом, необязательно использовать теги ссылок Rel. Давайте посмотрим, например, когда вам следует использовать теги спонсируемых ссылок Rel. Вы должны всегда использовать этот тег ссылки для своих платных гиперссылок или ссылок на платную рекламу. Если вы не используете этот тег там, где это необходимо, специалисты по оценке качества поиска Google могут пометить ваши веб-страницы.В основе всех исследований SEO лежит важный вопрос. Это должно помочь всем поисковым системам понять ваш сайт и его содержание.
 Часто задаваемые вопросы об атрибуте HTML ссылки Rel 
  Что такое ссылка CSS?  CSS - это каскадные таблицы стилей. CSS Rel определяет, как пользователи просматривают элементы HTML. Он определяет это для всех носителей.
  Что делает внешний CSS?  Используя это, вы можете редактировать внешний вид всего вашего веб-сайта, внося изменения в один файл. Вы можете написать внешний CSS в любом текстовом редакторе.Однако не следует включать тег ссылки HTML во внешний файл CSS.
  Как связать CSS с HTML?  Есть три способа добавить ссылку CSS HTML. Это следующие: 
 Внешний CSS 
 Внутренний CSS 
 Встроенный CSS
  Каково определение тегов ссылок HTML?  Тег ссылки определяется следующим образом. Он описывает отношения между текущим документом и внешним источником.
  Что означает атрибут HTML Link Rel для SEO?  Теги атрибутов Rel помогают паукам Google понять ценность всех ссылок на вашей веб-странице.Если вы правильно используете эти теги ссылок, это означает, что вы правильно классифицируете ссылки на своем веб-сайте. Таким образом, Google легче понимает ваш сайт, что является ключевым принципом SEO.
 HTML Link Rel Attribute, Короче говоря, 
 Функция HTML link rel обеспечивает преимущества SEO для ваших веб-страниц. Эта функция включена в технический объем исследований SEO. Каждая веб-страница содержит большое количество ссылок, относящихся к ее содержанию. Атрибут rel ссылки HTML определяет отношения между этими ссылками.Чтобы использовать эту функцию более эффективно, вы должны сначала понять, что она делает. Итак, в этой статье мы попытались объяснить, что такое атрибут HTML-ссылки rel. Кроме того, существует пара десятков тегов ссылок HTML Rel. В этой статье мы также говорили о том, что это за теги.
 Если вам понравилась эта статья и вы хотите узнать больше о HTML, вы можете ознакомиться с нашими статьями об этом, например: Что такое HTML?
   Мы думаем, что вас также может заинтересовать  Как начать блог, который может зарабатывать деньги , который является нашим предыдущим постом о  Цифровом маркетинге .Атрибут rel HTML-ссылки - Dofactory 
 Атрибут rel в элементе определяет отношения между текущей страницей и связанным ресурсом. Множественные отношения могут быть определены путем разделения значений пробелами.
 Тег с атрибутом  rel . 
 Ссылка ведет на таблицу стилей, которая используется для оформления абзаца.
 Создан с помощью CSS из таблицы стилей.
 скопировано в буфер обмена
 

 Создан с помощью CSS из таблицы стилей. 
 
  

 Создан с помощью CSS из таблицы стилей. 
  
Попробуйте вживую 
 Атрибут rel определяет отношения между текущей страницей и связанным ресурсом.
 Несколько отношений можно определить, разделив значения пробелом.
 Атрибут rel требует, чтобы href имел значение.

 

 Значение  Описание
 таблица стилей  Указывает, что ссылка представляет собой таблицу стилей, которая будет добавлена на страницу.
 значок  Указывает, что ссылка представляет собой значок (значок или другой значок), представляющий страницу. 
 канонический  Задает предпочтительный URL-адрес для текущей страницы. 
 предварительная выборка dns  Задает выполнение упреждающего разрешения DNS для внешнего ресурса.
 автор  Указывает ссылку на страницу об авторе текущей страницы. 
 справка  Указывает, что ссылка ведет на страницу справки. 
 лицензия  Указывает, что ссылка ведет на страницу с лицензионной информацией.
 предыдущая  Задает предыдущую страницу в серии страниц. 
 следующая  Задает следующую страницу в серии страниц. 
 поиск  Указывает, что ссылка ведет на страницу поиска для текущей страницы.
 альтернативный  Указывает, что ссылка ведет на альтернативную версию страницы. Например, другой тип устройства или версия на другом языке. 
 Вот когда началась поддержка rel для каждого браузера:
 Хром  1.0  сен 2008
 Firefox  1,0  сен 2002
 IE / Edge  1.0  августа 1995 г.
 Opera  1,0  Янв 2006
 Safari  1.0  Янв 2003
  Вернуться к <ссылка> .  Posted in Разное
Навигация по записям
Разобрать индезит стиральную машину: Как разобрать стиральную машину Indesit своими руками
Какая волна тнт радио: «ТНТ Music Radio» выходит в FM-диапазон
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  
  Найти:   
Рубрики
Как работает
Лучше
Монитор
Мониторы
Обзоры
Разное
Смарт
Смартфоны
Советы
Характеристики
 2024 © Все права защищены.