Меню
ГлавнаяИгры

Что всё это значит? HTML: Все о ссылках «A HREF REL

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

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

Примеры

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

Фильм "Звездные войны: Новая надежда" Новая надежда

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

Атрибуты Специальные атрибуты 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 » был подготовлен дружной командой проекта .

Это работает во всех браузерах (если кто-то когда-то придумает новый язык для оформления, тогда можно будет просто вернуть атрибут type и указать в его значении новый тип документа).

rel = alternate

Это отношение также весьма распространено. в сочетании с указанием медиа типа RSS или Atom «включает» так называемое «автоматическое обнаружение канала». Это позволяет организовать канал с последними статьями или новостями для читателей использующих, к примеру, Google Reader. Большинство браузеров тоже поддерживают автоматическое обнаружение такого канала и отображают специальный значок рядом с URL. (в отличии от rel="stylesheet" тут атрибут type нужен. Не выбрасывай его).

Ссылочное отношение rel="alternate" всегда было странным гибридом, даже в HTML4. В HTML5 его определение было уточнено и расширено для более точного описания веб контента. Как только что было показано, использование rel="alternate" в сочетании с type=application/atom+xml указывает канал Atom для текущей страницы. Но можно так же использовать rel="alternate" в сочетании с любым другим значением атрибута type для обозначения другого формата, например, PDF.

HTML5 так же закрывает глаза на запутанный вопрос — как указать отношение на документ с переводом. HTML4 говорит использовать в сочетании с rel="alternate" чтобы указать язык связанного документа. Но это не правильно: в списках ошибок HTML4 явно сказано, что использование rel="alternate" для указания языка документа является ошибкой. Но на этом дело пока и остановилось, вопрос не доработан. В HTML5 для указания языка документа используется .

Остальные ссылочные отношения в HTML5 rel="archives"

указывает, что ссылаемся на коллекцию записей, документов или другие материалы, представляющие исторический интерес. Ссылки на материалы из архива блогов могут содержать атрибут rel="archives"

Rel="external"

указывает, что документ, на который ведет ссылка, не является частью этого сайта, но текущей документ является частью того документа на который ссылаемся. Я думаю это пришло из WordPress, который использует эту связь для ссылок, оставленных комментаторами.

Rel="start", rel="prev" и rel="next"

определяет отношения между страницами, которые являются частями одной серии (например, главы книги или даже сообщения в блоге). Все вроде бы просто, но корректно используется только rel="next". Народ привык писать rel="previous" вместо rel="prev", rel="begin" и rel="first" вместо rel="start", используют rel="end" вместо rel="last". И еще, некоторые создают rel="up" для ссылок на «родительскую» страницу.

HTML5 включает rel="first", который получил наибольшее распространение как способ сказать, что «это первая страница серии» (rel="start" является синонимом, для поддержки обратной совместимости). Так же включены rel="prev" и rel="next" (поддерживается и rel="previous" для обратной совместимости), а так же rel="last" (последний документ в серии — противоположность rel="first") и rel="up".

Чтобы проще было понять как использовать rel="up", найди где-то и посмотри на навигацию вида «хлебные крошки» (ну или просто представь это себе). Главная страница, скорей всего, будет стоять первой, а текущая страница будет в конце. Так вот, rel="up" должен указывать на страницу, которая стоит перед последней (текущей) страницей в этой навигации.

Rel="icon"

второе по популярности ссылочное отношение. Обычно используется в паре со значением shortcut:

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

Ключевое слово any атрибута sizes означает что иконка может масштабироваться (используется векторный формат, вроде SVG). Если атрибут sizes отсутствует, браузер отобразит иконку с размерами, соответствующими реальному размеру графической картинки.

Rel="license"

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

