Содержание
что он собой представляет и для чего нужен. Детальный обзор с примерами
Атрибут «rel=» активно используется разработчиками сайтов для взаимодействия с поисковыми системами. Он включает в себя несколько значений, например nofollow или canonical. Каждый из них предназначен для решения определенных задач.
В сегодняшней статье я подробно разберу атрибут «rel=» и покажу на примерах, в каких случаях его лучше всего использовать.
Атрибут «rel=»: определение и предназначение
Rel (от англ. «relationship» – отношение) – это атрибут HTML, описывающий ссылку. Он обозначает, что это за ссылка и на какой адрес она ведет. Работает это следующим образом: когда ссылка направляет пользователя на адрес, атрибут рассказывает поисковым системам, почему ссылка ведет на этот адрес. Например, ссылаться можно на файл стилей, который взаимодействует со страницей.
Еще ссылка может вести на PDF или иноязычную версию документа. Ссылка, как взаимосвязь между текущим и иным документом, часто используется в электронных книгах для переадресации на следующую или предыдущую страницу.
Современные браузеры чаще всего не обращают внимание на атрибут rel, но вот поисковые системы, напротив, уделяют этому пристальное внимание. Кроме того, социальные сети будут лучше взаимодействовать с веб-ресурсом, если его ссылки будут определены.
Атрибут rel может использовать вместе с тегом <a>:
<a rel="..." href="...">...</a>
Также допустимо его появление и в теге <link>:
<link rel="..." href="...">
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться
Значения атрибута «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 позволяет улучшить связь между страницами и сделать их более привлекательными для поисковых роботов. В результате это может заметно сказаться на посещаемости ресурса. Не бойтесь использовать данный атрибут – он может существенно улучшить показатели вашего сайта.
Тег атрибут rel — Учебник HTML
❮ HTML тег <link>
Пример
Внешняя таблица стилей:
<link rel=»stylesheet» href=»styles.css»>
Попробуйте сами »
Определение и использование
Обязательный атрибут rel определяет связь между текущим документом и связанным документом/ресурсом.
Поддержка браузеров
Атрибут | |||||
---|---|---|---|---|---|
rel | Да | Да | Да | Да | Да |
Синтаксис
<link rel=»value«>
Значение атрибутов
Значение | Описание |
---|---|
alternate | Предоставляет ссылку на альтернативную версию документа (например, печатную страницу, переведенную или зеркальную). Пример: <link rel=»alternate» type=»application/atom+xml» title=»Schoolsw3 Новости» href=»/blog/news/atom»> |
author | Предоставляет ссылку на автора документа |
dns-prefetch | Указывает, что браузер должен предварительно выполнить разрешение DNS для источника целевого ресурса |
help | Предоставляет ссылку на справочный документ. Пример: <link rel=»help» href=»/help/»> |
icon | Импортирует значок для представления документа. Пример: <link rel=»icon» href=»/favicon.ico» type=»image/x-icon»> |
license | Содержит ссылку на информацию об авторских правах для документа. |
next | Предоставляет ссылку на следующий документ в серии. |
pingback | Предоставляет адрес сервера pingback, который обрабатывает pingback к текущему документу. |
preconnect | Указывает, что браузер должен предварительно подключиться к источнику целевого ресурса. |
prefetch | Указывает, что браузер должен предварительно извлекать и кэшировать целевой ресурс, поскольку он, вероятно, потребуется для последующей навигации. |
preload | Указывает, что агент браузера должен предварительно извлекать и кэшировать целевой ресурс для текущей навигации в соответствии с назначением, заданным атрибутом «as» (и приоритетом, связанным с этим назначением). |
prerender | Указывает, что браузер должен предварительно визуализировать (загружать) указанную веб страницу в фоновом режиме. Внимание! Это пустая трата пропускной способности пользователя! Используйте prerender только в том случае, если он абсолютно уверен, что веб страница необходима в какой-то момент путешествия пользователя. |
prev | Указывает, что документ является частью серии и что предыдущий документ в серии является ссылочным документом. |
search | Предоставляет ссылку на ресурс, который можно использовать для поиска по текущему документу и связанным с ним страницам. |
stylesheet | Импорт таблицы стилей. |
❮ HTML тег <link>
HTML link rel Attribute
❮ HTML тег
Пример
Импорт внешней таблицы стилей:
Попробуйте сами »
ниже.
Определение и использование
Обязательный атрибут rel
указывает связь между текущим документом и связанным документом/ресурсом.
Поддержка браузера
Атрибут | |||||
---|---|---|---|---|---|
отн. | Да | Да | Да | Да | Да |
Синтаксис
Значения атрибутов
Значение | Описание |
---|---|
альтернативный | Предоставляет ссылку на альтернативную версию документа (т. е. печатную страницу, переведенную или зеркальную). Пример: |
автор | Предоставляет ссылку на автора документа |
предварительная выборка DNS | Указывает, что браузер должен упреждающе выполнять разрешение DNS для источника целевого ресурса |
помощь | Предоставляет ссылку на справочный документ. Пример: |
значок | Импортирует значок для представления документа. Пример: |
лицензия | Предоставляет ссылку на информацию об авторских правах для документа |
следующий | Предоставляет ссылку на следующий документ в серии |
пингбэк | Предоставляет адрес сервера pingback, который обрабатывает pingbacks для текущего документа |
предварительное соединение | Указывает, что браузер должен заблаговременно подключаться к источнику целевого ресурса. |
предварительная выборка | Указывает, что браузер должен упреждающе извлекать и кэшировать целевой ресурс, поскольку он может потребоваться для последующей навигации |
предварительная нагрузка | Указывает, что агент браузера должен упреждающе извлекать и кэшировать целевой ресурс для текущей навигации в соответствии с пунктом назначения, заданным атрибутом «как» (и приоритетом, связанным с этим пунктом назначения). |
пререндеринг | Указывает, что браузер должен предварительно отображать (загружать) указанный веб-страница в фоновом режиме. Итак, если пользователь переходит на эту страницу, это ускоряет увеличить загрузку страницы (поскольку страница уже загружена). Внимание! Это тратит впустую пропускную способность пользователя! Используйте предварительную визуализацию только в том случае, если вы абсолютно уверены что веб-страница требуется в какой-то момент пути пользователя |
предыдущий | Указывает, что документ является частью серии и что предыдущий документ в серии является ссылочным документом |
поиск | Предоставляет ссылку на ресурс, который можно использовать для поиска в текущем документе и связанных с ним страницах. |
таблица стилей | Импорт таблицы стилей |
Другие примеры
Пример
Вот как добавить значок на веб-сайт:
Названиеназвание>
ico»>
Это заголовок
Это абзац.
❮ Тег HTML
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
8 Top Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery