Тема сегодняшней статьи link relations или если по-русски то ссылочные отношения. Чтобы понять что это достаточно вспомнить атрибут rel, который мы указываем в теге ссылки. Если обычная ссылка просто указывает на какой-либо ресурс, то атрибут rel объясняет почему эта ссылку указывает на этот ресурс. Вариантов достаточно много и все их мы сегодня рассмотрим. Мы так же рассмотрим нововведения в HTML5, которые затронули атрибут rel и систему link relations.
[adsense]
Итак, вернемся к нашей ссылке. Ссылка указывает на какой-либо ресурс, а атрибут rel сообщает почему ссылка указывает на этот ресурс. Со слов ссылки можно сказать так — я указываю на этот ресурс потому что он:
- содержит файл со стилями и браузер должен применить его к документу
- является RSS лентой, которая содержит тот же самый контент, что и страница, но имеет стандартный формат для подписки
- является переводом этой страницы на другой язык
- является PDF версией этой же страницы
- является следующей страницей онлайн книги и текущая страница тоже часть этой книги
Кроме этого есть еще несколько различных вариаций. HTML5 делит ссылочные отношения на две категории. Обе категории могут быть созданы с помощью элемента link. Первая категория включает в себя ссылки на внешние ресурсы, которые должны быть включены в данный документ. Вторая категория — гиперссылки — это ссылки на другие документы. Поведение конкретной ссылки на внешний ресурс зависит от того какой атрибут rel задан у этой ссылки. Для понимания этих категорий приведу пару примеров:
- rel=stylesheet — эта ссылка на внешний ресурс
- ссылки внутри контента — это гиперссылки. Вы можете перейти по ним, а можете и нет — они не являются чем-то необходимым для просмотра текущей страницы — страница будет отображаться и без них.
Общие значения атрибута rel это:
Первый предназначен для подключения CSS файлов, второй для автоматического обнаружения RSS ленты в формате Atom. Часть ссылочных отношений прописана в стандарте HTML 4.01; еще часть создавалась сообществом microformats community. HTML5 делает попытку собрать воедино все возможные значения атрибута rel, сделать их определения более простыми и чистыми(если требуется) и предоставить новые определения для будущего использования.
Как использовать атрибут rel?
Чаще всего атрибут rel используется в теге <link> в секции head. Часть атрибутов так же применима к обычным ссылкам с использованием тега <а>. HTML5 так же позволяет использовать атрибут rel в элементах <area>.
rel=alternate
В HTML5 определение rel=alternate было уточнено и расширено. Например, использование rel=alternate в связке с атрибутом type указывает на то же содержание, но в другом формате. Использование rel=alternate в связке с type=application/rss+xml или type=application/atom+xml указывает на ленты в формате RSS и Atom, соответственно.
С помощью rel=alternate можно так же указывать на перевод данной страницы. Для этого в HTML5 необходимо использовать hreflang в связке с rel=alternate.
rel=archives
Атрибут rel=archives указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. К примеру, основная страница блога может ссылаться на архивные статьи блога с атрибутом rel=archives. Нововведение HTML5.
rel=author
Атрибут rel=author используется для указание автора статьи. Чаще всего используется в ссылке на страницу контактов или на страницу с формой обратной связи. Атрибут rel=author является эквивалентом rev=made, введенному в HTML 3.2. В данный момент rev=made заменен атрибутом rel=author.
rel=external
Атрибут rel=external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. Этот атрибут получил широкое распространение благодаря WordPress, который использует этот атрибут в ссылках оставленных комментаторами. Нововведение HTML5.
rel=first, last, prev, next, up
В HTML4 появились rel=start, rel=prev и rel=next для того чтобы связать несколько страниц (части одной книги и т.д.). HTML5 добавляет rel=first, который указывает на первую страницу в серии. В HTML5 так же поддерживаются rel=prev и rel=next, но при этом добавлен синоним rel=previous. Так же добавлен атрибут rel=last, который по аналогии с rel=start указывает на последнюю страницу.
rel=icon
Атрибут rel=icon один из самых популярных после rel=stylesheet. Его так же часто используют с shortcut, вот пример:
Большинство браузеров поддерживают этот атрибут и с его помощью ассоциируют иконку с текущей страницей. Иконка отображается как в поисковой выдаче так и при просмотре страницы в браузере. В HTML5 добавилась возможность задавать размер иконки с помощью size. Вот так выглядит синтаксис:
rel=nofollow
Атрибут rel=nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. Этот атрибут был внедрен Google и стандартизован microformats community. Суть атрибута была в борьбе со спамерскими ссылками, которые размешают спамеры в комментариях. Предполагалось, что ссылка с rel=nofollow не будет передавать вес и PageRank и это заставит спамеров сдаться. Этого конечно не произошло, но атрибут остался. Сейчас многие блоговые платформы используют этот атрибут для ссылок в комментариях.
Вот собственно и все наиболее часто используемые атрибуты rel. Вы можете использовать их, а можете и не использовать, но знать о них нужно. Есть еще порядка 5-6 других атрибутов, но они очень редко используются и поддерживаются только в HTML5. Ну а дабы немного отдохнуть предлагаю вам посмотреть фотографии красивых животных.
Вот это хороший совет.
Последний атрибут наиболее популярен и употребляем, когда нужно ограничить количество внешних ссылок, у вэб мастеров такая потребность возникает не редко. Новые возможности вроде HTML5 это конечно хорошо, но палка о двух концах. Старый браузер, который не такая уж редкость если верить статистике, скорее всего начнет верещать что страница открыта но с ошибками.
А атрибут rel я могу указать дважды для одной ссылки? Поставить например и author и nofollow. Что-то найти ответ не могу(