означает, что ссылка не была одобрена автором данной страницы, и что она тут находится, скорее всего, по коммерческим соображениям. Это было придумано Google и стандартизовано сообществом микроформатчиков. Идея была таковой, что ссылки, снабженные таким атрибутом, не будут передавать PageRank и это избавит сообщество от спамеров в комментариях блогов. Как оказалось, это от спама не спасло, но сохранился. Многие популярные системы блогов по умолчанию добавляют всем ссылкам в комментариям .

rel="noreferrer"

указывает, что при переходе по такой ссылке ПА не должны включать в запрос HTTP заголовок Referer. Пока это не поддерживается браузерами, но недавно была добавлена поддержка rel="noreferrer" в Webkit nightlies, а значит, скоро появится в Safari, Chrome и других webkit-браузерах.

указывает адрес "pingback" сервера. Спецификация гласит: «система pingback — это возможность блогу автоматически получить уведомление, что на него кто-то сослался. Это предоставляет возможность собрать все комментарии/отзывы к статье в одном месте». Некоторые системы блогов, в частности WordPress, включают этот механизм у себя по умолчанию.

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

указывает, что документ, на который ссылаемся, содержит интерфейс для поиска для данной страницы и связанных с ней ресурсов. В частности, если хочешь чтобы rel="search" делал что-то полезное, то эта ссылка должна вести на Open Search документ с описанием для браузера, как ему выполнить поиск на данном ресурсе используя URL и ключевое слово. Поддержка формата Open Search (а вместе с ним и rel="search") была включена в IE7 и FF2.

служит для добавления, указанного в ссылке документа, в закладки браузера. Когда кликаешь на ссылку с rel="sidebar", показывается окошко с предложением добавить страницу в закладки. Сейчас поддерживается Opera и Mozilla, остальные браузеры это правило игнорируют.

указывает, что эта ссылка является тегом, относящимся к данной странице. Навигация по тегам (ключевые фразы, категории блога/сайта) впервые была применено Technorati, чтобы как-то классифицировать сообщения в блоге. Сначала их так и называли — теги Technorati. Позже тегирование было стандартизировано сообществом микроформатчиков и теги получили обозначение rel="tag". Большинство систем блогов добавляют ссылкам-тегам данный атрибут. Браузеры на это никак не реагируют. Это знак для поисковых систем о том, куда ведет данная ссылка.

Влад Мержевич

В интерфейс браузера Firefox, начиная с версии 2.0 встроена строка поиска, позволяющая без захода на сайт вводить поисковые запросы к Гуглу, Яндексу и другим системам. Идея оказалась удачной и ее впоследствии подхватили разработчики других браузеров. Несмотря на то, что подобным поиском пользуются многие, включая и создателей сайтов, большинство из них не подозревают, насколько просто и легко сделать собственный поисковый плагин для сайта. Плюсов у такого плагина несколько: пользователи начинают активнее использовать поиск, возрастает количество посетителей, повышается результативность сайта, улучшается юзабилити. Главное, что затрат практически нет. Если на сайте используется поиск, «прикрутить» для него плагин раз плюнуть.

В основе плагина лежит технология OpenSearch, которая представляет собой коллекцию небольших форматов для распространения результатов поиска. Эти данные могут использоваться браузером для перехода к нужной странице, вывода описания, картинок и других вещей. Поскольку я затрону лишь малую часть всех возможностей, отсылаю желающих к полному описанию спецификации по адресу http://opensearch.org .

Перейдем от теории к практике. Итак, у вас на сайте уже есть поиск и при вводе запрашиваемой строки выводятся результаты по адресу http://mysite.ru/search/?q=бла-бла. Вместо «бла-бла» может быть любая строка, конечно же. Создаем файл с расширением xml, назовем его search.xml, и сохраняем на сервере. Содержание этого файла следующее (пример 1).

Пример 1. Файл search.xml

Краткое название сайта Краткое описание поиска http://mysite.ru/favicon.ico UTF-8

Первые две строки в примере являются стандартными. Остальные элементы описаны ниже.

