Элемент link HTML содержит связанную с документом информацию: альтернативные версии, авторы, авторские лицензии, иконки и т.д. Он должен содержать атрибут rel или itemprop , но не оба сразу. Атрибут href также является обязательным.

Когда атрибут itemprop отсутствует, этот элемент может быть объявлен только в разделе head . В противном случае он может быть объявлен в другом месте.

Примеры

В следующем примере предоставляется информация о документе с помощью элемента link с различными типами гиперссылок:

<link rel="license" href="copyright.html">

Новая надежда

После падения демократии и восстановления империи надежда была утеряна...

Атрибуты

Специальные атрибуты

HREF

Этот атрибут тега link в HTML содержит адрес (URI ) связанного ссылкой ресурса. Он указывает браузеру, куда переходить по ссылке.

Наличие этого атрибута является обязательным. Если он отсутствует или имеет значение, которое не является допустимым URI , элемент не определяет ссылку.

Пример

CROSSORIGIN

Указывает, должен ли запрос к внешнему серверу предоставлять учетные данные CORS или нет. Допустимы два значения (без учета регистра ):

• anonymous : CORS запросы к элементу будут содержать установленный флаг «omit credentials «;
• use-credentials : CORS запросы к элементу не будут содержать установленный флаг «omit credentials «.

REL

Атрибут HTML link rel содержит разделенный пробелами список типов ссылок, указывающий, какое значение связанный ссылкой ресурс имеет для документа (содержащего ссылку ).

Элемент link должен содержать либо атрибут rel , либо атрибут itemprop , но не оба сразу. Атрибут href также является обязательным.

Пример

MEDIA

Список медиа-запросов с указанием типов медиа (и их характеристик ), для которых предназначен связанный ссылкой ресурс. Например, документ или ресурс может быть оптимизирован для печати (меньше цветов, изображений и фоновых тонов ), под мобильные устройства или обычные экраны. Значение по умолчанию -«all «.

Пример

HREFLANG

Этот HTML link tag указывает язык, который будет использоваться в связанном ссылкой ресурсе (указан в атрибуте HREF ).

Пример

TYPE

Тип контента (или Internet Media Type ), который должен содержать связанный ресурс.

Пример

SIZES

Разделенный пробелами список с размерами иконки ссылки. Каждый размер может состоять из двух целых чисел, разделенных буквой «х «, или из специального ключевого слова «any «, представляющего все возможные размеры. Каждое значение чувствительно к регистру.

Этот атрибут тега link в HTML должен объявляться только, когда присутствует атрибут rel и он имеет значение «icon «. Иначе ситуации его использование является недействительным.

Пример

CHARSET

Кодировка символов целевого ресурса. Этот атрибут является устаревшим и в HTML5 уже не используется. Вместо него разработчикам рекомендуется использовать HTTP-заголовки Content-Type , чтобы предоставить информацию о наборах символов в документах и других ресурсах.

Пример

REV

Значение текущего документа (содержащего ссылку ) для связанного ссылкой ресурса.

Этот атрибут HTML link tag является устаревшим и в HTML5 уже не используется. Разработчикам рекомендуется заменить его атрибутом rel .

Пример

Перевод статьи «LINK ELEMENT » был подготовлен дружной командой проекта .

LINK - это тег, который обеспечивает связь между страницами сайта, и связь между файлами ресурсов и сайтом. Он может быть расположен только в теле HEAD. Тег LINK регистро-независим. При помощи него можно связать ленту новостей со страницей сайта, можно подключить иконку страницы, подключить к странице таблицу стилей. Также можно логически вязать разные страницы сайта, если между ними есть определенная взаимосвязь. Действие тега LINK распространяется только на ту страницу сайта, на которой он установлен.

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

Синтаксис тега LINK выглядит следующим образом:

Свойство тега LINK "href" определяет файл, с которым будет связана страница (страница, на которую делается ссылка). Свойство "rel" определяет тип связи между файлом (документом) и страницей. "type" определяет тип файла, который связывается со страницей. "media" - тип устройства, на котором должна отражаться связь с файлом ресурсов.

