Отправить заявку

HTML: Все о ссылках «A HREF REL»

Все знают, что типы ссылок описывают взаимосвязь между двумя или более страницами на сайте. Определение типа ссылки полезно для SEO, так как позволяет поисковым системам лучше понимать ваш сайт. Так же они могут объяснять причину, почему эта ссылка присутствует на данной странице и дать поисковому роботу гораздо больше информации, чем вы можете подумать.

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

Краткий перечень типов ссылок

Тип Для чего используется
alternate альтернативный способ отображения страницы
author За ссылкой подробная информация об авторе
bookmark Постоянная ссылка
help Справка или информация помогающая с какой-то частью сайта или контента
license Ссылка на информацию об авторском праве
nofollow Ссылка, которую вы не рекомендуете. Возможно вы ее разместили их корыстных мотивов
prefetch Ресурс, который скорее всего заинтересует пользователя. Сообщает браузеру, что его можно заранее поместить в кэш
search Поиск по сайту
tag Ключевое слово или название категории сайта
next Ссылка на следующую страницу
prev Ссылка на предыдущую страницу

Как определить тип ссылки?

Для определения типа используется атрибут rel

rel=alternate
Тип alternate указывает на то, что по этой ссылкой идет альтернативный вид отображения страницы. Например, это может быть PDF версия, или версия оптимизированная для печати.

<!-- 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
Ссылка данного типа ведет к контенту справочного характера. Но есть важный момент. Help-ссылка контекстно-зависимая. Браузер сопоставит эту справочную информацию с родительским контейнером, в котором была размещена эта ссылка.

<form id="form">
<label for="comment">Ваш комментарий:</label>
<textarea id="comment"></textarea>
<input type="submit" value="Оставить комментарий">
<a rel="help" href="comments.html">Помощь по комментариям</a>
</form>

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

rel=license
Этот тип может использоваться когда ссылка ведет на лицензионное соглашение основного контента данной страницы. Ссылка данного типа должна быть размещена в пределах тега main сайта. Лицензионное соглашение относится только к тому контенту, которое размещено в пределах этой секции. Оно не будет относится к тому, что например у вас в подвале.

<a rel="license" href="license.html">Лицензия</a>

rel=nofollow
Этот тип сообщает, что поисковому роботу не следует воспринимать эту ссылку как ссылку, которую рекомендует публицист

<a rel="nofollow" href="license.html">Робот, не переходи на эту страницу</a>

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

<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=next и rel=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>
Другие публикации