ShortName - краткое название сайта, как оно будет отображаться в строке поиска браузера, длина не более 16 символов. В имени недопустимо использовать теги HTML.

Description - краткое описание поисковой системы. Не должно превышать 1024 символа и содержать HTML-теги. Это необязательный параметр и его можно опустить.

Image - путь к иконке сайта в формате ICO, PNG или JPEG. Размер иконки обычно 16x16 пикселов. Элемент не обязателен и если иконки нет, удалите его из текста. Непременно должен быть указан тип файла через параметр type , для ICO - image/x-icon, PNG - image/png, JPG - image/jpeg.

Url - путь к результатам поиска. В параметре method пишется метод отправки данных (обычно GET), а в template указывается полный адрес к поисковой странице. Вместо поискового запроса надо написать {searchTerms}. Если для работы поиска требуются и другие параметры, их можно перечислить здесь же через амперсанд (?q={searchTerms}&lang=ru ).

InputEncoding - кодировка, в которой выводятся результаты поиска.

Теперь остается включить механизм добавления плагина в браузер пользователя. Это можно сделать двумя способами: через тег и JavaScript.

Использование тега

В теге добавьте следующую строку.

Здесь Title название поиска, URL относительный или абсолютный путь к файлу search.xml. К примеру, для сайта сайт эта строка имеет такой вид:

После включения указанной строки на сайт при открытии списка поисковых плагинов будет виден и ваш (рис. 1).

Рис. 1. Поисковый плагин в списке Firefox

Использование JavaScript

Пользователи не всегда догадываются, что в строку поиска можно добавить плагин с текущего сайта, поэтому следует предложить им это сделать явно, нажав на ссылку. Сама ссылка ведет не на документ, а на следующий скрипт (пример 2).

Пример 2. Скрипт для добавления плагина в браузер

function addEngine() { URL = "http://mysite.ru/search.xml"; if (window.external && ("AddSearchProvider" in window.external)) { window.external.AddSearchProvider(URL); } else { alert("Ваш браузер не поддерживает поисковый плагин!"); } }

Здесь переменная URL содержит путь к файлу search.xml. Скрипт работает в браузерах Firefox, Internet Explorer 7 и старше. Для остальных браузеров будет выведено сообщение с помощью alert() .

Создать ссылку можно разными способами - через тег , указав в качестве адреса решетку и добавив событие onclick (пример 3), либо вообще отказаться от ссылки, заменив ее тегом (пример 4).

Установить плагин

Пример 4. Вызов скрипта

Установить плагин

Технология OpenSearch не ограничивается простым перенаправлением на результаты поиска, с ее помощью также можно выводить в браузере подходящие варианты слов и даже изображения. Для этого используются .

В большинстве современных браузеров есть специальное окно поиска, где вы можете производить поиск по различным сайтам. В список поисковых систем можно добавлять собственные ресурсы. Это делается по технологии OpenSearch , которая и описывает поисковый механизм вашего сайта. Чтобы пользователь мог добавить ваш сайт в список своих поисковых систем, вам требуется сделать всего лишь два простых действия.