Свойство HREF

Значением этого свойства может быть любой файл, на который ссылается тег LINK . Адрес файла задается в любом доступном формате. Это могут быть как прямые сылки, так и относительные.

Свойство REL

Это свойство может принимать одно из следующих значений:

• top или home - ссылка на самую первую в иерархии сайта страницу.
• contents или toc - ссылка на файл оглавления сайта.
• index - ссылка на файл, который может выполнять индексный поиск по странице. Индексный поиск - это поиск нужного слова или словосочетания в пределах одной страницы.
• glossary - ссылка на файл, который является глоссарием страницы, и содержит термины и определения, которые упомянуты на странице. Обычно, ведет на краткий справочник.
• copyright - ссылка на файл, в котором показаны авторские права на страницу.
• next - ссылка на следующую страницу сайта по предполагаемому маршруту пользователя.
• previous - ссылка на предыдущую страницу сайта по предполагаемому маршруту пользователя.
• help - ссылка на файл помощи, в котором, скажем, более подробно расписано описанное на странице.
• search - ссылка на страницу поиска по сайту.
• start - точка входа, с которой начинается логическая структура сайта.
• chapter - ссылка на страницу, которая является главой текущей страницы.
• section - ссылка на страницу, которая является главным разделом текущей страницы.
• subsection - ссылка на страницу, которая является главным подразделом текущей страницы.
• bookmark - ссылка на закладку к текущей странице, установленную на другой странице.
• up или parent - ссылка на страницу, которая находится выше текущей страницы по иерархии сайта.
• first - ссылка на страницу, которая является первой по предполагаемому маршруту перемещения пользователя по сайту.
• last или end - ссылка на страницу, которая является последней по предполагаемому маршруту перемещения пользователя по сайту.
• child - ссылка на страницу, которая является дочерней по иерархии сайта в отношении к текущей странице.
• stylesheet - ссылка на файл css , в котором зранятся стилевые настройки оформления страницы.
• alternate - ссылка на альтернативный файл текущей страницы. Обычно, с таким свойством REL ссылаются на RSS-ленты обновлений сайта. Некоторые браузеры (Opera, Firefox) при обнаружении такого тега выводят в адресной строке кнопку для перехода на альтернативный файл.
• icon или shortcut icon - ссылка на иконку страницы. Иконка будет отображаться в заголовке страницы.
• canonical - свойство, разработанное для поисковых ботов. Это ссылка на оригинал материала, опубликованного на странице. Если у вас на сайте имеются 2 страницы с одинаковым контентом, то при помощи этого тега можно указать, который из контентов оригинал. Пример одинакового контента на одном сайте: страница с материалом и страница оптимизированная на печать.
• chapter - ссылка на страницу, которая является отдельной главой к текущей странице.
• appendix - ссылка на страницу добавления контента.

При использовании свойства rel="icon" или rel="shortcut icon" тега LINK иконка может быть любая, но, желательно, чтобы она была размером 16x16 пикселей и качеством 32 битов на пиксел. Возможны и анимированные иконки, но двигаться они будут только в браузере Firefox. Остальные браузеры будут показывать только первый кадр анимации.

Свойство TYPE

Это свойство определет тип файла, на который ссылается тег LINK . Значение этого свойства задается в MIME формате. Если вы подключаете файл CSS стилей, то MIME формат будет "text/css". Если ссылка ведет на другую страницу сайта, то значение этого свойства "text/html" или "text/xml", если на иконку, то "image/x-icon", если на rss-ленту, то "application/rss+xml". Это основные и самые используемые MIME-типы.

Свойство MEDIA

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

• all - все устройства.
• screen - экран монитора.
• print - устройство печати. Обычно - принтер.
• projection - проектор.
• braille - устройства, предназначенные для чтения слепыми, на основе системы Брайля.
• speech - устройства речевого вывода. Обычно - синтезаторы речи или речевые браузеры.

Обычно, для файлов стилей применяется MIME-тип "screen".

Свойство TITLE

Это свойство описывает файл, на который ссылается тег LINK . Свойство является необязательным и используется, в основном, для краткого описания или оглавления RSS-лент.

Примеры

Предлагаю несколько распространенных примеров, использующих тег LINK .

Подключение внешнего CSS файла стилей:

Подключение RSS канала новостей к странице:

Подключение своей иконки favicon производится двумя тегами LINK. Это нужно для поддержки тега разными браузерами:

сылка на главную страницу сайта:

Это лишь некоторые способы использования тега LINK . Вы можете использовать его по-своему, но в рамках описанных выше правил.

Вы можете присоедениться к моему микроблогу в Твиттере

rel=author и rel=publisher. Чем они отличаются друг от друга и какую из связей использовать для своего сайта? Можно ли использовать одновременно rel=author и rel=publisher? В этой статье дается пояснение к каждому из упомянутых атрибутов и инструкция, как их правильно использовать.

Что такое rel=author?

Авторская разметка Google это способ связать авторов с их контентом с помощью использования профиля Google+ и двустороннего подтверждения связи профиля с контентом (см. ). Создание этой связи дает ряд преимуществ:

— В результатах поиска рядом со сниппетами ваших страниц будет отображаться фото из профиля Google+.

— Увеличится кликабельность (CTR) сниппета. Можно получать больше трафика, оставаясь на тех же поизициях в поиске.

— При воровстве контента с вашего сайта, Google будет знать первоисточник и, скорей всего, показывать его выше сворованного.

— Это хорошо влияет на персональный брендинг и повышение узнаваемости автора.

— У вас появляется возможность иметь специальную панель в результатах поиска, при вводе пользователем навигационных/брендовых запросов. Эта панель не отображается, пока вы не наберете определенное вовлечение пользователей на странице Google+ (сколько именно нужно плюсов, постов или комментариев, пока не известно). В этой панели отображается ваш логотип, имя компании, количество фоловеров, кнопка подписки и ваши последние посты в Google+.

(кликните для просмотра примера непосредственно в Google)

По мнению некоторых экспертов, возможно, существует некий BrandRank для верифицированных брендов, и связь сайта со страницей Google+ может существенно улучшить ранжирование по тем запросам, в которых этот бренд является авторитетом.

Когда использовать rel=author, а когда rel=publisher?

Из-за того, что оба атрибута создают связь, возникает вопрос, как определить, что лучше использовать?

Из описанного выше, основная разница между rel=author и rel=publisher в следующем:

• rel=author относится к статьям (у разных статей могут быть разные авторы), rel=publisher относится ко всему сайту.
• rel=author для персональных профилей, rel=publisher для бизнес-страниц.
• в поиске rel=author дает возможность отобразить свое фото вместе со сниппетом сайта, rel=publisher будет отображать описание со страницы Google+ в боковой панели.
• rel=author добавляет фото по любым запросам, rel=publisher отображает панель только по брендовым запросам.

Эти теги также можно использовать совместно.

Если подвести итог, используйте rel=publisher для связи бизнес-страниц со всем сайтом, аrel=author для связи страниц/статей отдельного автора с его профилем в Google+. Сайт может иметь несколько авторов, а также бизнес-страницу. И в любом случае потребуется двусторонняя верификация, то есть ссылка не только с сайта, но и на сайт с настроек страницы или профиля Google+.

Несколько полезных советов:

— Добавьте на свой сайт виджет Google+ . Так посетителям будет легче добавлять страницу в свои круги.

или

— Если вы подтвердили сайт в панели вебмастеров Google, и на этом же аккаунте имеете персональный профиль Google+, дополнительно верифицировать сайт нет необходимости.

— Ознакомьтесь с ответами Google на часто задаваемые вопросы по авторской разметке.

Дата публикации: 01 декабря, 2013

Url разные, а контент страниц одинаковый. Думаете, ничего страшного? Всего лишь пара одинаковых страниц на сайте. Но одинаковый контент может попасть под фильтры поисковых систем. Чтобы этого не произошло, надо знать, как избавляться от внутренних дублей страниц.

