атрибут rel что это

02.06.202202.06.2022 admin 0 Comments

Что такое HTML атрибут «rel=»?

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

В нашем случае атрибут rel часто используется в значении nofollow, указывающим поисковым роботам-индексаторам, что ссылочный вес и параметры PageRank, тИЦ между связанными документами не передаются и не должны учитываться в процессе ранжирования веб-страниц и сайтов.

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

HTML-атрибуция rel, с одной стороны, является частью on-page SEO (внутренней оптимизации), а в расширенном смысле предназначена для улучшения взаимоотношений веб-страницы со всеми сторонними ресурсами – социальными сетями, онлайн-инструментами и сервисами.

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

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

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

В этой ситуации rel=“nofollow” говорит поисковой системе, что данная гиперссылка имеет служебные задачи и не является пользовательским цитированием контента (так называемым «расшариванием»), которое считается важным фактором поискового ранжирования.

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

Синтаксис атрибуции rel может быть в следующих форматах:

Ниже приведены некоторые часто применяемые значения атрибута rel.

rel=nofollow

Запрет на передачу PageRank по ссылке, указание для поискового робота. Ссылка индексируется, но не будет учтена при ранжировании сайта.

rel=canonical

Указывает поисковому роботу на одну значимую страницу из серии дублей, которая должна быть проиндексирована для участия в поиске. Размешается в части Head кода HTML.

rel=alternate

Направление к адресу страницы, выполненному в ином формате. Это может быть форматирование для распечатки на принтере (документ PDF).

Параметр rel-атрибута hreflang указывает на иноязычную версию веб-страницы.

rel=author

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

rel=bookmark

Указание на фиксированный, неизменный адрес файла.

rel=help

Адресация в помощи, разъяснениям, справке. Например, относительно комментариев. Такой атрибут частично обрабатывается браузером, который ищет родительский контейнер, содержащий ссылку.

Здесь ссылка указывает на дополнительные сведения о контенте, сохраненном в отдельном файле комментария.

rel=license

Указание на лицензирующие документы относительно содержимого веб-страницы. Ссылка размещается внутри основного содержания документа в теге main и указанная лицензия относится только у контенту внутри этого раздела.

rel=dns-prefetch, prefetch, preload preconnect

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

rel=search

Атрибут обозначает ссылку на форму поиска по сайту.

rel=tag

Указание на признаки, ключевики либо субразделы ресурса.

rel=first, last, prev, next, up

Это пример модуля для последовательной навигации по страницам сайта. Параметр next указвает переход на последующую страницу, prev – на предшествующую.

rel=external

Атрибут открытия ссылки в другом окне браузера. Часто применяется совместно с атрибутом nofollow. На платформе WordPress задействуется в комментариях.

rel=icon

Атрибут помогает привязать и адаптировать фавикон проекта к его контенту, реализуется посредством тега link.

Свойства данного атрибута допускают фиксацию размеров фавикона за счет применения параметра size.

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

Расширенный список значений атрибута rel можно посмотреть в HTML-справочнике.

Источник

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

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

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

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

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

rel=nofollow

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

rel=alternate

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

Для этого типа можно задать hreflang, что позволит указать на то, что ссылка ведет на иноязычную версию:

rel=canonical

rel=bookmark

Указывает на то, что ссылка не меняется:

rel=author

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

rel=help

Говорит о том, что ссылка ведет на текст, являющийся справочной информацией.

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

rel=license

Указывает на то, что по ссылке размещено лицензионное соглашение, которое относится к основному тексту страницы. Размещение ссылки должно быть ограничено тегом main. Это определяет контент, к которому ссылка привязана:

rel=dns-prefetch, preconnect preload, preconnect, prefetch

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

rel=tag

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

rel=search

Такая ссылка ведет к поиску на сайте:

rel=first, up, prev, next, last

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

rel=icon

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

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

rel=external

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

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

Более подробно о нескольких атрибутах, не описанных в предыдущей статье:

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

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

Цель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цель

Основная цель использования 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?

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

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

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

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

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

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

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

Цель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример:

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

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

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

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

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

Цель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цель

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

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

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

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

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

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

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

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

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

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

Цель

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

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

Источник

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

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

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

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

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

Атрибуты

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

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

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

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

Примечания:

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

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

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

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

Стилизация с CSS

Примеры

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

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

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

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

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

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

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

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

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

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

Источник