Тел.: +7 (902) 268-20-24 / E-mail: info@webtend.ru

Публикации, статьи от веб-студии Webtend

Разнообразие атрибута rel, использование

Атрибут rel — определяет отношение текущего документа как базового к документу определяемого ссылкой. Атрибут rel может выражать отношения через типовые ссылки.

Возможные значения:

  • Alternate — определяет замену для версии документа, в котором находится ссылка;
  • Appendix — страница которая является приложением для набора страниц;
  • Bookmark — закладка;
  • Chapter — ссылается на документ, выступающий в качестве отдельной главы в сборе документов;
  • Contents — ссылается на документ, выступающая в качестве оглавления;
  • Copyright — уведомление об авторском праве;
  • Glossary — глоссарий по данной странице;
  • Help — помощь по данной странице;
  • Index — ссылается на документ, содержащий индекс для текущего документа;
  • Next — Ссылается на следующий документ в последовательности;
  • Nofollow — объявляет поисковой системе, что документ не имеет влияния на page ranking документа, к которому ведет ссылка;
  • Offline — ссылается на месторасположение пути CDF файла;
  • Prev — ссылается на предыдущий документ в последовательности;
  • Section — страница которая является секцией для набора страниц;
  • Shortcut Icon — ссылается на местоположение ярлыка;
  • sidebar — ссылается на панель закладок (работает только с Opera и Firefox);
  • Start — ссылается на первый документ;
  • Stylesheet — ссылается на внешнюю таблицу стилей;
  • Subsection — страница является подсекцией для набора страниц.

Атрибут rel определяет отношения между текущим документом и документом, на который ведёт ссылка, заданная атрибутом href. Несмотря на то, что большинство браузеров не поддерживают атрибут rel, на сайтах часто можно встретить код rel="nofollow", предназначенный для поисковых систем Google и Яндекс. Ссылки, помеченные таким образом, не передают PageRank и ТИЦ.

Синтаксис

<a rel="текст">...</a>

Значения

  • alternate - Даёт альтернативные представления текущего документа.
  • author - Указывает ссылку на автора текущего документа или статьи.
  • bookmark - Постоянная ссылка на ближайший родительский раздел.
  • help - Ссылка на контекстно-зависимую справку.
  • icon - Импортирует иконку для представления текущего документа.
  • license - Указывает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
  • next - Указывает, что текущий документ является частью серии и ссылка ведёт на следующий документ в серии.
  • nofollow - Не передавать по ссылке ТИЦ и PR.
  • noreferrer - Требует, чтобы пользовательский агент не посылал в HTTP-заголовке Referer, если пользователь переходит по ссылке.
  • prefetch - Указывает, что целевой ресурс должен быть заранее кэширован.
  • prev - Указывает, что текущий документ является частью серии и ссылка ведёт на предыдущий документ в серии.
  • search - Даёт ссылку на ресурс, который может быть использован для поиска по текущему документу и связанных с ней страниц.
  • stylesheet - Импортирует таблицу стилей.
  • tag - Указывает, что метка (тег) имеет отношение к текущему документу.

Продолжая изучать язык HTML версии №5, содержание этой статьи будет посвящено понятию "ссылочные отношения". Обозначается система ссылочных отношений так: link relations. Что это такое? Это расширенное понимание ссылки. Так, если обыкновенная ссылка указывает путь к адресу ресурса, картинки или почты, то применение атрибута rel расширяет понимание ссылки, объясняя, почему именно эта конкретная ссылка отсылает нас к определенному адресу. Система отношений довольно обширна, и сегодня будут рассмотрены все возможные ее варианты. Реконструкция новой версии HTML затронула как систему link relations, так и атрибут rel.

Для более упрощенного понимания отношений link relations можно обрисовать ситуацию следующим образом: ссылка ведет нас к ресурсу, а атрибут rel объясняет нам, почему ссылка ведет к этому адресу. Ссылаться можно потому, что на данном ресурсе находится, например, файл стилей, который нужно задействовать с документом. Следующая причина – сайт, на который ведет ссылка, является лентой новостей RSS (это объединение нескольких XML-форматов, которые необходимы для отображения новостных лент, статей и их анонсов), которая наполнена тем же содержанием, что и документ (страница), но отображается в стандартном формате для подписки на RSS-новости. Также адрес может представлять языковый перевод этой страницы или быть её версией PDF. Ссылочные отношения применяются также, если ссылка ведет на последующие страницы электронной книги.

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

Стандартный способ обращения к каскадным таблицам стилей CSS — <link rel="stylesheet" href="/adress.css"/>, указывающий, что данная таблица стилей должна подключаться к документу для правильного его отображения.

Гиперссылка – внутренняя ссылка страницы. Переход по таким ссылкам необязателен, потому что к адресующимся страницам можно добраться и другим путем, а данная страница со ссылками будет правильно отображаться в браузере и без таких ссылок. Значение атрибута rel выглядит так:

1
2
<link rel=stylesheet></link> или
<link rel=alternate type=application/atom+xml></link>

Первый вариант выполняет подключение файлов стилей, второй же – обнаруживает новостную ленту RSS, представленную в Atom формате. Некоторая часть таких ссылочных отношений создавалась еще в стандарте HTML4, а некоторые – в microformats community. Задача пятой версии HTML в том, чтобы объединить в одно понимание все созданные ранее значения атрибута rel и стандартизировать их для более простого понимания всеми существующими браузерами. Также возможны варианты новых определений ссылочных отношений.

Как применяется rel-атрибут на практике? Зачастую этот атрибут работает вместе с тегом в боксе head. Некоторая часть атрибутов отношений может быть применена к обыкновенным гиперссылкам с употреблением тега <а>. Возможности языка HTML5 расширили возможности атрибута до использования его в элементе <area>.

Такое определение в языке HTML5 также претерпело некоторые изменения. К примеру, если применять определение rel=alternate вместе с атрибутом type, то это будет будет обозначать другой формат того же содержания документа.

rel=alternate плюс type=application/rss+xml или rel=alternate плюс type=application/atom+xml обозначает новостную ленту формата Atom или RSS. Перевод страницы на другой язык также указывается при помощи rel=alternate. В HTML5 для осуществления этого варианта применяется пара hreflang плюс rel=alternate.

При помощи атрибута rel=archives документ определяется, как представляющий архивный, или временной интерес. То есть, такая ссылка ведет к, например, архивным статьям с атрибутом rel=archives или каким-либо старым записям на сайте, которые в силу объективных причин визуально уже не отображаются на странице, но имеются в архивных документах. Этот атрибут также был разработан специально для HTML5.

Для того, чтобы обозначить авторство конкретной статьи, применяется атрибут rel=author. Направленное применение имеет в адресации на форму контактов на сайте или форму обратной связи. В HTML3 вместо этого атрибута использовался rev=made, который был более ограничен в возможностях.

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

Такие атрибуты, как rel=first, next, up, last, prev, появились только в языке версии 4. Предназначение этих атрибутов – связывать в одно целое части документов – несколько страниц или разбитую на несколько частей одну страницу. Для пятой версии HTML добавили атрибут rel=first, указывающий на начальную страницу документа, а также по-прежнему поддерживаются атрибуты rel=prev и rel=next, и добавлен rel=previous. На последнюю страницу документа указывает атрибут rel=last.

Для ассоциации иконки сайта с его содержимым используется атрибут rel=icon. Вы замечали, что рядом с адресной строкой высвечивается иконка сайта? Это работа следующей строчки:

1
<link rel="shortcut icon" href="/favicon.ico"></link>

Почти все браузеры не конфликтуют с этим атрибутом, привязывая иконку сайта к его страницам. В гиперразметке HTML5 появилась возможность определять размер изображения иконки при помощи size. Эта строка выглядит следующим образом:

1
<link rel="icon" href="/favicon.png" sizes="16x16" type="image/png"></link>

Данная ссылка – коммерческого характера – говорит атрибут rel=nofollow. Также он применяется для того, чтобы показать игнорирование данной ссылки автором документа. Это нововведение было применено компанией Google и приведено к стандартам microformats community. Разработан этот атрибут был для того, чтобы противостоять ссылкам спамеров в комментариях. То есть, данный атрибут не передавал PR страницы, и пользоваться такими ссылками было бессмысленно. В настоящее время многие блоггеры используют атрибут rel=nofollow для проставления комментаторских ссылок.

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

Атрибут rel="nofollow" элемента a

Атрибут rel="nofollow" используется в теге <a> в формате:

<a href="/url" rel="nofollow">текст ссылки</a>  