Понятие дублей страниц и их виды

Дубли — это отдельные страницы сайта, контент которых полностью или частично совпадает. По сути, это копии всей страницы или ее определенной части, доступные по уникальным URL-адресам.

Что приводит к появлению дублей на сайте:

1. Автоматическая генерация дублирующих страниц движком системой управления содержимым сайта (CMS) веб-ресурса. Например:

   http://site.net/press-centre/cat/view/identifier/novosti/
   http://site.net/press-centre/novosti/

1. Ошибки, допущенные вебмастерами. Например, когда один и тот же товар представлен в нескольких категориях и доступен по разным URL:

   http://site.net/category-1/product-1/
   http://site.net/category-2/product-1/

1. Изменение структуры сайта, когда уже существующим страницам присваиваются новые адреса, но при этом сохраняются их дубли со старыми адресами. Например:

   http://site.net/catalog/product
   http://site.net/catalog/category/product

Есть два типа дублей: полные и частичные.

Что такое полные дубли?

Это страницы с идентичным содержимым, доступны по уникальным, неодинаковым адресам. Примеры полных дублей:

1. URL-адреса страниц со слешами («/», «//», «///») и без них в конце:
http://site.net/catalog///product ; http://site.net/catalog//////product.

2. HTTP и HTTPS страницы: https//site.net ; http//site.net.

3. Адреса с «www» и без «www»: http//www.site.net ; http//site.net.

4. URL страниц с index.php, index.html, index.htm, default.asp, default.aspx, home:
http://site.net/index.html ;
http://site.net/index.php ;
http://site.net/home.

5. URL-адреса страниц в верхнем и нижнем регистрах:
http://site.net/example/ ;
http://site.net/EXAMPLE/ ;
http://site.net/Example/.

6. Изменения в иерархической структуре URL. Например, если товар доступен по нескольким разным URL:
http://site.net/catalog/dir/tovar;
http://site.net/catalog/tovar;
http://site.net/tovar;
http://site.net/dir/tovar.

7. Дополнительные параметры и метки в URL.

• URL с GET параметрами : http://site.net/index.php?example=10&product=25. Страница полностью соответствует следующей: http://site.net/index.php?example=25&cat=10.
• Наличие utm-меток и параметров gclid. Utm-метки помогают предоставить в систему аналитики информацию для анализа и отслеживания различных параметров трафика. URL целевой страницы, к которой добавляются utm-метки, выглядят так:
  http://www.site.net/?utm_source=adsite&utm_campaign=adcampaign&utm_term=adkeyword
• Параметры gclid (Google Click Identifier) . Пометка целевых URL, которая добавляется автоматически для отслеживания данных о компании, канале и ключевых словах в Google Analytics. Например, если переходят по вашему объявлению для сайта http://site.net, то адрес перехода посетителя будет выглядеть так: http://site.net/?gclid=123xyz .
• Метка yclid . Помогает отслеживать эффективность рекламных кампаний в Яндекс Метрике. Метка позволяет отследить действия посетителя, который перешел на сайт по рекламному объявлению. Вот как выглядит адрес перехода:
  http://site.net/?yclid=321 .
• Метка openstat . Универсальная и также используется для анализа эффективности рекламных кампаний, анализа посещаемости сайта и поведения пользователей на сайте. Ссылка с меткой «openstat»:
  http://site.net/?_openstat=231645789.
• Дубли, которые создаются реферальной ссылкой. Реферальная ссылка это специальная ссылка с вашим идентификатором, по которому сайты распознают, от кого пришел новый посетитель. Например:
  https://site.net/register/?refid=398992 ;
  http://site.net/index.php?cf=reg-newr&ref=Uncertainty .

8. Первая страница пагинации каталога товаров интернет-магазина или доски объявлений, блога. Она зачастую соответствует странице категории или общей странице раздела pageall: http://site.net/catalog ; http://site.net/catalog/page1.

9. Неправильные настройки 404 ошибки приводят к появлению многочисленных дублей. Например: http://site.net/rococro-23489-rocoroc ; http://site.net/8888-??? .

Выделенный жирным текст может вмещать какие-либо символы и/или цифры. Страницы такого вида должны отдавать код ответа сервера 404 (не 200) или же перенаправлять на актуальную страницу.

Что такое частичные дубли?

В частично дублирующихся страницах контент одинаковый, но есть небольшие отличия в элементах.

Виды частичных дублей:

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

И тот же текст на странице с товаром:

Чтобы избежать дубля, не показывайте полную информацию о товарах на странице категории (каталога). Или используйте неповторяющееся описание.

2. Дубли на страницах фильтров, сортировок, поиска и страницах пагинации, где есть похожее содержимое и меняется только порядок размещения. При этом текст описания и заголовки не меняются.

3. Дубли на страницах для печати или для скачивания, данные которых полностью соответствуют основным страницам. Например:
http://site.net/novosti/novost1
http://site.net/novosti/novost1/print

Частичные дубли тяжелее обнаружить. Но последствия от них проявляются систематически и негативно отражаются на ранжировании сайта

К чему приводят дубли страниц на сайте

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

1. Проблемы с индексацией. При генерировании дублирующих страниц увеличивается общий размер сайта. Боты, индексируя «лишние» страницы, неэффективно тратят краулинговый бюджет собственника веб-ресурса. «Нужные» страницы могут вовсе не попасть в индекс. Напомню, что краулинговый бюджет это количество страниц, которое бот может просканировать за один визит на сайт.
2. Изменения релевантной страницы в выдаче. Алгоритм поисковика может решить, что дубль больше подходит запросу. Поэтому в результатах выдачи он покажет не ту страницу, продвижение которой планировалось. Другой итог: из-за конкуренции между дубль-страницами, ни одна из них не попадет в выдачу.
3. Потеря ссылочного веса страниц, которые продвигаются. Посетители будут ссылаться на дубли, а не на оригиналы страниц. Результат потеря естественной ссылочной массы.

Каталог средств для поиска дублированных страниц

Итак, мы уже выяснили, что такое дубли, какими они бывают и к чему приводят. А теперь перейдём к тому, как их обнаружить. Вот несколько эффективных способов:

Поиск дублей с помощью специальных программ

Атрибуты rel="next" и rel="prev"

С помощью rel="next" и rel="prev" можно связать между собой URL отдельных страниц. Поисковики будут распознавать контент этих страниц, как один большой свиток, а не отдельные URL.

Для этого на первой странице (http://site.net/catalog-page1 ) необходимо разместить в разделе (http://site.net/catalog-page1 ) тег, указывающий какая страница будет следующей:

Учитывая, что это первая страница, добавлять нужно только rel="next". На всех последующих страницах добавляем и атрибут rel="next", и rel="prev", которые будут указывать на предыдущий и следующий URL. Например, на второй странице (http://site.net/catalog-page2) нужно добавить ссылки:

На завершающей странице (http://site.net/catalog-pageN), как и на первой, необходимо указать только один атрибут. Важно: в данном случае он указывает на предыдущий URL:

• rel="prev" и rel="next" не являются для Google директивами, это лишь вспомогательные атрибуты;
• они не учитываются Яндексом;
• важно следить за корректностью генерации тегов и придерживаться четкой последовательности между страницами пагинации, чтобы не создавать бесконечные цепочки.

Метатег или же аналогичный: ; .

Атрибут rel="canonical"

Используйте метод, когда удалять страницу нельзя и её нужно оставить открытой для просмотра.

Тег для устранения дублей на страницах фильтров и сортировок, страницах с get-параметрами и utm-метками. Применяется для печати, при использовании одинакового информационного содержания на разных языковых версиях и на разных доменах. Атрибут rel="canonical" для разных доменов поддерживается не всеми поисковыми системами. Для Google он будет понятен, Яндекс его проигнорирует.

Указывая каноническую ссылку, мы указываем адрес страницы, предпочтительной для индексации. Например, на сайте есть категория «Ноутбуки». В ней фильтры, которые показывают разные параметры выбора. А именно: бренд, цвет, разрешение экрана, материал корпуса и т.д. Если эти страницы фильтров не будут продвигаться, то для них канонической указываем общую страницу категории.

Как задать каноническую страницу? В HTML-код текущей страницы помещаем атрибут rel="canonical" между тегами .... Например, для страниц:
http://site.net/index.php?example=10&product=25;
http://site.net/example?filtr1=%5b%25D0%,filtr2=%5b%25D0%259F%;
http://site.net/example/print.

Канонической будет страница http://site.net/example.

В HTML коде это будет выглядеть так: .

Выводы

1. Дубли — отдельные страницы сайта, контент которых полностью или частично совпадает.

2. Причины возникновения дублей на сайте: автоматическая генерация, ошибки, допущенные вебмастерами, изменение структуры сайта.

3. К чему приводят дубли на сайте : индексация становится хуже; изменения релевантной страницы в поисковой выдаче; потеря естественной ссылочной массы продвигаемыми страницами.

4. Методы поиска дублей : использование программ-парсеров (Netpeak Spider); поискового оператора site; панели для вебмастеров Google Webmasters Tools.

5. Инструменты устранения дублей: соответствующие команды в файле robots.txt; атрибуты rel="next" и rel="prev"; тег meta name="robots" content="noindex, nofollow"; тег rel="canonical"; 301 редирект.

Устранили дублирующий контент? Теперь необходимо проверить сайт ещё раз. Так вы увидите эффективность проведенных действий, оцените результативность выбранного метода. Анализ сайта на дубли рекомендуем проводить регулярно. Только так можно вовремя определить и устранить ошибки.

Типы ссылок

Существует много типов ресурсов, на которые может ссылаться документ. Это делается с помощью ключевых слов, указанных в атрибуте отношения (rel ). Они должны использоваться в разделе как метаданные:

• alternate ;
• author ;
• help ;
• icon ;
• license ;
• next ;
• prefetch ;
• prev ;
• search ;
• stylesheet .

Тег в HTML размещается в и , хотя чаще он встречается в в качестве метаданных. Тег может ссылаться на традиционную гиперссылку, используемую для навигации или присоединения к документу внешних ресурсов, таких как CSS и Javascript .

Alternate

Используется для альтернативного представления HTML документа .

В приведенном ниже примере представлены два альтернативных языка для данного документа HTML на английском — французский и испанский языки. Атрибут hreflang используется, чтобы сообщить пользовательскому агенту доступный код страны по стандарту ISO 639-1 :

Еще один пример использования HTML link rel предлагает три различных текстовых документа на английском, французском и испанском языках:

Author

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

В завершении можно добавить метатег author :

Help

Позволяет предоставить помощь посетителям страницы. Пользовательский агент, поддерживающий справку, может иметь два вида — основная вкладка для отображения документа и другая для вывода справки:

Icon

Это значение HTML link rel указывает на иконку страницы. Может быть множество иконок, представляющих страницу. Используется та, которая является наиболее подходящей:

License

Next

Указывает на следующую страницу в HTML-документе . Для поисковых систем весьма полезно знать, какая страница является следующей:

Prefetch

Это значение HTML link rel дает подсказку пользовательскому агенту о том, что он должен кэшировать ресурс для ускорения загрузки и обработки. Это делается, когда разработчик точно знает, что ресурсы, используемые на странице, будут запрашиваться:

Prev

Определяет предыдущую страницу в HTML-документе . Полезно для навигации по страницам:

Search

Определяет документ, который используется для поиска существующего документа. Как правило, это страница со специальной формой для поиска ключевых слов в документе. Для реализации рекомендуется использовать спецификацию OpenSearch :

Stylesheet

HTML link CSS используется для импорта таблицы стилей, используемой для отображения документа. Это делается с помощью каскадных таблиц стилей (CSS ):

Перевод статьи “HTML: The Link Tag ” был подготовлен дружной командой проекта