Товаров: 0 (0р.)

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

Содержание

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

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

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

Атрибут «rel=»: определение и предназначение

Rel (от англ. «relationship» – отношение) – это атрибут HTML, описывающий ссылку. Он обозначает, что это за ссылка и на какой адрес она ведет. Работает это следующим образом: когда ссылка направляет пользователя на адрес, атрибут рассказывает поисковым системам, почему ссылка ведет на этот адрес. Например, ссылаться можно на файл стилей, который взаимодействует со страницей.

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

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

Атрибут rel может использовать вместе с тегом <a>:


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

Также допустимо его появление и в теге <link>:


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

Значения атрибута «rel=»

Если мы говорим об атрибуте rel, то чаще всего под ним подразумевается использование значения «nofollow», но есть и другие не менее важные значения. 

rel=nofollow

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


<a rel="nofollow" href="index.html">Эту страницу не нужно посещать</a>

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

rel=alternate

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


<a rel="alternate" type="application/pdf" href="page.pdf">Страница в формате PDF</a>

Также есть еще одна вариация:


...rel="alternate" hreflang="en"...

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

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


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

rel=canonical

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


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

rel=author

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


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

rel=bookmark

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


<a rel="bookmark" href="about.html">Постоянная ссылка на страницу</a>

rel=help

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

Например, в форме на сайте это прописывается через тег <a>:


<form>       

<label for="comment">Comment:</label>   

<textarea></textarea>       

<input type="submit" value="Text Comment">       

<a rel="help" href="comments.html">Help</a>   

</form>

rel=license

Указывает на то, что по ссылке размещено лицензионное соглашение, которое относится к основному тексту страницы.


<a rel="license" href="license.
html">Посмотреть лицензионное соглашение</a>

rel=dns-prefetch, preconnect, prefetch, preload

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


<a rel="prefetch" href="license.html">Здесь что-то интересное</a>

rel=tag

Определяет категорию сайта или ключевой запрос:


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

rel=search

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


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

rel=icon

Необходим для того, чтобы связать содержимое сайта с иконкой:


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

rel=external

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

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

rel=first, up, prev, next, last

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


<ul>

  <li><a rel="next" href="page-1.html">Первая страница</a></li>

  <li>Исходная страница</li>

  <li><a rel="prey" href="page-3.html">Последняя страница</a></li>

</ul>

Заключение

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

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

: Элемент — ссылка на внешний ресурс — 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">

Значение relpreload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи 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

Что такое «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=»next» и rel=»prev»

Можно использовать HTML-атрибуты rel=»next» и rel=»prev», чтобы указать связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.

Предположим, что у вас имеется содержание, разбитое на страницы со следующими URL:

http://www.example.com/article-part1.html
http://www.example.com/article-part2.html
http://www.example.com/article-part3.html
http://www.example.com/article-part4.html

