Rel атрибут: различия между версиями

(не показано 5 промежуточных версий этого же участника)

Строка 1:

Атрибут <code>rel</code> (от англ. «relationship» – отношение) в тегах <code><a></code>, <code><link></code>, <code><form></code> и <code><area></code> определяет отношения между текущим документом (например, HTML страницей) и документом, на который ведёт ссылка, заданная атрибутом <code>href</code>.

Задача данной статьи не столько указать все способы применения атрибута, а сколько познакомить с его полезными для индивебмастера возможностями. С более подробным список возможностей можно ознакомиться в [https://doka.guide/html/rel/ другой статье].

== Практическое использование ==

Строка 23:

Строка 25:

<a rel="me" href="https://mastodon.ml/@foobar">Mastodon</a>

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

=== Канонические страницы ===

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

site.ru/catalog/verhnaya-odezhda/gucci/kovta-s-printom-gucci

site.ru/catalog/brands/gucci/kovta-s-printom-gucci

site.ru/catalog/kovty/s-printom/kovta-s-printom-gucci

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

Чтобы избежать данной ситуации необходимо указать для них rel="canonical". Для этого сначала необходимо определить предпочитаемый канонический URL. Далее необходимо указать этот URL как канонический в остальных двух страницах. Прописывается данная ссылка в <code><head></code> страницы:

<head>

</head>

Тогда эта страница будет участвовать в поиске, а остальные две — считаться неканоническими.<ref>[https://vc.ru/seo/72710-atribut-relcanonical Атрибут rel=canonical — SEO на vc.ru]</ref>

=== Глобальные "хештеги" для сайтов ===

Это более эксперементальный способ использовать rel.

Сервис Octothorpes<ref>[https://octothorp.es/ Основной сервер Octothorpes]</ref> предоставляет хэштеги и обратные ссылки, которые можно использовать на обычных веб-сайтах, соединяя страницы в открытом Интернете, независимо от того, где они размещены. Пример добавления хештегов участника конкурса Weird Web October<ref>[https://weirdweboctober.website/ Официальный сайт конкурса Weird Web October]</ref> на тему Nature (Природа) необходимо добавить следующие теги на страницу с публикацией:

href="https://octothorp.es/?uri=https://сайт_участника">

Список зарегистрированных тегов можно посмотреть на сайте Octothorpes

= Ссылки =

@@ Строка 1: / Строка 1: @@
 Атрибут <code>rel</code> (от англ. «relationship» – отношение) в тегах <code><a></code>, <code><link></code>, <code><form></code> и <code><area></code> определяет отношения между текущим документом (например, HTML страницей) и документом, на который ведёт ссылка, заданная атрибутом <code>href</code>.
+Задача данной статьи не столько указать все способы применения атрибута, а сколько познакомить с его полезными для индивебмастера возможностями. С более подробным список возможностей можно ознакомиться в [https://doka.guide/html/rel/ другой статье].
 == Практическое использование ==
@@ Строка 23: / Строка 25: @@
      <a rel="me" href="https://mastodon.ml/@foobar">Mastodon</a>
 После этого ссылка в профиле будет выделена галочкой и зелёным цветом.
+=== Канонические страницы ===
+Предположим, у нас есть ряд страниц, содержащих одинаковый контент. Наиболее распространенная ситуация — наличие одного и того же товара с тем же описанием в разных категориях, и соответственно, по разным URL-адресам:
+    site.ru/catalog/verhnaya-odezhda/gucci/kovta-s-printom-gucci
+    site.ru/catalog/brands/gucci/kovta-s-printom-gucci
+    site.ru/catalog/kovty/s-printom/kovta-s-printom-gucci
+Данный товар действительно подходит для разных категорий и должен находиться в каждой из них, но для поисковой системы они являются дублями, потому что отличаются URL-адресами, но содержат одинаковый контент. В связи с этим поисковая машина может их занести в индекс и расценивать как дубликаты, что негативно сказывается на продвижении.
+Чтобы избежать данной ситуации необходимо указать для них rel="canonical". Для этого сначала необходимо определить предпочитаемый канонический URL. Далее необходимо указать этот URL как канонический в остальных двух страницах. Прописывается данная ссылка в <code><head></code> страницы:
+    <head>
+    <link rel="canonical" href="https://site.ru/catalog/brands/gucci/kovta-s-printom-gucci/">
+    </head>
+Тогда эта страница будет участвовать в поиске, а остальные две — считаться неканоническими.<ref>[https://vc.ru/seo/72710-atribut-relcanonical Атрибут rel=canonical — SEO на vc.ru]</ref>
+=== Глобальные "хештеги" для сайтов ===
+Это более эксперементальный способ использовать rel.
+Сервис Octothorpes<ref>[https://octothorp.es/ Основной сервер Octothorpes]</ref> предоставляет хэштеги и обратные ссылки, которые можно использовать на обычных веб-сайтах, соединяя страницы в открытом Интернете, независимо от того, где они размещены. Пример добавления хештегов участника конкурса Weird Web October<ref>[https://weirdweboctober.website/ Официальный сайт конкурса Weird Web October]</ref> на тему Nature (Природа) необходимо добавить следующие теги на страницу с публикацией:
+    <link rel="preload" as="fetch"
+    href="https://octothorp.es/?uri=https://сайт_участника">
+    <link rel="octo:octothorpes" href="weirdweboctober">
+    <link rel="octo:octothorpes" href="Nature">
+Список зарегистрированных тегов можно посмотреть на сайте Octothorpes
+= Ссылки =