Сперва надо создать файл-описание поисковой системы вашего сайта. Вот примерный шаблон такого файла:

  • < OpenSearchDescription xmlns = "http://a9.com/-/spec/opensearch/1.1/" >
  • < ShortName > Site Name
  • < Description > Site Name - Search
  • < InputEncoding > windows - 1251
  • < Contact > your_mail @ domain
  • < Image width = "16" height = "16" > data : image / x - icon ; base64 , AAABAAEAE ... AAAA
  • < Developer > Admin
  • < Url type = "text/html" method = "GET"
  • template = "http://site/search?q={searchTerms}&do=action" />

    • Вы можете менять следующие поля: ShortName - краткое название сайта, не более 16 символов. Description - описание сайта, не более 1024 символов. InputEncoding - кодировка сайта. Contact - контактный ардес e-mail администратора сайта. Developer - имя или никнейм администратора сайта. Url - шаблон ссылки, которая формируется для обращения к странице поиска. Переменная {searchTerms} будет автоматически заменяться на строку, которую пользователь будет вводить в форму поиска браузера. В шаблоне она должна быть записана именно в таком виде. Image - иконка, которая будет отображаться рядом с названием вашего сайта. Она может быть двух типов: в виде ссылки на файл на сервере или в виде закодированных двоичных данных. Например:илиВ этом случае данные представляют собой содержимое файла иконки, сконвертированное в текстовое представление по алгоритму base64. По возможности придерживайтесь стандартного размера иконки - 16х16 пикселов. Это минимально необходимый набор параметров для файла описания. Полный их список вы можете найти в официальной спецификации OpenSearch и в руководстве по созданию поисковых плагинов для Firefox.

    После того, как файл-описание вашей поисковой системы создан и размещен на сервере, надо сообщить об этом браузеру пользователя. Делается это специальным мета-тегом в заголовке страницы:Здесь search.xml - имя файла-описания и полный путь до него, title - краткий заголовок, который будет отображаться в меню добавления поисковой системы в браузере, остальные поля служебные и не должны меняться. Теперь при заходе на web-страницу с таким мета-тегом, например браузером Firefox, в окне поиска появится кнопка "плюсик". При нажатии на нее поисковая система вашего сайта будет добавлена в список поисковых систем пользователя. Firefox обрабатывает OpenSearch-файл и конвертирует его в собственный поисковый плагин.

    Для личных нужд наклепал несколько поисковых плагинов для Mozilla Firefox. Это поисковики по трекерам kinozal.tv, demonoid.com, thepiratebay.org, по базе форматов файлов formats.ru, поисковики для программеров wotsit.org, php.net, msdn.com, и, конечно, проверка правописания gramota.ru. Может кому и пригодится.

    Mozilla.Firefox.Searchplugins.zip (8,399 bytes)


    Для установки скопируйте файлы в папку \Mozilla Firefox\searchplugins и перезапустите браузер.

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

    Как правило, в таких случаях страницы для компьютеров размещаются в домене www.example.com , а соответствующие страницы для мобильных устройств – в домене m.example.com . Google не отдает предпочтения тому или иному формату URL. Главное требование – страницы должны быть доступны для агентов пользователя Googlebot.

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

    Кратко

      Указывайте, как соотносятся два URL, при помощи тегов с элементами rel="canonical" и rel="alternate".

      Правильно определяйте строки агента пользователя и перенаправляйте их.

    Атрибуты для обычных и мобильных URL

    Чтобы наша система сканирования лучше распознавала URL, предназначенные для мобильных устройств, рекомендуем использовать следующие аннотации:

  • Разместите на каждой странице для компьютеров специальный тег link с атрибутом rel="alternate", который будет вести на соответствующую страницу мобильного сайта. Это поможет роботу Googlebot найти контент, оптимизированный для мобильных устройств.
  • На странице для мобильных устройств добавьте тег link rel="canonical" со ссылкой на соответствующую обычную страницу.

    • Наши системы поддерживают два способа добавления таких атрибутов: в HTML-коде страниц и в файлах Sitemap . Предположим, что URL обычной страницы – http://example.com/page-1 , а URL соответствующей страницы для мобильных устройств – http://m.example.com/page-1 .

    Аннотации в коде HTML

    На обычной странице (http://www.example.com/page-1) добавьте следующий код:

    На странице для мобильных устройств (http://m.example.com/page-1) используйте следующие атрибуты:

    В URL, который размещен на странице мобильного сайта и указывает на аналог этой страницы с обычным форматированием, необходимо добавить тег rel="canonical".

    Аннотации в файлах Sitemap

    Google поддерживает добавление атрибутов rel="alternate" на страницы для компьютеров с помощью файлов Sitemap. Пример:

    http://www.example.com/page-1/

    При этом тег rel="canonical" для URL страницы мобильного сайта обязательно нужно добавить непосредственно в код HTML этой страницы.

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

    На странице для компьютеров могут использоваться следующие атрибуты тега:

    • Атрибут rel="alternate" говорит о том, что тег указывает на альтернативный URL для этой страницы.
    • В качестве значения атрибута media используется строка медиа-запроса CSS, в которой указывается, при каких условиях Google должен использовать альтернативный URL. В этом примере приведен медиа-запрос, который обычно используется для таргетинга на мобильные устройства.
    • Атрибут href указывает, где находится альтернативный URL. В данном случае это страница в домене m.example.com.

    Эти атрибуты помогают роботу Googlebot найти ваш контент, а нашим алгоритмам – определить взаимосвязь между обычными и мобильными страницами вашего сайта. Когда вы используете разные URL для одного и того же контента в различных форматах, атрибуты сообщают системе, что эти два URL содержат одинаковый контент и их следует считать одним объектом, а не двумя. Если обычная и мобильная версии страницы интерпретируются как независимые объекты, то в результатах Поиска на ПК могут присутствовать оба URL. В таком случае их рейтинг будет ниже, чем если бы роботу Google было известно об их взаимосвязи . Также обратите внимание на следующие распространенные ошибки в этой конфигурации:

    • Если вы используете атрибуты rel="alternate" и rel="canonical", то каждой обычной странице должна соответствовать только одна мобильная и наоборот.
    • Тщательно проверяйте параметры переадресации: убедитесь, что обычные страницы случайно не перенаправляют пользователя на одну и ту же страницу с другим содержанием.

    Если вы решили создать отдельный сайт для обильных устройств, избегайте распространенных ошибок, например в переадресации мобильных пользователей. Автоматическая переадресация

    Если ваш сайт направляет браузеры обычных компьютеров и браузеры мобильных устройств на разные URL, вы можете использовать автоматическую переадресацию посетителей. В этом случае роботов Googlebot нужно перенаправлять так же, как и агенты обычных пользователей.

    Поддерживаемые способы переадресации

    Робот Googlebot поддерживает следующие способы переадресации:

    • переадресация с помощью HTTP;
    • переадресация с помощью JavaScript.
    Переадресация с помощью HTTP

    Переадресация с помощью HTTP обычно используется для перенаправления на URL для конкретных устройств. Как правило, она выполняется с учетом агента пользователя, указанного в заголовках HTTP-запроса. Переадресация должна соответствовать альтернативному URL, указанному в атрибуте rel="alternate" целевой ссылки или в файле Sitemap.

    В этом случае неважно, возвращает ли сервер при переадресации код статуса 301 или 302. Однако, по возможности рекомендуется использовать код 302.

    Переадресация с помощью JavaScript

    Если возникают сложности с настройкой переадресации с помощью HTTP, то для перенаправления пользователей можно использовать JavaScript. Для этого нужно задать соответствующие URL с помощью тега link rel="alternate" . Необходимо обеспечить приемлемое для пользователя время реакции, поскольку перед выполнением переадресации происходит скачивание страницы, а затем синтаксический анализ и запуск кода JavaScript.

    Существует множество способов такой переадресации. Например, можно обрабатывать запросы контента, которые уже используются на сайте. Для этого подойдет функция JavaScript matchMedia() .

    Однонаправленная и двунаправленная переадресация

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

    Робот Googlebot поддерживает оба варианта. Выбирайте тот, который больше подойдет вашим пользователям. Самое главное – чтобы перенаправление выполнялось без ошибок и открывались нужные страницы. Если переадресация будет реализована некорректно, некоторые пользователи вообще не увидят нужный контент.

    Примечание. Ознакомьтесь с , чтобы не повторять их.

    Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our . Java is a registered trademark of Oracle and/or its affiliates.

    Обновлено Январь 14, 2019