Добавьте в раздел head первой страницы (http://www.example.com/article-part1.html) тег, который указывает на следующую страницу, как показано ниже:


<link rel="next" href="http://www. example.com/article-part2.html">

Поскольку это начальная страница, указывать атрибут rel=»prev» не требуется.

На второй и третьей страницах добавьте ссылки, указывающие на предыдущий и следующий URL. Например, на вторую страницу можно добавить следующие строки:


<link rel="prev" href="http://www.example.com/article-part1.html">
<link rel="next" href="http://www.example.com/article-part3.html">

Добавьте на последнюю страницу (http://www.example.com/article-part4.html) ссылку, которая указывает на предыдущий URL:


<link rel="prev" href="http://www.example.com/article-part3.html">

Поскольку это последний URL, добавлять атрибут rel=»next»не требуется.

Google рассматривает атрибут rel=»previous» как синтаксический вариант атрибута rel=»prev». В качестве значений могут использоваться как относительные, так и абсолютные URL (в соответствии с допустимыми значениями тега link ). Если указать в документе ссылку base, относительные пути будут определяться на основе базового URL.

Если Google обнаружит ошибки в вашей разметке (например, если отсутствует ожидаемое значение атрибута rel=»prev» или rel=»next»), дальнейшее индексирование страниц и распознавание содержания будет выполняться на основе собственного эвристического алгоритма.

Источник

Реклама

Атрибут rel canonical — что это и зачем тег нужен на сайте

Что такое атрибут rel=»canonical»

Атрибут rel="canonical" применяется для указания поисковым системам канонической страницы. Каноническая страница — это страница на сайте, которая является предпочтительной для индексации в поисковых системах. Поисковый робот, обнаружив атрибут rel="canonical" на какой-либо странице, вместо нее проиндексирует ту страницу, адрес которой указан в данном атрибуте. В отличие от редиректа, rel="canonical" переадресует на другую страницу не пользователей, а только поисковые системы.

Как прописать атрибут rel=»canonical» в коде страницы

Задается он с помощью тега LINK с атрибутом rel=”canonical” в блоке HEAD страницы. Для этого необходимо поместить в HEAD следующую запись:

<link rel=”canonical” href=”канонический URL” />

Где «канонический URL» – это полный адрес страницы, которую вы считаете предпочтительной для индексации.

Пример атрибута rel=canonical в HTML-коде страницы:

В каких случаях применяют этот атрибут?

Атрибут rel=canonical применяется в тех случаях, когда на сайте имеются страницы с идентичным или очень похожим контентом — например, карточки товаров, которые различаются только отдельными характеристиками (цветом, размером и т. п.). Чтобы поисковая система не расценивала такие страницы как дубли, необходимо разместить на них ссылку на предпочтительную для индексации каноническую страницу. Это один из самых простых способов борьбы с дублями страниц. Более подробно изучить информацию о дублях и способах борьбы с ними вы можете в нашей статье Дубли страниц на сайте.

Почему rel=canonical важен для поисковых систем?

Атрибут rel=canonical позволяет поисковым системам определить среди страниц с одинаковым содержанием основную, которую нужно проиндексировать и вывести в результаты поиска.

Информация от Яндекс о поддержке поисковыми роботами rel=canonical появилась в 2011 году. Вы можете ознакомиться с рекомендациями от Яндекс по употреблению rel=canonical в разделе Яндекс.Помощь.

Google также официально рекомендует использовать rel=canonicalдля борьбы с повторяющимися URL. Об этом можно прочитать в руководстве Консолидация повторяющихся URL.

Почему нужно знать, на каких страницах сайта есть rel=canonical?

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

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

Как обнаружить на сайте страницы с rel=canonical?

Быстро сделать это можно с помощью сервиса Labrika. Отчет «Страницы с rel=canonical» находится в разделе «Технический аудит» левого бокового меню.

Отчет показывает:

  1. URL-адрес страницы, на которой найден атрибут rel=canonical.
  2. URL, указанный в ссылке с rel=canonical в качестве канонического.
  3. Код ответа страницы, которая прописана как каноническая — код 200 говорит об успешной обработке запроса (страница доступна).
  4. Разрешен ли канонический URL для индексации.

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

Какие виды ошибок rel=canonical поможет определить Labrika?

Страницы с несколькими rel=canonical

На странице может быть указан только один канонический URL. В случае нескольких объявлений rel=canonical Google и Яндекс проигнорируют все указания канонических страниц.

Страницы с кросс-доменным rel=canonical

Чаще всего ссылка на другой домен при использовании атрибута rel=canonical происходит по ошибке. Если в качестве канонического адреса указан URL на другом домене или субдомене, Яндекс не учитывает канонический адрес. Google допускает выбор основного URL на стороннем домене, но рекомендует проверить правильность такого указания.

Ссылки с rel=canonical на несуществующие страницы

Страница, содержащая rel=canonical, ссылается на несуществующую страницу (ошибка 404). Пользователи не смогут попасть на такие страницы, а поисковые системы исключают их из индекса. Страница, прописанная в атрибуте rel=canonical, должна быть доступна и отдавать код ответа 200.

Указание главной страницы в качестве канонической на всех страницах сайта

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

Канонический URL заблокирован для индексации

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

В URL-адресе отсутствует префикс http или https

Абсолютные URL-адреса должны указывать полный путь к канонической странице, включая обозначение протокола (http:// или https://), например:

https:// mysite. ru/blog/page?id=2364, а не /blog/page?id=2364.

rel = canonical найден в <body>

Атрибут rel=canonical должен располагаться только между тегами <head> и </head>. Когда вы ставите rel=canonical в блок <body>, то он игнорируется.

Используйте данные отчета Labrika «Страницы с rel=canonical», чтобы найти и исправить ошибки в указании канонических страниц — это поможет избежать проблем с индексацией вашего сайта.

Руководство по использованию атрибута rel=canonical вы найдете в отдельной статье нашего сайта.

Что такое атрибут Rel?

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

Этот атрибут записывается как rel = «property» и будет отображаться в следующей ссылке: <a rel = «home» href = «http://www.wisegeek.com»> wiseGEEK </a>. Атрибут rel отмечает, что связываемый ресурс — это домашняя страница относительно документа, на котором создается ссылка, например, этой статьи wiseGEEK. Аналогичным образом, сайт с партнерскими партнерскими отношениями может использовать такой код: <a rel = «affiliate» href = «http://www.example.com»> Friendly Affiliate </a>. Когда поисковые системы сканируют сайт, они могут понять отношения между страницами сайта, а также внешние ссылки.

Другой распространенный пример использования этого атрибута — навигация, чтобы избежать путаницы и ошибок. <a rel = «next» href = «http://www.example.com/2»> Другие записи </a> могут использоваться в блоге для предоставления ссылки на другую страницу записей. Люди могут также использовать дескрипторы, такие как «предыдущий», «таблица стилей» и «индекс», чтобы предоставить описательные теги для ресурсов. Атрибут rel также может быть связан с другим кодом; например, таблица стилей может быть закодирована для отображения маленькой стрелки рядом со ссылкой с rel = «previous» для простоты навигации.

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

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

ДРУГИЕ ЯЗЫКИ

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).

Атрибут HTML rel — Учебники по HTML

отн.

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

Иллюстрированная презентация

Опорные элементы

HTML-атрибут rel поддерживает элементы a и link.

Синтаксис

 <имя элемента rel="value" >..... 

Где ElementName — любой поддерживаемый элемент.

Тип значения

Тип ссылки.

Значение

Значение (типы ссылок) Описание
альтернативный Может быть печатной страницей, тем же документом на другом языке или зеркальным документом, являющимся альтернативной версией текущего документа.
таблица стилей Ссылается на внешнюю таблицу стилей для документа.
начало Ссылается на первый документ в коллекции документов.
следующий Ссылается на следующий документ в серии документов.
предыдущий Ссылается на предыдущий документ в серии документов.
содержимое См. документ, который представляет собой оглавление.
индекс Ссылается на документ, который является индексом для текущего документа.
глоссарий Ссылается на документ, который содержит объяснение слов, используемых в текущем документе.
авторское право Относится к информации об авторских правах текущего документа.
глава Ссылается на главу текущего документа.
секция Ссылается на раздел текущего документа.
подраздел Относится к подразделу текущего документа.
Приложение Ссылается на приложение к текущему документу.
помощь Ссылка на справочный документ.
закладка Ссылается на соответствующий документ.

Поддерживаемые типы документов

Строгий HTML 4. 01, переходный HTML 4.01, набор фреймов HTML 4.01.

Пример атрибута HTML rel с элементом ссылки

  

<голова>

Пример HTML-атрибута rel с элементом ссылки


<тело>

Это пример атрибута rel.

Пример атрибута HTML rel с элементом

  

<голова>

Пример атрибута HTML rel с элементом

<тело>

руководства по w3resource

Предыдущий: Атрибут HTML только для чтения
Далее: Атрибут HTML rev

Атрибут HTML rel — Dofactory

Атрибут rel элемента определяет отношение между текущей страницей и связанной страницей или ресурсом.

Возможные значения: nofollow , noopener , noreferrer и другие.

Элементы, принимающие этот атрибут, включают ,, и

.

Атрибут rel в теге .
Эта ссылка ссылается на внешнюю страницу, которая не одобрена текущим сайтом.

  Перейдите на GitHub
  
Попробуйте вживую

Дополнительные сведения см. в нашем справочнике по якорю HTML.


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

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

Для элементов , и атрибут rel требует, чтобы href имел значение.



 

Примечание: Не все значения применимы ко всем элементам (подробности см. ниже).

Значение Описание Элементы
nofollow Указывает, что ссылка не одобрена или не контролируется автором текущей страницы. Примечание: поисковые системы часто игнорируют ссылки с nofollow.
<а>, <область>, <форма>
ноупер Никакой контекст или информация о текущей странице не отправляется на связанную страницу.Используется для ненадежных ссылок, чтобы избежать вмешательства в текущую страницу.
<а>, <область>, <форма>
нереферер Запрещает браузеру отправлять рефереру данные о текущей странице. <а>, <область>, <форма>
таблица стилей Указывает, что ссылка представляет собой таблицу стилей, которую необходимо добавить на страницу.
<ссылка>
значок Указывает, что ссылка представляет собой значок (фавикон или что-то другое), представляющий страницу.
<ссылка>
канонический Указывает предпочтительный URL-адрес для текущей страницы.
<ссылка>
предварительная выборка DNS Указывает на выполнение упреждающего разрешения DNS для связанного ресурса.
<ссылка>
внешний Указывает, что ссылка ведет на страницу за пределами текущего сайта (другой домен).
<а>, <область>, <форма>
автор Указывает ссылку на страницу об авторе текущей страницы.
<а>, <область>, <ссылка>
помощь Указывает, что ссылка ведет на контекстно-зависимую страницу справки.
<а>, <область>, <ссылка>, <форма>
лицензия Указывает, что ссылка ведет на страницу с информацией о лицензировании.
<а>, <область>, <ссылка>, <форма>
предыдущий Определяет предыдущую страницу в серии страниц.
<а>, <область>, <ссылка>, <форма>
следующий Определяет следующую страницу в серии страниц.
<а>, <область>, <ссылка>, <форма>
закладка Указывает, что ссылка является постоянной ссылкой , которую можно использовать для создания закладок.
<а>, <область>
поиск Указывает, что ссылка ведет на страницу поиска для текущей страницы.
<а>, <область>, <ссылка>, <форма>
альтернативный Указывает, что ссылка ведет на альтернативную версию страницы.Например, другой тип устройства или другая языковая версия.
<а>, <область>, <ссылка>
бирка Указывает ключевое слово тега для текущей страницы, то есть слово, которое идентифицирует текущую страницу.
<а>, <область>

Следующие элементы принимают атрибут rel .

Элементы Описание
<а> Указывает якорную ссылку — см. пример выше
<область> Создает кликабельные области внутри карты изображения.
<ссылка> Добавляет внешний источник на текущую страницу.
<форма> Задает HTML-форму.

Тег с атрибутом rel.
Область монитора (на изображении) связана со страницей, которая не одобрена текущим сайтом.

  Компьютер

<имя карты="computermap">
  монитор

  
Попробуйте вживую

Дополнительные сведения см. в нашем справочнике по области HTML rel.


Тег с атрибутом rel.
Ссылка на таблицу стилей, которая используется для оформления абзаца.

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

  

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

Попробуйте вживую

Дополнительные сведения см. в нашем справочнике по ссылке HTML rel.


Тег с атрибутом rel.
Данные формы отправляются на внешний URL-адрес без информации о реферере.

  
  

Попробуйте вживую

Дополнительные сведения см. в нашем справочнике по HTML-форме rel.


Вот когда началась поддержка rel для каждого браузера:

Хром

1.0 Сентябрь 2008 г.

Фаерфокс

1,0 Сентябрь 2002 г.

IE/пограничный

1. 0 август 1995 г.

Опера

1,0 Январь 2006 г.

Сафари

1.0 Январь 2003 г.

Атрибут

HTML Link Rel: что это такое и когда его использовать?

До сих пор вы давали ссылку на свою SEO-работу или ссылку. Возможно, вы дали эту ссылку из сообщения или страницы на другой веб-сайт. Или, возможно, вы сделали это на своем собственном веб-сайте. Предоставляя эти ссылки, вы используете HTML-атрибут rel для SEO-исследований. Задумывались ли вы когда-нибудь, что такое атрибут HTML-ссылки rel? Если ваш ответ «да», мы проясним этот вопрос для вас в оставшейся части этой статьи.Самый ясный ответ, который мы можем дать на этот вопрос, заключается в следующем.

Что такое Link Rel HTML?

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

Ссылки Rel являются микроформатами. Это параметры, которые показывают большинство областей использования HTML 4 и HTML 5. REL указывает, как ссылка относится к веб-сайту.Боты поисковых систем идентифицируют и читают ссылки. При этом большое внимание уделяется типу rel. Это потому, что они служат для передачи данных о ссылке роботам поисковых систем. По этим причинам вы должны использовать типы ссылок REL на своих веб-сайтах. Таким образом, вы можете внести значительный вклад в свои веб-сайты с точки зрения SEO. Итак, что такое типы ссылок REL?

Что такое теги HTML Rel Link?

  • Альтернативный тип ссылки REL указывает, что ссылка является альтернативной версией текущей страницы.Он указывает разные версии страницы, такие как печатные и переведенные страницы.
  • Тип приложения REL указывает, что ссылка является вложением к текущей странице.
  • Author REL указывает автора страницы.
  • Закладка REL указывает, что ссылка является закладкой, относящейся к текущей странице.
  • Тип главы указывает, что ссылка указывает на любой раздел в серии страниц.
  • Contents REL указывает, что ссылка указывает на источник оглавления серии страниц.
  • Тип Copyright REL указывает, что ссылка указывает на источник, содержащий информацию об авторских правах текущей страницы.
  • Глоссарий REL указывает, что ссылка указывает на глоссарий терминов, описывающих термины, используемые на текущей странице.
  • Help REL указывает, что ссылка указывает на страницу справки для текущей страницы. Другими словами, он определяет справочный документ.

Другие относительные теги

  • Icon REL определяет значок, представляющий документ.
  • Индекс REL указывает, что ссылка указывает на индекс/каталог массива страниц.
  • License REL указывает информацию об авторских правах документа.
  • Следующий тип REL указывает, что ссылка является страницей после текущей страницы.
  • Prefetch REL указывает целевую страницу для кэширования.
  • Тип Prev REL указывает, что ссылка является страницей, предшествующей текущей странице.
  • Search REL указывает, что документ является средством поиска.
  • Раздел REL указывает, что ссылка ведет на основную часть текущей страницы.
  • Start REL указывает, что ссылка указывает на первую страницу в серии страниц.
  • Ссылка REL Таблица стилей указывает, что ссылка содержит шаблоны стилей для текущей страницы.
  • Подраздел REL указывает, что ссылка указывает на нижнюю часть текущей страницы.
  • Значок быстрого доступа REL указывает на две вещи. Указывает, что ссылка имеет значок для текущей страницы, которая будет отображаться в окне браузера и в списке избранного.
  • Тип ссылки Nofollow REL указывает, что ссылка не имеет ничего общего с текущей страницей. Или указывает, что это ссылка, по которой не следует переходить.

Когда использовать теги HTML Rel Link

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

Часто задаваемые вопросы об атрибуте HTML Link 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, короче

Функция ссылки HTML обеспечивает преимущества SEO для ваших веб-страниц. Эта функция входит в технический объем SEO-исследований. Каждая веб-страница содержит большое количество ссылок, связанных с ее содержанием. Атрибут HTML link rel определяет взаимосвязь между этими ссылками.Чтобы использовать эту функцию более эффективно, вы должны сначала понять, что она делает. Итак, в этой статье мы попытались объяснить, что такое HTML-атрибут ссылки rel. Кроме того, есть пара десятков тегов ссылок HTML Rel. В этой статье мы также рассказали о том, что это за теги.

Если вам понравилась эта статья и вы хотите узнать больше об HTML, вы можете ознакомиться с нашими статьями об этом, например: Что такое HTML?

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

Атрибут HTML rel

Атрибут

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

  Следующая страница|
Предыдущая страница 

 

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

Все возможные значения атрибута rel

отн.

= альтернативный:
Альтернативное значение

представляет собой альтернативную таблицу стилей для другого носителя (печать, носитель).

    

отн=автор:

Ссылка на страницу с информацией об авторе.

    

отн=помощь:

Значение справки

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

  Справка  

отн=значок:

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

  <ссылка href="favicon.png" rel="icon" >  

отн=лицензия:

Значение лицензии

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

  Авторское право  

отн=поиск:

Предоставляет ссылку для быстрого поиска темы.

    

отн=пред:

предыдущее значение связывает текущий документ с предыдущей страницей.

    

отн=таблица стилей:

Импортирует таблицу стилей CSS для разработки макета страницы.

    

Далее Предыдущий

Хорошие отношения — руководство для начинающих по атрибутам отношений

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

Мы используем такие термины, как «атрибуты», «теги», предполагая, что говорим с посвященной аудиторией, что часто бывает. Однако не все наши читатели являются профессионалами в области поиска, веб-разработчиками или знатоками HTML. Многие из них являются веб-мастерами и владельцами малого бизнеса, которые носят много шляп. Мы подумали, что было бы полезно совместно изучить наиболее полезные из этих тегов в их использовании в качестве атрибутов rel; особенно те, которые могут напрямую повысить нашу эффективность или решить проблему с точки зрения органического поиска.

Что такое атрибуты rel?

Атрибуты

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

Необходимо знать атрибуты rel

Относительно = nofollow

Первым из начальных ворот является rel=nofollow, что на самом деле немного неправильно, поскольку не всегда означает, что поисковая система не будет переходить по ссылке, но это больше беспокоит с точки зрения SEO, поскольку этот атрибут предотвращает поток справедливости/авторитета со страницы, на которую ссылается, на эту связанную цель; таким равенством является PageRank, который является алгоритмом Google. Если вы не знакомы с PageRank, то это видео от главы отдела веб-спама Google — хорошее место для начала.

Совершенно разумно задаться вопросом, зачем нам может понадобиться такой атрибут, поскольку не кажется ли это противоречащим духу ранжирования на основе сети и ссылок? Возможно, это так, но, как и большинство атрибутов rel, rel=nofollow был введен для решения проблемы или, по крайней мере, сдерживания практики, которая становилась проблематичной; это проблема спама в комментариях.

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

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

Относительные атрибуты решения проблем

Отн. = Канонический

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

Дублированный или по существу похожий контент представляет собой проблему для поисковых систем в том, что:

  • Трудно определить предполагаемый «первоначальный» или авторитетный источник
  • Может привести к ненужным страницам (и использованию ресурса) в индексе

Проблема для веб-мастеров в том, что:

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

Однако повторяющиеся или практически похожие URL-адреса могут возникать по самым разным причинам, таким как:

  • Устаревшая сборка, миграция других проблем CMS часто может привести к тому, что у вас будет несколько версий домашнего URL, например. http://anysite.com по сравнению с http://anysite.com/html
  • URL-адреса запроса или URL-адреса, содержащие добавленные параметры, которые могут отслеживать (например), как посетитель попал на сайт
  • Сайты электронной коммерции могут содержать множество версий продуктов, которые незначительно отличаются от страницы к странице e.грамм. Шурупы для дерева 10 мм по сравнению с шурупами для дерева 12 мм

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

Отн.=Предыдущий/Следующий

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

Отн.=Альтернативный

Может использоваться для ссылки на альтернативную версию, такую ​​как страница для печати, однако более актуальным и полезным для международного SEO является использование rel=alternate в сочетании с hreflang.

Используя эту разметку, вы можете сообщить Google, что знаете о существовании нескольких версий одной и той же страницы, НО ориентированных на разные страны. Либо потому, что они на разных языках, либо на одном и том же языке, но с небольшими разговорными различиями e.грамм. Американский английский или что существуют функциональные различия, такие как валюта и способ оплаты. По сути, страницы могут выглядеть одинаково или существенно похожи, но есть веская причина, по которой обе должны быть проиндексированы и показаны для их предполагаемого и географического рынка.

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

Иерархические или социальные атрибуты

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

Отн.=Автор

Совершенно очевидно, что использование rel=author называет автора страницы, но не только номинально как подпись или кредит, но скорее как помеченный объект, «известное количество», и проверяется с помощью программы авторства Google.

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

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

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

Во-вторых, есть много предположений, основанных на фактах, которые были не за горами после объявления AuthorRank от Google. Многие отраслевые профессионалы, в том числе и я, а также этот замечательный пост на SEOMoz цитируют патенты, подсказки и общие движения к добавлению (если уже не) авторского «рейтинга» в качестве вклада в авторитет документа.На самом деле поставщики инструментов, такие как Linkdex, уже включают в себя функции, которые помогут вам определить наиболее влиятельных авторов в вашем секторе, которые могли бы быть фантастическими подходами для партнерства в бизнесе и контенте, которые могут принести пользу вашей репутации в обычном поиске. На самом деле наш собственный редактор рассмотрел эту функцию во вторник.

Другие социальные атрибуты rel включают rel=me, rel=contact и множество межличностных атрибутов XFN rel, которые описывают отношения между всеми нами как гражданами сети. Социальные сайты, такие как Twitter, Quora и Linkedin, используют эти атрибуты в качестве связующего атрибута между страницами, которые связывают вас со мной, а меня с другими парнями.На самом деле, до недавнего времени мы могли точно видеть, с кем, как известно Google, мы связаны в нашем «социальном кругу». Пока они не забрали его, чтобы испортить нам удовольствие.

Однако с точки зрения SEO по-прежнему имеет смысл использовать эти атрибуты, когда это уместно, учитывая то, как они описывают взаимосвязь, добавляют достоверности отдельным лицам как объектам или агентам (если вы читали сообщение SEOMoz, ссылка на которое приведена выше).

Сейчас; Помимо всего вышеперечисленного, мы все еще только немного коснулись атрибутов rel=attributes, да и то только тех, которые больше всего влияют на нас как на веб-мастеров. Если вы заинтересовались, здесь и здесь есть обучающие ресурсы.

Теги

Гугл (676) относительный автор (6) SEO 101 (27) Техническое SEO (78)

HTML атрибут rel

❮ Тег HTML

Пример

Ссылка с атрибутом rel:

Дешевые авиабилеты

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

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

Атрибут rel указывает связь между текущим документом и связанным документом.

Используется только при наличии атрибута href.


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

Атрибут
отн. Да Да Да Да Да

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


Различия между HTML 4.01 и HTML5

Некоторые значения удалены, а некоторые добавлены новые значения.


Синтаксис

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

Значение Описание
альтернативный Предоставляет ссылку на альтернативное представление документа (например, печатную страницу, переведенное или зеркальное отображение)
автор Предоставляет ссылку на автора документа
закладка Постоянный URL-адрес, используемый для создания закладок
внешний Указывает, что ссылочный документ не является частью того же сайта, что и текущий документ
помощь Предоставляет ссылку на справочный документ
лицензия Предоставляет ссылку на информацию об авторских правах для документа
следующий Предоставляет ссылку на следующий документ в серии
nofollow Ссылки на неутвержденный документ, например платная ссылка.
(«nofollow» используется Google, чтобы указать, что поисковый робот Google не должен переходить по этой ссылке)
нереферер Требует, чтобы браузер не отправлял заголовок реферера HTTP, если пользователь переходит по гиперссылке
ноупер Требует, чтобы любой контекст просмотра, созданный путем перехода по гиперссылке, не имел открывающего контекст просмотра
предыдущий Предыдущий документ в подборке
поиск Ссылки на средство поиска документа
бирка Тег (ключевое слово) для текущего документа

❮ Тег HTML

атрибут rel тегов HTML

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

rel attribute Тег Используется для указания отношения между текущим документом и связанным документом.

Необязательный тег атрибута rel с rev соответственно. Он представляет собой формальную связь между направлением исходного документа и целевого документа. Атрибут rel указывает связь между исходным документом и целевым документом, атрибут Andrev указывает связь из исходный документ в целевой документ. Эти два атрибута можно использовать одновременно на вкладке .

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

  rel="следующий"   rev="предыдущий"  > 

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

Подсказка

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

Примеры

Ссылки с атрибутом rel:

 w3c 

Попробуйте сами

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

Почти ни один браузер не поддерживает атрибут rel.

Комментарий: Хотя теоретически браузер может использовать атрибуты rel и rev для изменения внешнего вида содержимого привязки или автоматического создания меню просмотра документов, в других инструментах вы можете использовать эти атрибуты для создания специальной коллекции ссылок, оглавления и index, но лишь немногие браузеры используют эти атрибуты для изменения внешнего вида устройства.

Подсказка

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

грамматика

  > 

Значение свойства

значение описание
альтернативный Необязательная версия документа (например, печатная страница, переведенная или зеркальная страница).
таблица стилей Внешний документ таблицы стилей.
начало Первый документ в коллекции.
следующий Следующий документ в коллекции.
предыдущий Предыдущая коллекция документов.
содержимое Каталог документов.
индекс Индекс документа.
глоссарий Термин в таблице документов или интерпретируется терминами.
авторское право Документы, содержащие информацию об авторских правах.
глава Глава документа.
секция Раздел документа.
подраздел Подраздел документа.
Приложение Документы Приложение.
помощь Справочная документация.
закладка Связанные документы.

alexxlab

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *