link rel что это такое
Что такое «rel=»?
В HTML атрибут rel (от англ. «relationship» ‒ «отношение, взаимосвязь») определяет взаимосвязь между текущим и связанным с ним ссылкой документом.
Когда ссылка ведет нас к ресурсу, атрибут rel объясняет, почему ссылка ведет к этому адресу. Ссылаться можно, например, на файл стилей, который нужно задействовать с документом. Или на страницу, которая наполнена тем же содержанием, что и исходный документ, но отображается в стандартном формате для подписки на RSS-новости. Также адрес может быть языковым переводом или PDF-версией. Ссылочные отношения применяются также, если ссылка ведет на предыдущие или последующие страницы электронной книги.
Большинство современных браузеров не реагируют на значения этого атрибута, но им руководствуются поисковые роботы при индексировании страниц сайтов. Веб-службы, вроде социальных сетей или инструментов языкового перевода также лучше поймут ваш сайт, если на нем определены типы ссылок. Может применяться как к ссылке с тегом с таким синтаксисом:
Сейчас чаще всего используют значение «nofollow», которое запрещает поисковой системе переходить по конкретной ссылке, то есть, не передает им тИЦ и PR, и «canonical», которая определяет предпочитаемый адрес для индексации поисковыми системами. Но использование атрибута rel не ограничивается только значениями «nofollow» и «canonical»:
rel=nofollow
Значение предназначено для поисковых систем: указывает им, что ссылка не передает свой вес той странице, на которую ссылается. Пример:
rel=canonical
Указывает на предпочитаемый адрес, который будет участвовать в поиске. Используется в теге в хэдере:
Подробнее об использовании rel=canonical в нашей статье о комплексном аудите сайта.
rel=alternate
Указывает на то, что по этой ссылкой располагается альтернативный вид отображения страницы. Например, это может быть PDF-версия, или версия для печати:
Также у этого типа можно задать hreflang, который указывает на то, что по этой ссылке находится страница другой языковой версии:
rel=author
Сообщает, что за ссылкой находится информация об авторе сайта или страницы:
rel=bookmark
Говорит, что ссылка является постоянной и адрес этой страницы не меняется никогда:
rel=help
Такая ссылка ведет к контенту справочного характера. Браузер сопоставляет эту справочную информацию с родительским контейнером, в котором была размещена эта ссылка.
В этом примере ссылка ведет на справочную информацию о контенте, который расположен в родительском элементе ссылки, а именно в форме комментария.
rel=license
Используется, когда ссылка ведет на лицензионное соглашение основного контента страницы. Ссылка должна быть размещена в пределах тега main сайта. Лицензионное соглашение относится только к тому контенту, которое размещено в пределах этой секции. Оно не будет относится к тому, что находится, например, в футере:
rel=dns-prefetch, preconnect, prefetch, preload
Используйте ссылки этого типа, когда ссылаетесь на внешние ресурсы, которые пользователь откроет с большой вероятностью. Браузер кэширует заранее эту ссылку и она откроется быстрее:
О тонкостях использования этих значений — в статье на Хабре.
rel=search
Этот тип сообщает, что ссылка ведет на интерфейс поиска:
rel=tag
Ссылка этого типа ведет дает определения ключевого слова или категории сайта:
rel=first, next, up, last, prev
Эти значения используется в постраничной навигации. Например, ссылка на следующую страницу имеет значение next, а на предыдущую – prev:
rel=external
Означает, что ссылка будет открыта в новом окне. А сама ссылка будет индексироваться, передавать вес. В WordPress этот атрибут весьма широко применяется в комментариях. Может использоваться совместно с nofollow, чтобы ссылка не передавала вес:
rel=icon
Используется для ассоциации иконки сайта с его содержимым. Указывается в теге :
Большинство браузеров не конфликтуют с этим атрибутом, привязывая иконку сайта к его страницам. Также есть возможность определять размер изображения иконки при помощи size:
Это далеко не все возможные значения атрибута rel, подробнее читайте в справочнике HTML.
Не пренебрегайте использованием атрибута rel, он позволяет легко добавить в ваши ссылки больше семантического смысла и создать связи между страницами сайта, которые затем будут обработаны поисковыми роботами, агрегаторами и браузерами.
Атрибут «rel=»: что он собой представляет и для чего нужен
Атрибут «rel=» активно используется разработчиками сайтов для взаимодействия с поисковыми системами. Он включает в себя несколько значений, например nofollow или canonical. Каждый из них предназначен для решения определенных задач.
В сегодняшней статье я подробно разберу атрибут «rel=» и покажу на примерах, в каких случаях его лучше всего использовать.
Атрибут «rel=»: определение и предназначение
Rel (от англ. «relationship» – отношение) – это атрибут HTML, описывающий ссылку. Он обозначает, что это за ссылка и на какой адрес она ведет. Работает это следующим образом: когда ссылка направляет пользователя на адрес, атрибут рассказывает поисковым системам, почему ссылка ведет на этот адрес. Например, ссылаться можно на файл стилей, который взаимодействует со страницей.
Еще ссылка может вести на PDF или иноязычную версию документа. Ссылка, как взаимосвязь между текущим и иным документом, часто используется в электронных книгах для переадресации на следующую или предыдущую страницу.
Современные браузеры чаще всего не обращают внимание на атрибут rel, но вот поисковые системы, напротив, уделяют этому пристальное внимание. Кроме того, социальные сети будут лучше взаимодействовать с веб-ресурсом, если его ссылки будут определены.
Атрибут rel может использовать вместе с тегом :
Значения атрибута «rel=»
Если мы говорим об атрибуте rel, то чаще всего под ним подразумевается использование значения «nofollow», но есть и другие не менее важные значения.
rel=nofollow
Используется, когда нужно, чтобы страница, на которую ссылается пользователь, не увеличила свой ссылочный вес благодаря этой ссылке. Другими словами, по этой ссылке не передается индекс цитирования, используемый Яндексом, и PageRank, используемый Google.
Использование такого значения оправдано на сайтах с формами для комментариев: пользователи могут оставлять ссылки на некачественные ресурсы, а из-за этого сайт рискует потерять доверие поисковых систем.
rel=alternate
Используется для указания того, что ссылка ведет на альтернативное изображение страницы:
Также есть еще одна вариация:
Она помогает поисковой системе понять геопринадлежность страницы, чтобы предоставить пользователю нужную языковую версию в результатах поиска. С ее помощью мы показываем поисковым роботам, что на сайте один и тот же контент доступен на разных языках. Благодаря этому поисковики могут автоматически показывать корректную языковую версию на основе географических и языковых данных.
rel=canonical
Указывает на предпочитаемый адрес, который будет участвовать в поиске. Используется в теге :
rel=author
Указывает на то, что приведенная ссылка относится к информации об авторе данной страницы или статьи.
rel=bookmark
Обозначает, что эта ссылка является якорем и ведет на какую-то часть в этом же документе. Также она говорит поисковым системам, что эта ссылка постоянная.
rel=help
Такое значение используется для обозначения справочников. Браузер сопоставляет эту справочную информацию с родительским контейнером, в котором была размещена эта ссылка.
Например, в форме на сайте это прописывается через тег :
rel=license
Указывает на то, что по ссылке размещено лицензионное соглашение, которое относится к основному тексту страницы.
rel=dns-prefetch, preconnect, prefetch, preload
Ссылки с такими значениями пригодятся в тех случаях, когда нужно сослаться на внешние ресурсы, которые пользователь откроет с большой вероятностью. Браузер кэширует эту ссылку заранее, поэтому она открывается быстрее:
rel=tag
Определяет категорию сайта или ключевой запрос:
rel=search
Этот тип сообщает, что ссылка ведет на интерфейс поиска:
rel=icon
Необходим для того, чтобы связать содержимое сайта с иконкой:
rel=external
Означает, что ссылка ведет на другой сайт, будет индексироваться и передавать вес. В WordPress этот атрибут часто используется в комментариях. Может функционировать совместно с nofollow, чтобы ссылка не передавала вес:
rel=first, up, prev, next, last
Такие значения необходимо прописывать для тех ссылок, которые используются для навигации по странице. Они ведут в начало, конец, на предыдущую или последующую страницу:
Заключение
Атрибут rel позволяет улучшить связь между страницами и сделать их более привлекательными для поисковых роботов. В результате это может заметно сказаться на посещаемости ресурса. Не бойтесь использовать данный атрибут – он может существенно улучшить показатели вашего сайта.
Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:
Есть ряд других значений 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 запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.
HTML-элемент link
Примеры
В следующем примере предоставляется информация о документе с помощью HTML-элемента link с различными типами гиперссылок (в частности, link rel=»stylesheet», используемый для указания ссылки на таблицу CSS-стилей):
Атрибуты HTML-элемента link
Этот атрибут тега link в HTML содержит адрес ( URI ) связанного ссылкой ресурса. Он указывает браузеру, куда переходить по ссылке.
CROSSORIGIN
Указывает, должен ли запрос к внешнему серверу предоставлять учетные данные CORS или нет. Допустимы два значения ( без учета регистра ):
Атрибут HTML link rel содержит разделенный пробелами список типов ссылок, указывающий, какое значение связанный ссылкой ресурс имеет для документа ( содержащего ссылку ).
MEDIA
HREFLANG
Этот HTML link tag указывает язык, который будет использоваться в связанном ссылкой ресурсе ( указан в атрибуте HREF ).
Тип контента ( или Internet Media Type ), который должен содержать связанный ресурс.
SIZES
Разделенный пробелами список с размерами иконки ссылки. Каждый размер может состоять из двух целых чисел, разделенных буквой « х «, или из специального ключевого слова « any «, представляющего все возможные размеры. Каждое значение чувствительно к регистру.
Этот атрибут тега link в HTML должен объявляться только, когда присутствует атрибут rel и он имеет значение « icon «. Иначе ситуации его использование является недействительным.
CHARSET
Значение текущего документа ( содержащего ссылку ) для связанного ссылкой ресурса.
Пожалуйста, оставляйте свои мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, подписки, лайки, отклики, дизлайки!
Тег link в HTML
Тег link в HTML применяется для ссылки на другие ресурсы, используемые в документе.
Типы ссылок
Существует много типов ресурсов, на которые может ссылаться документ. Это делается с помощью ключевых слов, указанных в атрибуте отношения ( rel ). Они должны использоваться в разделе как метаданные:
Alternate
В приведенном ниже примере представлены два альтернативных языка для данного документа HTML на английском — французский и испанский языки. Атрибут hreflang используется, чтобы сообщить пользовательскому агенту доступный код страны по стандарту ISO 639-1 :
Еще один пример использования HTML link rel предлагает три различных текстовых документа на английском, французском и испанском языках:
Author
Используется для получения информации об авторе. Как правило, гиперссылка ведет на страницу автора. В данном атрибуте тега может быть указан только один автор:
В завершении можно добавить метатег author :
Позволяет предоставить помощь посетителям страницы. Пользовательский агент, поддерживающий справку, может иметь два вида — основная вкладка для отображения документа и другая для вывода справки:
Это значение HTML link rel указывает на иконку страницы. Может быть множество иконок, представляющих страницу. Используется та, которая является наиболее подходящей:
License
Это условия лицензии авторских прав на документ. Можно использовать лицензию на весь сайт или лицензию, имеющую отношение к конкретному документу:
Prefetch
Это значение HTML link rel дает подсказку пользовательскому агенту о том, что он должен кэшировать ресурс для ускорения загрузки и обработки. Это делается, когда разработчик точно знает, что ресурсы, используемые на странице, будут запрашиваться:
Search
Определяет документ, который используется для поиска существующего документа. Как правило, это страница со специальной формой для поиска ключевых слов в документе. Для реализации рекомендуется использовать спецификацию OpenSearch :
Stylesheet
HTML link CSS используется для импорта таблицы стилей, используемой для отображения документа. Это делается с помощью каскадных таблиц стилей ( CSS ):
Пожалуйста, оставьте свои комментарии по текущей теме статьи. За комментарии, лайки, дизлайки, отклики, подписки огромное вам спасибо!