Атрибут работает аналогично мета-тегу со значением nofollow, но распространяется только на ссылку, для которой указан.

Атрибут rel="canonical" элемента link

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

www.example.com/pages?id=2
www.example.com/blog

Если предпочитаемый адрес — /blog, это нужно отразить в коде страницы /pages?id=2:

<link rel="canonical" href="http://www.example.com/blog"/>

Также если на странице расположен атрибут rel="canonical", с указанием непосредственного адреса этой страницы, робот посчитает ее канонической. Данная страница будет индексироваться и появится в поисковой выдаче Яндекса.

Робот считает ссылку с атрибутом rel="canonical" не строгой директивой, а предлагаемым вариантом, который учитывается, но может быть проигнорирован.

Например, робот может не использовать указанный вами адрес, если:

  • Документ по каноническому адресу недоступен для индексирования.

  • В качестве канонического адреса указывается URL в другом домене или поддомене.

  • Вы указали несколько канонических адресов.

Также не рекомендуется создавать цепочки канонических адресов. Например: для адреса example.ru/1 каноническим адресом является example.ru/2, в то время как для адреса example.ru/2 указан канонический адрес example.ru/3.

Атрибут rel="nofollow", подходы Google

Значение nofollow запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.

Ранее nofollow применяли в метатеге на уровне страницы. Это значение указывало, что системы поиска не должны переходить по ссылкам на этой странице (т. е. не нужно сканировать соответствующие URL). Пример:

 <meta name="robots" content="nofollow" />

До того как nofollow стало возможным использовать для отдельных ссылок, требовалось предпринимать специальные меры, чтобы запретить роботам переходить по отдельным ссылкам на странице (например, URL таких ссылок приходилось блокировать с помощью robots.txt). Когда был стандартизирован атрибут rel со значением nofollow на уровне ссылки, веб-мастерам стало гораздо удобнее управлять сканированием. Пример закрытой от робота ссылки:

 <a href="/signin.php" rel="nofollow">Войти</a>

Как Google обрабатывает ссылки с запрещенным переходом?

Как правило, переход не производится. Это означает, что по этим ссылкам Google не передает ни PageRank, ни текст ссылки. Благодаря nofollow ссылки не попадают в нашу "схему" Сети. Однако соответствующие целевые страницы все равно могут быть включены в индекс Google, если другие сайты ссылаются на них без использования nofollow или если их URL предоставлены Google с помощью файла Sitemap. Необходимо заметить, что другие поисковые системы могут обрабатывать nofollow несколько по-другому.

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

Распространенные случаи применения nofollow:

  • Ненадежный контент. Если вы не можете или не хотите поручиться за содержание страниц, на которые ведут ссылки с вашего сайта (например, из комментариев пользователей), следует вставлять в теги таких ссылок rel="nofollow". Это сократит количество спама и поможет исключить непреднамеренную передачу значения PageRank с сайта недобросовестным пользователям. В частности, спамеры могут оставить ваш сайт в покое, если увидят, что к непроверенным ссылкам добавляется rel="nofollow". Если требуется распознавать и поощрять авторов, достойных доверия, то можно автоматически или вручную удалять nofollow из ссылок высокого качества.
  • Платные ссылки. Позиция сайта в результатах поиска Google отчасти зависит от результатов анализа других сайтов, ссылающихся на него. Чтобы платные ссылки не влияли на результаты поиска, советуем использовать для таких ссылок nofollow . Правила поисковых систем требуют предоставлять автоматически считываемую информацию о платных ссылках, так как потребителям важно отличать коммерческие материалы от обычных (например, объявление на всю страницу в газете может иметь пометку "На правах рекламы").
  • Приоритезация сканирования. Роботы поисковых систем не могут входить в аккаунты или регистрироваться в качестве участников форума, поэтому не нужно, чтобы робот переходил по ссылке "Регистрация" или "Вход". Использование nofollow в таких случаях позволяет роботу заняться сканированием других страниц, которые вы хотели бы видеть в индексе Google. И все же гораздо важнее правильно организовывать информацию: применять интуитивно понятную навигацию, удобные для пользователей и поисковых систем URL и т. д.

CMS Joomla

CMS Joomla!

CMS Joomla (джумла) – один из мировых лидеров среди систем для создания сайтов и интернет-магазинов.

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

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

Веб-студия WebTend работает исключительно с системой управления контентом CMS Joomla!

Подробнее