Содержание

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

Атрибут «rel=» активно используется разработчиками сайтов для взаимодействия с поисковыми системами. Он включает в себя несколько значений, например nofollow или canonical. Каждый из них предназначен для решения определенных задач.

В сегодняшней статье я подробно разберу атрибут «rel=» и покажу на примерах, в каких случаях его лучше всего использовать.

Атрибут «rel=»: определение и предназначение

Rel (от англ. «relationship» – отношение) – это атрибут HTML, описывающий ссылку. Он обозначает, что это за ссылка и на какой адрес она ведет. Работает это следующим образом: когда ссылка направляет пользователя на адрес, атрибут рассказывает поисковым системам, почему ссылка ведет на этот адрес. Например, ссылаться можно на файл стилей, который взаимодействует со страницей.

Еще ссылка может вести на PDF или иноязычную версию документа. Ссылка, как взаимосвязь между текущим и иным документом, часто используется в электронных книгах для переадресации на следующую или предыдущую страницу.

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

Атрибут rel может использовать вместе с тегом <a>:

<a rel="..." href="...">...</a>

Также допустимо его появление и в теге <link>:

<link rel="..." href="...">

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Значения атрибута «rel=»

Если мы говорим об атрибуте rel, то чаще всего под ним подразумевается использование значения «nofollow», но есть и другие не менее важные значения. 

rel=nofollow

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

<a rel="nofollow" href="index.html">Эту страницу не нужно посещать</a>

Использование такого значения оправдано на сайтах с формами для комментариев: пользователи могут оставлять ссылки на некачественные ресурсы, а из-за этого сайт рискует потерять доверие поисковых систем.

rel=alternate

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

<a rel="alternate" type="application/pdf" href="page.pdf">Страница в формате PDF</a>

Также есть еще одна вариация:

...rel="alternate" hreflang="en"...

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

Благодаря этому поисковики могут автоматически показывать корректную языковую версию на основе географических и языковых данных.

<a rel="alternate" hreflang="en" href="english-version.html">English</a>

rel=canonical

Указывает на предпочитаемый адрес, который будет участвовать в поиске. Используется в теге <header>:

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

rel=author

Указывает на то, что приведенная ссылка относится к информации об авторе данной страницы или статьи.

<a href="/author-page.html" rel="author">link text</a>

rel=bookmark

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

<a rel="bookmark" href="about.html">Постоянная ссылка на страницу</a>

rel=help

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

Например, в форме на сайте это прописывается через тег <a>:

<form>       

<label for="comment">Comment:</label>   

<textarea></textarea>       

<input type="submit" value="Text Comment">       

<a rel="help" href="comments.html">Help</a>   

</form>

rel=license

Указывает на то, что по ссылке размещено лицензионное соглашение, которое относится к основному тексту страницы.

<a rel="license" href="license.html">Посмотреть лицензионное соглашение</a>

rel=dns-prefetch, preconnect, prefetch, preload

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

<a rel="prefetch" href="license. html">Здесь что-то интересное</a>

rel=tag

Определяет категорию сайта или ключевой запрос:

<a rel="tag" href="search.html">Эта ссылка относится к странице с каталогом</a>

rel=search

Этот тип сообщает, что ссылка ведет на интерфейс поиска:

<a rel="search" href="search.html">Поиск по сайту</a>

rel=icon

Необходим для того, чтобы связать содержимое сайта с иконкой:

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

rel=external

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

<a rel="external nofollow" href="page.html">Открыть в новой вкладке</a>

rel=first, up, prev, next, last

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

Они ведут в начало, конец, на предыдущую или последующую страницу:

<ul>

  <li><a rel="next" href="page-1.html">Первая страница</a></li>

  <li>Исходная страница</li>

  <li><a rel="prey" href="page-3.html">Последняя страница</a></li>

</ul>

Заключение

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

Атрибут «rel=» что собой представляет и для чего нужен? — статьи СТК Промо

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

Когда определенная ссылка переводит нас на другой ресурс, атрибут rel используется для объяснения логики – почему именно на этот адрес.

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

Сегодня браузеры практически не обращают внимания на атрибут rel, но на него обращают внимание роботы поисковых систем. Некоторые ресурсы, такие как соцсети, также лучше будут взаимодействовать с сайтом, если типы ссылок на нем будут определены. Возможно использование, как к ссылке с тегом <a> с таким синтаксисом:

<a rel="..." href="...">...</a>

Также возможно использование <link>, который отвечает за связь с другим документом. В этой ситуации синтаксис будет таким:

<link rel="..." href="...">

Сегодня активно используют «nofollow». Это значение создает запрет на переход поисковой системы по определенной ссылке. Другими словами не передает им PR и тИЦ. Также используют и другие значения, такие как «canonical». Оно определяет, какой адрес является предпочтительным для поисковых машин. Использование rel может применяться более широко:

rel=nofollow

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

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

rel=alternate

Используется для указания того, что ссылка ведет на альтернативное изображение страницы (версия для печати, PDF):

<a rel="alternate" type="application/pdf" href="page.pdf">PDF версия страницы</a>

Для этого типа можно задать hreflang, что позволит указать на то, что ссылка ведет на иноязычную версию:

<a rel="alternate" hreflang="en" href="english-version.html"> Spanish version</a>

rel=canonical

Это значение дает указание на адрес сайта, которому отдается предпочтение при поиске. Используется в теге <link> в хэдере:

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

rel=bookmark

Указывает на то, что ссылка не меняется:

<a rel="bookmark" href="about.html">Постоянная ссылка на страницу</a>

rel=author

Используется для сообщения, что ссылка ведет на сведения об авторе страницы (сайта):

<a rel="author" href="about.html">О сайте</a>

rel=help

Говорит о том, что ссылка ведет на текст, являющийся справочной информацией.

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

Эти примеры показывают, что ссылка ведет на контент, раскрывающий информацию о самом тексте, который расположен в комментариях.

rel=license

Указывает на то, что по ссылке размещено лицензионное соглашение, которое относится к основному тексту страницы. Размещение ссылки должно быть ограничено тегом main. Это определяет контент, к которому ссылка привязана:

<a rel="license" href="license.html"> Лицензионное соглашение</a>

rel=dns-prefetch, preconnect preload, preconnect, prefetch

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

<a rel="prefetch" href="license.html">Важная информация!</a>

rel=tag

Определяет категорию сайта или определяет ключевой запрос:

<a rel="tag" href="search.html">Эта страница относится к странице поиска</a>

rel=search

Такая ссылка ведет к поиску на сайте:

<a rel="search" href="search. html">Поиск по сайту</a>

rel=first, up, prev, next, last

Такие ссылки необходимы для навигации по странице. Они ведут на начало, конец, предыдущую, последующую страницы:

<ul>
  <li><a rel="next" href="page-1.html">2 страница</a></li>
  <li>Текущая страница</li>
  <li><a rel="prey" href="page-3.html">4 страница</a></li>
</ul>

rel=icon

Необходима для того, чтобы связать содержимое сайта с иконкой:

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

Многие браузеры не учитывают это значение и автоматически связывают содержимое с основным логотипом ресурса. Размер иконки можно менять, для этого используется значение size: 

<link rel="icon" href="favicon.png" type="image/png"></link>

rel=external

Такое значение говорит о том, что ссылка будет открыта в новом окне. Также она будет индексироваться. В платформе WordPress это часто используется для комментариев:

<a rel="external nofollow" href="page.html">Открыть в новом окне</a>

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

Как настроить атрибут rel=»canonical»

18606 2 1

How-to – Читать 6 минут

Прочитать позже

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — КОД СТРАНИЦ

Инструкцию одобрила
SEO-специалист в Импульс-Дизайн

Оксана Артюшенко

Атрибут rel=»canonical» определяет среди похожих страниц сайта приоритетную — каноническую. Наличие страницы-первоисточника дает верный сигнал поисковой системе. Неоптимизированный дублированный контент отрицательно сказывается на позициях сайта в выдаче.

301 редирект или rel=»canonical»?

К наиболее применяемым и рекомендуемым методам для решения проблемы страниц-дублей относится 301 редирект. Однако данный инструмент может не подойти вебмастеру по ряду причин, например:

  • слишком сложная и долгая реализация;
  • страницы с похожим контентом важны для сайта и пользователей.

Атрибут rel=»canonical» является альтернативным и сравнительно быстрым способом указать, какая из похожих страниц — основная.

Как выглядит каноническая ссылка

Канонические ссылки (canonical URL) — это указатели в технической навигации сайта, направляющие поисковую систему к нужным страницам. С ними индексация сайта базируется не на случайном выборе поисковиком одной страницы из похожих, а на полученных «подсказках» — какая страница приоритетна, а какая второстепенна.

Представим, что на сайте есть страницы-дубли: page1, page2, page3, из которых page1 — основная. В <head> страниц page2 и page3 указываем ссылки-указатели, которые ведут на приоритетную страницу page1. Эти URL будут выглядеть так:

<link rel="canonical" href="http://shop.com/page1.html"/>

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

Примеры использования канонических ссылок

Рассмотрим несколько случаев, когда целесообразно применять канонические URL.

#1

Несколько видов сортировки

Ситуация: Для каждой категории товара торговой площадки предусмотрено несколько вариантов сортировки: по цене, новизне, рейтингу и т.д. В URL-адресе обозначен параметр сортировки столов sort и значение rate: http://shop.com/tables.html?sort=rate

Решение: Указываем link canonical на страницах с разными параметрами, направляя их на основную сортировку — «по умолчанию».

<link rel="canonical" href="http://myshop.com/tables.html"/>

#2

Идентичные результаты поиска

Ситуация: Два посетителя интернет-магазина бытовой техники выбирают холодильник.

Посетитель 1 начинает поиск через бренд, постепенно сужая параметры до категорий, подкатегорий и т.д.: LG / Холодильники / No Frost / Хром.

Посетитель 2 стартует от категории товаров: Холодильники / LG / Хром / No Frost.

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

Решение: Определяем из двух страниц выдачи одну каноническую и ставим ссылку на нее во второстепенной.

#3

Страницы похожих товаров

Ситуация: Товар на сайте с определенной ценой представлен в нескольких цветах. Под каждый цвет отведена отдельная страница.

Решение: Выбираем из страниц-дублей одну приоритетную и указываем канонические ссылки на нее со всех остальных.

#4

Программа лояльности для клиентов и партнеров

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

http://shop.com/tables.html?partner=futKp2ka4
http://shop.com/tables.html?vip=pqwLz7ty6

Решение: Добавляем ссылки с атрибутом rel=»canonical» в HTML-код страниц для привилегированных участников и направляем их на стандартные пользовательские:

<link rel="canonical" href="http://shop.com/tables.html" />

#5

Страницы пагинации

Ситуация: Использование пагинации на сайте формирует частичные дубли контента.

Решение: Если на сайте есть страница «Показать все», ставим канонические URL со страниц пагинации на нее.

#6

Работа с UTM-метками

Ситуация: На сайте отслеживается эффективность рекламных кампаний с помощью UTM-меток.

Решение: Для склеивания дублей размещаем на странице с UTM каноническую ссылку с указанием на основную страницу, без метки.

Какую страницу выбрать канонической

Иногда трудно определить, какую страницу считать основной, а какую второстепенной. Чтобы выбрать страницу, наиболее предпочтительную для индексирования, следует обратить внимание на такие параметры:

  • посещаемость страницы;
  • наличие внешних/внутренних ссылок и их количество.

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

При использовании канонических ссылок вебмастера часто ожидают подводные камни. Эти несложные правила помогут избежать типичных ошибок.

Одна страница — одна каноническая ссылка в <head>.

Убедитесь, что каноническая страница в индексе.

Не усложняйте структуру ссылок, выстраивая цепочки канонических URL.

При размещении ссылок с атрибутом rel=»canonical» разными методами, например, страницы сайта и XML-карта, URL-адреса приоритетных страниц должны совпадать.

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

Неправильно: <link rel=»canonical» href=»shop.com/tables.html» />
Правильно: <link rel=»canonical» href=»http://shop.com/tables.html» />

Другие способы использования канонических URL

Размещение SEO-canonical в <head> страницы — это основной способ реализации данного метода. В качестве альтернативы ссылку можно прописать в XML-карте сайта или через ответ сервера, в зависимости от формата документа.

В последнем случае можно использовать канонический URL для pdf-файла, указав ссылку в http-заголовке.

Заключение

С помощью атрибута rel=»canonical» SEO-специалист может управлять дублированным контентом на сайте и направлять поисковые системы на выбранные страницы.

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

» title = «Как использовать атрибут rel=»canonical» 16261788196243″ />

«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.

Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами 😉

Оцените статью по 5-бальной шкале

4. 38 из 5 на основе 12 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Рекомендуемые статьи

How-to

Denys Kondak

Как оптимизировать размер страниц на сайте

How-to

Denys Kondak

Как правильно оформить карточку товара в интернет-магазине

How-to

Denys Kondak

Как провести анализ логов сайта

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

Поделитесь статьей с вашими друзьями

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

Для чего нужен атрибут «rel=»

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

Когда определенная ссылка переводит нас на другой ресурс, атрибут rel используется для объяснения логики – почему именно на этот адрес. Ссылаться можно на страницу, содержание которой взаимосвязано с текущим документом, или на файл, который нужно использовать с этим документом. Еще ссылка может быть PDF или иноязычной версией документа. Ссылка, как взаимосвязь между текущим и иным документом используется часто в электронных книгах для переадресации на следующую (предыдущую) страницу.

Сегодня браузеры практически не обращают внимания на атрибут rel, но на него обращают внимание роботы поисковых систем. Некоторые ресурсы, такие как соцсети, также лучше будут взаимодействовать с сайтом, если типы ссылок на нем будут определены. Возможно использование, как к ссылке с тегом <a> с таким синтаксисом:

Также возможно использование <link>, который отвечает за связь с другим документом. В этой ситуации синтаксис будет таким:

Сегодня активно используют «nofollow». Это значение создает запрет на переход поисковой системы по определенной ссылке. Другими словами не передает им PR и тИЦ. Также используют и другие значения, такие как «canonical». Оно определяет, какой адрес является предпочтительным для поисковых машин. Использование rel может применяться более широко:

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

Используется для указания того, что ссылка ведет на альтернативное изображение страницы (версия для печати, PDF):

Для этого типа можно задать hreflang, что позволит указать на то, что ссылка ведет на иноязычную версию:

Это значение дает указание на адрес сайта, которому отдается предпочтение при поиске. Используется в теге <link> в хэдере:

Используется для сообщения, что ссылка ведет на сведения об авторе страницы (сайта):

Эти примеры показывают, что ссылка ведет на контент, раскрывающий информацию о самом тексте, который расположен в комментариях.

Указывает на то, что по ссылке размещено лицензионное соглашение, которое относится к основному тексту страницы. Размещение ссылки должно быть ограничено тегом main. Это определяет контент, к которому ссылка привязана:

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

Такие ссылки необходимы для навигации по странице. Они ведут на начало, конец, предыдущую, последующую страницы:

Многие браузеры не учитывают это значение и автоматически связывают содержимое с основным логотипом ресурса. Размер иконки можно менять, для этого используется значение size:

Такое значение говорит о том, что ссылка будет открыта в новом окне. Также она будет индексироваться. В платформе WordPress это часто используется для комментариев:

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

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

  • Использование записи rel=canonical определяет наиболее предпочтительную для индексации страницу для поисковых роботов.
  • Помогает улучшить ссылочные показатели страниц доступных по множеству ссылок для правильного ранжирования в поиске.
  • Канонический URLS решает проблемы с дублированием контента.

Пример: 

<link rel="canonical" href="https://var.com/main.html"/>

Приведенный выше код означает:

  • Что данная страница должна индексироваться по приведенной ниже ссылке
  • «https://var.com/main.html».

Цель

Основная цель использования записи rel=canonical — указание предпочтительного для индексации поисковыми роботами URL

Зачем указывать для поисковых роботов URL-ы?

Чтобы ваш сайт лучше ранжировался в выдаче. Основным фактором для ранжирования является количество сайтов, которые ссылаются на данную страницу.

Основные проблемы, которые rel=canonical решает

В упрощенном примере может показаться, что сайт состоит только из одной страницы.

Предположим, что есть сайт с адресом www.example.com и так как он состоит только из одной страницы, вроде бы не должно быть проблем с дублями. Верно?

Не верно.

Ниже приведен список возможных вариаций адреса, по которому доступен данный сайт.

  • http://www.example.com/
  • http://www.example.com
  • http://example.com/
  • http://example.com
  • https://www.example.com/
  • https://example.com/
  • http://www.example.com/index.html
  • http://example.com/index.html
  • https://www.example.com/index.html
  • https://example.com/index.html

И это не полный список.

Теперь обратимся к пользователю, который хочет указать ссылку на этот сайт.

Ссылка может быть любой из приведенного списка вариаций.

Как это повлияет на ранжирование

Если несколько человек укажут 10 разных вариантов ссылки на страницы, то каждая версия страницы, будет иметь только одну ссылку.

Однако, если вы укажете канонический URL, тогда у вас будет 10 ссылок на один url, а не 1 ссылка на 10 url-ов.

Динамические url-ы

Допустим у нас есть страница, которая продает носки, и ее URL:

http://www.example.com/socks.html

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

http://www.example.com/socks.html?color=purple

По данному сценарию, можно понять, что мы имеем множество различных URL-ов, по которым можем попасть на страницу по носкам.

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

Канонические ссылки — лучший вариант, который рекомендуют все поисковики и профессионалы по продвижению. Я использую их на каждой странице своего сайта.

Где указывать rel=canonical used?

Как правило запись добавляют в тэг head.

Примечание: Можно также указать запись и в header сайта, однако данный способ не всегда хорошо работает и не всеми поддерживается.

Что такое rel=dns-prefetch?

  • Это способ ускорить загрузку веб-страницы, с помощью предварительного разрешения доменных записей.
  • Использование rel=dns-prefetch предполагает, что браузер сначала сделает вызов DNS необходимого домена, до фактической загрузки.

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

<link rel="dns-prefetch" href="https://cdn.varvy.com">

Приведенный выше код означает:

  • Я хочу получить доменное имя, перед загрузкой
  • Имя домена «cdn. varvy.com»

Цель

Основная цель использования rel=dns-prefetch – это ускорение загрузки веб-страниц, когда для страниц используются разные домены.

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

Процесс часто называют «DNS prefetching».

Определение W3C

«Предзапрос ссылки, используется для определения источника, который будет использован для загрузки необходимых ресурсов, а также для того, чтобы браузер получил данные как можно быстрее.»

Где используется rel=»dns-prefetch» used?

В тэге head документа.

Важность применения DNS предзагрузки

В жизни можно быть уверенным в двух вещах — в смерти и налогах.

При загрузке страницы, можно быть уверенным в одном запросе DNS на один домен.

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

Поэтому используйте возможность минимизировать dns запросы.

Где полезно применять DNS предзагрузку?

Например, у вас на сайте целая пачка js файлов, которые используются при загрузке страницы. У вас также могут использоваться другие сторонние инструменты (adsense, seo инструменты, инструменты маркетинга и т.д.).

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

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

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

Где НЕ полезен DNS предзапрос?

Если все ресурсы и файлы страницы лежат на одном домене с html.

Если все файлы js, css, картинки и т. д. лежат на одном домене вместе с самим сайтом, тогда нет необходимости указывать предзапрос, это может только навредить.

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

Перед тем как делать предзапрос DNS, возможно вам стоит узнать как можно уменьшить количество вызовов доменов. Я понимаю, что не на каждом сайте это можно сделать, но все же задайте себе 3 вопроса:

  1. Есть ли на странице ресурсы с разных доменов?
  2. Данные ресурсы вызываются одинаково?
  3. Могу ли я уменьшить кол-во доменов?

1. Есть ли на странице ресурсы с разных доменов?

Если HTML файл лежит на домене example.com, а CSS на cdn.example.com, а картинки подгружаются с 1234bucket.cdn.com, значит вы делаете загрузку с трех разных доменов, а могли бы перенести все эти ресурсы на один.

2. Данные ресурсы вызываются одинаково?

Если один CSS файл грузится c «www.example.com», а другой с «example.com», нужно это исправить. Убедитесь, что оба ресурса вызываются либо с версии www либо без «www».

То же самое касается https vs http, довольно распространенная практика.

3. Могу ли я уменьшить кол-во доменов?

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

Узнайте, как загружаются ваши страницы, с помощью сервиса page resource tool, так вы узнаете какие домены вызываются при загрузке.

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

  • Использование rel=nofollow сообщает поисковым роботам, чтобы они не следовали ссылке.
  • Это указывает на то, что ссылка не подтверждается оригинальным автором или издателем страницы.
  • Он также используется, когда ссылка включена из-за коммерческой (оплачиваемой) связи.

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

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

Приведенный выше код говорит. ..

  • Вот ссылка на example.com
  • Если вы — поисковая система, пожалуйста, не отдавайте должное этой ссылке, поскольку я ее не одобряю.

Определение W3C

«Ключевое слово nofollow указывает, что ссылка не подтверждена оригинальным автором или издателем страницы или что ссылка на ссылочный документ была включена, прежде всего, из-за коммерческих отношений между людьми, связанными с этими двумя страницами.» 1

Где используется rel=»nofollow»?

Поскольку rel=nofollow является директивой, специфичной для ссылок, она используется в HTML-ссылке.

До появления rel=nofollow вам приходилось ставить nofollow для всех ссылок на странице, либо вообще ничего. Теперь, когда стал доступен rel=nofollow, мы использовать атрибут для конкретной ссылки.

Цель

Основными причинами существования rel=nofollow является контроль спама и запись платных ссылок.

  • 2004: поисковые системы вводят rel=nofollow для управления спамом комментариев
  • 2005: рекомендуется Google для платных ссылок
  • 2016: добавлено в руководство Google для веб-мастеров

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

Когда использовать rel=»nofollow»?

Существует четыре основных сценария, когда рекомендуется rel=nofollow.

1. Ненадежный контент

Есть много ситуаций, когда вы можете не контролировать, что люди публикуют на вашем сайте. Общие сценарии …

  • Комментарии к блогу
  • Обсуждение форума
  • Социальные виджеты

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

2. Платные ссылки

Google наказывает сайты, которые не добавляют rel=nofollow к платным ссылкам.

Если у вас есть следующие типы ссылок, вы не должны следовать им …

  • Платная ссылка (кто-то дал вам деньги или услуги, чтобы добавить ссылку)
  • Партнерские ссылки
  • Ссылка рекламного объявления
  • Ссылки с оптимизированным текстом-якорем в статьях или пресс-релизах, распространяемых на других сайтах

Добавление rel=nofollow к платным ссылкам уже включено в руководства Google для веб-мастеров. Подробнее о платных ссылках читайте здесь.

3. Приоритезация сканирования

Приоритезация сканирования означает изменение способа взаимодействия поисковых роботов, таких как Googlebot, с вашим сайтом.

В некоторых сценариях существует ограничение на то, сколько страниц поисковые роботы будут сканировать.

Более простым примером этого было бы, если на веб-сайте было 100 страниц, и по какой-то причине 90 из этих страниц не были важны для поисковых систем или ранжирования (страницы входа, страницы результатов поиска, политики конфиденциальности или что-то еще, что на самом деле не имеет значения для ранжирования).

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

Добавив rel=nofollow к вашим внутренним ссылкам на эти 90 страниц, вы превратите свой 100-страничный веб-сайт в 10-страничный веб-сайт в отношении робота Googlebot и других поисковых систем.

Это определило бы «приоритет» этих десяти страниц.

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

4. Защита от наказания

Основная причина, по которой люди используют rel=nofollow, заключается в том, чтобы избежать штрафа за ранжирование в поисковых системах.

  • Не использовать nofollow для платных ссылок? — Ваш рейтинг будет снижен в Google.
  • Не использовать rel=nofollow на сомнительных ссылках? — Ваш рейтинг будет снижен в Google.
  • Не использовать rel=nofollow в своих пресс-релизах? — Ваш рейтинг будет снижен в Google.

Что касается функциональности rel=nofollow, то это защиты от спама. Что касается человеческой реальности, почему nofollow активно используется …

Защита от штрафов/наказаний/санкций со стороны поисковой системы.

Иногда это означает, что веб-мастер будет злоупотреблять rel=nofollow, а не рисковать чем-либо.

Как мы используем rel=nofollow

Мы используем nofollow на этом сайте примерно на каждой странице. Способ, которыми мы пользуемся, это обозначать платные ссылки и партнерские ссылки.

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

Единственными ссылками nofollow являются ссылки, которые вы видите на боковой панели партнерские ссылки в объявлениях.

Мы делаем это, следуя руководству Google для веб-мастеров по платным ссылкам и рекламным объявлениям.

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

  • Атрибут rel=author указывает на то, что приведенная ссылка относится к информации об авторе данной страницы или статьи.
  • Атрибут указывает взаимосвязь между двумя страницами: той, на которой он расположен и документом об авторе.

Пример:

<a href="/author-page.html" rel="author">link text</a>

Приведенный выше код означает:

  • Что есть ссылка «author-page. html»
  • и данная ссылка относится к документу с информацией об авторе.

HTML5 определение

«атрибут author указывает на то, что документ, на который ссылаются, предоставляет более подробную информацию об авторе контента, расположенного в текущем блоке (где расположен сам атрибут) или всего контента на странице»

Где применяется?

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

Цель

Указать взаимосвязь между документом и автором документа.

Запись rel=author можно использовать при ранжировании

Несколько лет назад Google использовал авторство в своей выдаче для показа картинок/фото (сейчас данной функции нет).

Существует гипотеза, что Google по-прежнему использует авторство как фактор для ранжирования результатов, так как существует патент на данный алгоритм.

Google не заявляет открыто о том, что rel=author используется при ранжировании, но однако вероятность существует.

Способ применения rel=author

Наиболее частый вариант указания автора – это стандартный атрибут HTML ссылки. Пример:

<a href="/author-page.html" rel="author">link text</a>

Однако, rel=author также можно использовать внутри тэга head. Например:

<link rel="author" href="https://varvy.com/author.html">

Еще один вариант использования, когда вместо ссылки на документ указывается e-mail автора. Например:

<a href="mailto:Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript." rel="author">

Можно  использовать запись rel=author на каждой странице сайта.

На мой взгляд, это лучший способ защиты контента от кражи. Конечно, rel=author не защищает контент в буквальном смысле этого слова, однако мы знаем, что несколько лет назад Google идентифицировал авторов и представители Google также отмечали, что владельцам сайтов имеет смысл указывать авторов статьей.

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

  • Запись rel=amphtml определяет AMP версию контента на странице.
  • Указание AMP для ссылки на страницу, позволяет Google определить версию AMP для текущей страницы.

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

<link rel="amphtml" href="https://varvy.com/amp-page.html">

Приведенный выше код указывает:

  • AMP версию данной страницы
  • Версия находится по адресу amp-page.html

Где применяется?

Так как атрибут rel=amphtml определяет AMP версию страницы, он должен быть расположен на обычной странице без AMP.

На стандартной странице атрибут rel=amphtml указывает AMP версию. В свою очередь сослаться на стандартную версию страницы можно с помощью записи rel=canonical.

Цель

Основная цель использовать запись rel=amphtml — распознать и индексировать AMP страницу.

AMP и Google распознание/анализ

Когда Googlebot находит запись rel=amphtml, он сканирует страницу, чтобы затем внести ее в индекс Google.

При условии, что страница Amp не содержит ошибок, она будет добавлена в Google CDN (Сеть доставки (и дистрибуции) контента).

В будущем, когда пользователь мобильного устройства будет искать эту страницу, Google покажет ему ее сохраненную копию из CDN.

Что такое rel=apple-touch-icon?

Запись rel=apple-touch-icon определяет картинку/иконку на устройствах Apple, которая определяет данный сайт или страницу.

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

<link rel="apple-touch-icon" href="/custom_icon.png">

Приведенный выше код означает:

  • Для данной страницы определена иконка
  • Иконка расположена по адресу «/custom_icon.png»

Где используется данный код?

В тэге head документа.

Цель

Основная цель применения записи rel=apple-touch-icon – это обозначение иконки/логотипа для страницы.

Ее функцию можно также сравнить с Favicon для операционной системы Windows, которые присваиваются закладкам, ссылкам, сохраненным страницам.

Что такое «rel=»?

Объясняем поисковым роботам и веб-службам, почему конкретная ссылка ведет к определенному адресу.

В HTML атрибут rel (от англ. «relationship» ‒ «отношение, взаимосвязь») определяет взаимосвязь между текущим и связанным с ним ссылкой документом.

Когда ссылка ведет нас к ресурсу, атрибут rel объясняет, почему ссылка ведет к этому адресу. Ссылаться можно, например, на файл стилей, который нужно задействовать с документом. Или на страницу, которая наполнена тем же содержанием, что и исходный документ, но отображается в стандартном формате для подписки на RSS-новости. Также адрес может быть языковым переводом или PDF-версией. Ссылочные отношения применяются также, если ссылка ведет на предыдущие или последующие страницы электронной книги.

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

<a rel="..." href="...">...</a>

Либо к тегу , который устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. Синтаксис в этом случае будет таким: 

<link rel="..." href="...">

Сейчас чаще всего используют значение «nofollow», которое запрещает поисковой системе переходить по конкретной ссылке, то есть, не передает им тИЦ и PR, и «canonical», которая определяет предпочитаемый адрес для индексации поисковыми системами. Но использование атрибута rel не ограничивается только значениями «nofollow» и «canonical»:

rel=nofollow

Значение предназначено для поисковых систем: указывает им, что ссылка не передает свой вес той странице, на которую ссылается. Пример: 

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

rel=canonical

Указывает на предпочитаемый адрес, который будет участвовать в поиске. Используется в теге в хэдере: 

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

Подробнее об использовании rel=canonical в нашей статье о комплексном аудите сайта.

rel=alternate

Указывает на то, что по этой ссылкой располагается альтернативный вид отображения страницы. Например, это может быть 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

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

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

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

rel=license

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

<a rel="license" href="license.html">Лицензионное соглашение</a>

rel=dns-prefetch, preconnect, prefetch, preload

Используйте ссылки этого типа, когда ссылаетесь на внешние ресурсы, которые пользователь откроет с большой вероятностью. Браузер кэширует заранее эту ссылку и она откроется быстрее: 

<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=first, next, up, last, 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>

rel=external

Означает, что ссылка будет открыта в новом окне. А сама ссылка будет индексироваться, передавать вес. В WordPress этот атрибут весьма широко применяется в комментариях. Может использоваться совместно с nofollow, чтобы ссылка не передавала вес: 

<a rel="external nofollow" href="page.html">Открыть в новой вкладке</a>

rel=icon

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

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

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

<link rel="icon" href="favicon.png" type="image/png">

Это далеко не все возможные значения атрибута rel, подробнее читайте в справочнике HTML.

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

Атрибут rel=canonical: что это такое

Атрибут rel=«canonical» — специальный тег, который сообщает поисковым системам, какую из страниц с дублированным контентом считать дополнительной, а какую – основной.

Почему появляются страницы с дублированным контентом

Дубли страниц – это страницы с полностью идентичным содержанием, но с разными URL.

Почему вообще на сайте появляются дублированные страницы? Самые распространенные причины:

  • Из-за особенностей CMS на сайте могут появиться страницы с .php или .html, со слэшем и без слэша на конце. Например: http://site.ru/page/ и http://site.ru/page
  • На сайте есть страницы с динамическими параметрами URL,
  • Меняется структура сайта, но вебмастер, создавая новые страницы, забывает удалить старые.
  • Страницы фильтров, сортировок, поиска и страницы пагинации, где текст и мета-теги всех страниц могут быть одинаковыми.
  • Сайт переводят на защищенный протокол HTTPS, но он доступен и по HTTP

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

  • Дубли страниц затрудняют индексацию сайта,
  • Яндекс и Google не любят дублированный контент, и сайт может потерять позиции в поиске.
  • Поисковая система может отображать в поиске страницу, которая является второстепенной.

Поиск и устранение дублированных страниц является частью поисковой оптимизации сайта. Чаще всего проблему дублей решают с помощью 301 редиректа и атрибута rel=«canonical».

Когда нужно использовать атрибут rel=«canonical»

Основная задача атрибута rel=«canonical» показать поисковой системе, какую из страниц с одинаковым контентом считать канонической, т.е. главной, а какую – второстепенной. Благодаря каноническим ссылкам, поисковые роботы поймут, какие страницы нужно индексировать чаще и выбирать для показа в результатах поиска.

Атрибут rel=canonical является одним из сигналов для поискового робота при выборе канонической страницы. Поисковики также ориентируются на протокол (http или https), предпочтительный для пользователя домен, качество страницы, присутствие URL в файле Sitemap и т.д. Несмотря на то что атрибут является лишь рекомендацией для поискового робота, а не строгим предписанием, его использование очень желательно.

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

  • Несколько страниц для одной серии продуктов,
  • Страницы сортировок товаров в каталоге,
  • Использование партнерской программы на сайте,
  • Использование одинакового контента на разных доменах или разных языковых версиях сайта,
  • Если вебмастер точно знает, что CMS может создавать дубли,
  • Страницы с дублями из-за UTM-меток и т.д.

Как использовать атрибут rel=«canonical» на сайте

Существует несколько способов использования атрибута rel=«canonical»:

  • В коде страницы, которая не является основной, между тегами head указать атрибут и абсолютную ссылку на страницу, которую следует считать приоритетной. Например, [link rel=»canonical» href=“https://site.ru/” /].
  • Канонические ссылки можно прописывать в файле Sitemap, но так как XML-карта является только рекомендацией для поисковых роботов, они могут ее игнорировать.
  • Если страница реализована не в HTML, то можно прописывать канонические ссылки в заголовке HTTP.
  • Есть специальные плагины, которые позволяют настраивать канонические ссылки на разных платформах.

Основные ошибки при создании канонических ссылок:

  • Каноническая ссылка не индексируется,
  • Каноническая ссылка отдает 404 ошибку или 200 код сервера,
  • На одной странице прописано несколько ссылок с атрибутом rel=«canonical» (в этом случае будет учитываться только первая ссылка),
  • При указании канонических ссылок для одной страницы несколькими способами (например, код сайта и XML-карта), ссылки оказались разными,
  • Указанный канонический URL находится на другом домене или поддомене,
  • Указана цепочка канонических адресов. Например, для страницы site.ru/1 указана каноническая ссылка на страницу site. ru/2, в то время как для адреса site.ru/2 указан канонический адрес site.ru/3.
  • На страницах пагинации в качестве канонической ссылки указывается первая страница, что делает невозможным индексацию всех остальных страниц. В данном случае корректнее делать каноническую ссылку на страницу «Показать все», если она есть на сайте.
  • Содержимое канонической страницы значительно отличается от наполнения второстепенной страницы. В таких случаях поисковые роботы могут игнорировать рекомендации и канонические ссылки.

Проверить корректность размещения ссылок с атрибутом rel=«canonical» можно с помощью программы Screaming Frog SEO Spider.

Поисковый робот узнает об изменениях на сайте при его обходе. Если вебмастер корректно указал канонические страницы и робот последовал рекомендациям, второстепенная страница пропадет из результатов поиска. В Яндексе, например, это можно отследить с помощью сервиса Вебмастер (страница Индексирование — Страницы в поиске (блок Исключённые страницы):

HTML link rel Attribute

❮ HTML тег

Пример

Импорт внешней таблицы стилей:

css»>

Попробуйте сами »

ниже.

Определение и использование

Обязательный атрибут rel указывает связь между текущим документом и связанным документом/ресурсом.

Поддержка браузера

Атрибут
отн. Да Да Да Да Да

Синтаксис

Значения атрибутов

Значение Описание
альтернативный Предоставляет ссылку на альтернативную версию документа (т. е. печатную страницу, переведенную или зеркальную).
Пример:
автор Предоставляет ссылку на автора документа
предварительная выборка DNS Указывает, что браузер должен упреждающе выполнять разрешение DNS для источника целевого ресурса
помощь Предоставляет ссылку на справочный документ. Пример:
значок Импортирует значок для представления документа.
Пример:
лицензия Предоставляет ссылку на информацию об авторских правах для документа
следующий Предоставляет ссылку на следующий документ в серии
пингбэк Предоставляет адрес сервера pingback, который обрабатывает pingbacks для текущего документа
предварительное соединение Указывает, что браузер должен заблаговременно подключаться к источнику целевого ресурса.
предварительная выборка Указывает, что браузер должен упреждающе извлекать и кэшировать целевой ресурс, поскольку он может потребоваться для последующей навигации
предварительная нагрузка Указывает, что агент браузера должен упреждающе извлекать и кэшировать целевой ресурс для текущей навигации в соответствии с пунктом назначения, заданным атрибутом «как» (и приоритетом, связанным с этим пунктом назначения).
пререндеринг Указывает, что браузер должен предварительно отображать (загружать) указанный веб-страница в фоновом режиме. Итак, если пользователь переходит на эту страницу, это ускоряет увеличить загрузку страницы (поскольку страница уже загружена). Внимание! Это тратит впустую пропускную способность пользователя! Используйте предварительную визуализацию только в том случае, если вы абсолютно уверены что веб-страница требуется в какой-то момент пути пользователя
предыдущий Указывает, что документ является частью серии и что предыдущий документ в серии является ссылочным документом
поиск Предоставляет ссылку на ресурс, который можно использовать для поиска в текущем документе и связанных с ним страницах.
таблица стилей Импорт таблицы стилей

Другие примеры

Пример

Вот как добавить значок на веб-сайт:




 Моя страница Название</название> <br/>  <link rel="icon" type="image/x-icon" href="favicon.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/4.bp.blogspot.com/-sHfjqjhKfHA/XBAFrfBLS2I/AAAAAAAAAZc/aTtCBpL9yXs5lqC2vmhsndbp40SshHzOwCLcBGAs/s640/tu%2B1.png' /><noscript><img loading='lazy' src='/800/600/http/4.bp.blogspot.com/-sHfjqjhKfHA/XBAFrfBLS2I/AAAAAAAAAZc/aTtCBpL9yXs5lqC2vmhsndbp40SshHzOwCLcBGAs/s640/tu%2B1.png' /></noscript> ico»> <br/></head> <br/><body></p><p><h2><span class="ez-toc-section" id="i-10">Это заголовок</span></h2> <br/><p >Это абзац.</p></p><p> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_3c1b298893cc28773736fb48693573c8.js"></script></body> <br/></html></p><hr/><p data-readability-styled="true"> ❮ Тег HTML<link></p> <br/><p> НОВИНКА</p><p> Мы только что запустили <br/> Видео W3Schools</p> 9009CKER COLPICKER</p><p data-readability-styled="true">3 Посмотреть<p data-readability-styled="true">3</h5><h5><span class="ez-toc-section" id="i-11"> КОД ИГРЫ </span></h5><p data-readability-styled="true"> Играть в игру</p><hr/><hr/><hr/><p><h5><span class="ez-toc-section" id="i-12"> Лучшие учебники </span></h5> Учебное пособие по HTML <br/> Учебное пособие по CSS <br/> Учебное пособие по JavaScript <br/> Учебное пособие <br/> Учебное пособие по SQL <br/> Учебное пособие по Python <br/> Учебное пособие по W3.CSS <br/> Учебное пособие по Bootstrap <br/> Учебное пособие по PHP <br/> Учебное пособие по Java <br/> Учебное пособие по C++ <br/> Учебное пособие по jQuery <br/><p> 9003 000 Справочник по HTML <br/> Справочник по CSS <br/> Справочник по JavaScript <br/> Справочник по SQL <br/> Справочник по Python <br/> Справочник по W3.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/image.krasview.ru/video/425b56562354ea3/_.jpg' /><noscript><img loading='lazy' src='/800/600/http/image.krasview.ru/video/425b56562354ea3/_.jpg' /></noscript> CSS <br/> Справочник по Bootstrap <br/> Справочник по PHP <br/> Цвета HTML <br/> Справочник по Java <br/> Справочник по Angular <br/> Справочник по jQuery <br/></p><p><h5><span class="ez-toc-section" id="i-13"> Основные примеры </span></h5> Примеры HTML <br/> Примеры CSS <br/> Примеры JavaScript <br/> Примеры инструкций <br/> Примеры SQL <br/> Примеры Python <br/> Примеры W3.CSS <br/> Примеры Bootstrap <br/> Примеры PHP <br/> Примеры Java <br/> Примеры XML <br/> Примеры jQuery <br/><h4></h4><p data-readability-styled="true">3</p> О</p><p data-readability-styled="true"> W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.</p><p> Copyright 1999-2022 Refsnes Data. Все права защищены. <br/> W3Schools работает на основе W3.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/4.bp.blogspot.com/-_-eXoX-CUmI/W9KS4n3l3BI/AAAAAAAAADk/FhDIqkA4e1wbJbBRg-l2H7uZVGF8QWUrgCLcBGAs/s640/Screenshot%2B%252862%2529.png' /><noscript><img loading='lazy' src='/800/600/http/4.bp.blogspot.com/-_-eXoX-CUmI/W9KS4n3l3BI/AAAAAAAAADk/FhDIqkA4e1wbJbBRg-l2H7uZVGF8QWUrgCLcBGAs/s640/Screenshot%2B%252862%2529.png' /></noscript> CSS.</p><h2><span class="ez-toc-section" id="_HTML_Link_Rel"> Атрибут HTML Link Rel: что это такое и когда его использовать? </span></h2><p> Contents</p><p> До сих пор вы давали ссылку на вашу SEO-работу или ссылку. Возможно, вы дали эту ссылку из сообщения или страницы на другой веб-сайт. Или, возможно, вы сделали это на своем собственном веб-сайте. Предоставляя эти ссылки, вы используете HTML-атрибут rel для SEO-исследований. Задумывались ли вы когда-нибудь, что такое атрибут HTML-ссылки rel? Если ваш ответ «да», мы проясним этот вопрос для вас в оставшейся части этой статьи. Самый ясный ответ, который мы можем дать на этот вопрос, состоит в следующем.</p> <iframe title="Relationship (REL) Attribute for Anchors" src="https://www.youtube.com/embed/Bp3iL9paTCM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""/> </iframe><h3><span class="ez-toc-section" id="_Rel_HTML"> Что такое ссылка Rel HTML? </span></h3><p> Атрибут связи ссылки указывается как link rel=value в технической части SEO. Эта функция используется для информирования поисковых систем о связи между страницами, которые ссылаются друг на друга.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cdn.searchenginejournal.com/wp-content/uploads/2014/02/hacked-site.png' /><noscript><img loading='lazy' src='/800/600/http/cdn.searchenginejournal.com/wp-content/uploads/2014/02/hacked-site.png' /></noscript> Эта функция используется очень часто.</p><p> Rel-ссылки являются микроформатами. Это параметры, которые показывают большинство областей использования HTML 4 и HTML 5. REL указывает, как ссылка относится к веб-сайту. Боты поисковых систем идентифицируют и читают ссылки. При этом большое внимание уделяется типу rel. Это потому, что они служат для передачи данных о ссылке роботам поисковых систем. По этим причинам вы должны использовать типы ссылок REL на своих веб-сайтах. Таким образом, вы можете внести значительный вклад в свои веб-сайты с точки зрения SEO. Итак, что такое типы ссылок REL?</p><h3><span class="ez-toc-section" id="_HTML_Rel_Link"> Что такое теги HTML Rel Link? </span></h3><ul><li> Альтернативный тип ссылки REL указывает, что ссылка является альтернативной версией текущей страницы. Он указывает разные версии страницы, такие как печатные и переведенные страницы.</li><li> Тип приложения REL указывает, что ссылка является вложением на текущую страницу.</li><li> Author REL указывает автора страницы.</li><li> Закладка REL указывает, что ссылка является закладкой, относящейся к текущей странице.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/lovelucy.info/wordpress/wp-content/uploads/2014/05/gitlab1-1024x496.jpg' /><noscript><img loading='lazy' src='/800/600/http/lovelucy.info/wordpress/wp-content/uploads/2014/05/gitlab1-1024x496.jpg' /></noscript></li><li> Тип главы указывает, что ссылка указывает на любой раздел в серии страниц.</li><li> Contents REL указывает, что ссылка указывает на источник оглавления серии страниц.</li><li> Тип Copyright REL указывает, что ссылка указывает на источник, содержащий информацию об авторских правах текущей страницы.</li><li> Глоссарий REL указывает, что ссылка указывает на глоссарий терминов, описывающих термины, используемые на текущей странице.</li><li> Help REL указывает, что ссылка указывает на страницу справки для текущей страницы. Другими словами, он определяет справочный документ.</li></ul><h3><span class="ez-toc-section" id="_Rel"> Другие теги Rel </span></h3><ul><li> Icon REL определяет значок для представления документа.</li><li> Индекс REL указывает, что ссылка указывает на индекс/каталог массива страниц.</li></ul><ul><li> License REL указывает информацию об авторских правах документа.</li><li> Следующий тип REL указывает, что ссылка является страницей после текущей страницы.</li></ul><ul><li> Prefetch REL указывает целевую страницу для кэширования.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/crypto-coins.ru/wp-content/uploads/2018/02/5a870902d030721b008b4666-960-7201.jpg' /><noscript><img loading='lazy' src='/800/600/http/crypto-coins.ru/wp-content/uploads/2018/02/5a870902d030721b008b4666-960-7201.jpg' /></noscript></li><li> Тип Prev REL указывает, что ссылка является страницей, предшествующей текущей странице.</li></ul><ul><li> Search REL указывает, что документ является средством поиска.</li><li> Раздел REL указывает, что ссылка ведет на основную часть текущей страницы.</li><li> Start REL указывает, что ссылка указывает на первую страницу в серии страниц.</li><li> Ссылка REL Таблица стилей указывает, что ссылка содержит шаблоны стилей для текущей страницы.</li><li> Подраздел REL указывает, что ссылка указывает на нижнюю часть текущей страницы.</li><li> Значок быстрого доступа REL указывает на две вещи. Указывает, что ссылка имеет значок для текущей страницы, которая будет отображаться в окне браузера и в списке избранного.</li><li> Тип ссылки Nofollow REL указывает, что ссылка не имеет ничего общего с текущей страницей. Или указывает, что это ссылка, по которой не следует переходить.</li></ul><h3><span class="ez-toc-section" id="_HTML_Rel_Link-2"> Когда использовать теги HTML Rel Link </span></h3><p> Вам не нужно определять каждую ссылку на вашем веб-сайте.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/goldbusinessnet.com/wp-content/uploads/2017/02/2017-02-09_190956.png' /><noscript><img loading='lazy' src='/800/600/http/goldbusinessnet.com/wp-content/uploads/2017/02/2017-02-09_190956.png' /></noscript> Таким образом, вам не всегда нужно использовать теги ссылок Rel. Например, давайте посмотрим, когда вам следует использовать теги спонсируемых ссылок Rel. Вы должны всегда использовать этот тег ссылки для платных гиперссылок или ссылок на платную рекламу. Если вы не используете этот тег там, где это необходимо, оценщики качества поиска Google могут пометить ваши веб-страницы. В основе всех SEO-исследований лежит важный вопрос. Это поможет всем поисковым системам понять ваш сайт и его содержание.</p><h3><span class="ez-toc-section" id="_HTML_Link_Rel-2"> Атрибут HTML Link Rel, кратко </span></h3><p> Функция HTML Link Rel обеспечивает преимущества SEO для ваших веб-страниц. Эта функция входит в технический объем SEO-исследований. Каждая веб-страница содержит большое количество ссылок, связанных с ее содержанием. Атрибут HTML link rel определяет взаимосвязь между этими ссылками. Чтобы использовать эту функцию более эффективно, вы должны сначала понять, что она делает. Итак, в этой статье мы попытались объяснить, что такое HTML-атрибут ссылки rel.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/joomla-monster.com/images/faq/favicon.png' /><noscript><img loading='lazy' src='/800/600/http/joomla-monster.com/images/faq/favicon.png' /></noscript> Кроме того, есть пара десятков тегов ссылок HTML Rel. В этой статье мы также рассказали о том, что это за теги.</p><p> ПОСЛЕДНИЕ ПОСТЫ</p><p> Ошибка 502 Bad Gateway является довольно распространенной, но раздражающей проблемой для большинства пользователей Интернета. Это один из кодов состояния HTTP, указывающих на наличие …</p>.<p> В документах Word вы можете вводить различные термины, мысли или данные. Не всегда можно выразить необходимую информацию словами и…</p><p> Если вам понравилась эта статья и вы хотите узнать больше о HTML, вы можете прочитать наши статьи об этом, например: Что такое HTML?</p> <iframe title="Understanding The REL Attribute to Connect The CSS File from HTML File" src="https://www.youtube.com/embed/uQtti9hXSPc?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""/> </iframe><h3><span class="ez-toc-section" id="i-14"> Часто задаваемые вопросы </span></h3><p> Что такое ссылка CSS?</p><p> CSS означает каскадные таблицы стилей.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/otvet.imgsmail.ru/download/248188019_02c85f4eabeb1b65d5745cf035f87bb8_800.png' /><noscript><img loading='lazy' src='/800/600/http/otvet.imgsmail.ru/download/248188019_02c85f4eabeb1b65d5745cf035f87bb8_800.png' /></noscript> CSS Rel определяет, как пользователи просматривают HTML-элементы. Он указывает это для всех носителей.</p><p> Что делает внешний CSS?</p><p> Используя это, вы можете изменить внешний вид всего вашего веб-сайта, внеся изменения в один файл. Вы можете написать внешний CSS в любом текстовом редакторе. Однако не следует включать тег ссылки HTML во внешний файл CSS.</p><p> Как связать CSS с HTML?</p><p> Существует три способа добавления ссылки CSS HTML. К ним относятся: <br/> Внешний CSS <br/> Внутренний CSS <br/> Встроенный CSS</p><p> Каково определение тегов ссылок HTML?</p><p> Определение тега ссылки следующее. Он описывает связь между текущим документом и внешним источником.</p><p> Что означает атрибут HTML Link Rel для SEO?</p><p> Теги атрибутов Rel помогают поисковым роботам Google понять ценность всех ссылок на вашей веб-странице. Если вы правильно используете эти теги ссылок, это означает, что вы правильно классифицируете ссылки на своем веб-сайте. Таким образом, Google легче понимает ваш сайт, что является ключевым принципом SEO.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/storybench.org/wp-content/uploads/2015/08/skeleton_html1-1200x633.png' /><noscript><img loading='lazy' src='/800/600/http/storybench.org/wp-content/uploads/2015/08/skeleton_html1-1200x633.png' /></noscript></p><h2><span class="ez-toc-section" id="_relnext_relprev_Google_Search_Central"> Пагинация с rel=»next» и rel=»prev» | Блог Google Search Central </span></h2><p> Четверг, 15 сентября 2011 г.</p> Мы давно не публиковали эту запись в блоге. Часть информации может быть устаревшей (например, некоторые изображения могут отсутствовать, а некоторые ссылки уже не работают). <code translate="no" dir="ltr"> rel=prev/next </code> больше не является сигналом индексации.<p> Очень похоже на <code translate="no" dir="ltr"> rel="canonical" </code> действует сильный намек на дублированный контент, теперь вы можете использовать элементы ссылки HTML <code translate="no" dir="ltr"> rel="следующий" </code> и <code translate="no" dir="ltr"> rel="предыдущий" </code> чтобы указать взаимосвязь между URL-адресами компонентов в серии с разбивкой на страницы. На протяжении всей сети серия контента с разбивкой на страницы может принимать различные формы — это может быть статья, разделенная на несколько страницы-компоненты, или категория продуктов с элементами, разбросанными по нескольким страницам, или ветка форума разделены на последовательность URL-адресов.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/wpcourses.ru/wp-content/uploads/2020/04/yoast-canonical9.png' /><noscript><img loading='lazy' src='/800/600/http/wpcourses.ru/wp-content/uploads/2020/04/yoast-canonical9.png' /></noscript> Теперь, если вы решите включить <code translate="no" dir="ltr"> rel="next" </code> и <code translate="no" dir="ltr"> rel="prev" </code> на страницах-компонентах серии, вы даете Google сильный намек на то, что вы хотели бы, чтобы мы:</p><ul><li> Объедините свойства индексации, такие как ссылки, со страниц/URL-адресов компонентов на серию как целыми (то есть ссылки не должны оставаться рассредоточенными между <code translate="no" dir="ltr"> page-1.html </code> , <code translate="no" dir="ltr"> page-2.html </code> и т. д., но сгруппированы по последовательности).</li><li> Направляйте пользователей на наиболее релевантную страницу/URL — обычно на первую страницу серии.</li></ul> Взаимосвязь между URL-адресами компонентов в серии теперь может быть указана в Google через <code translate="no" dir="ltr"> rel="следующий" </code> и <code translate="no" dir="ltr"> rel="предыдущий" </code> .<p> Существует исключение из реализации <code translate="no" dir="ltr"> rel="prev" </code> и <code translate="no" dir="ltr"> rel="next" </code>: Если, наряду с вашей серией контента, вы также предлагаете пользователям страницу для просмотра всех или если вы рассматривая страницу просмотра всех, см.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/3.bp.blogspot.com/-jo63mYRGFaY/UboccG6DrSI/AAAAAAAAAjg/R_fqOENBbdg/s1600/4.png' /><noscript><img loading='lazy' src='/800/600/http/3.bp.blogspot.com/-jo63mYRGFaY/UboccG6DrSI/AAAAAAAAAjg/R_fqOENBbdg/s1600/4.png' /></noscript> наш пост на Просмотреть все в результатах поиска, чтобы узнать больше Информация. Поскольку пользователи чаще всего предпочитают страницы с возможностью просмотра всех, мы делаем все возможное, чтобы отображать эту версию, когда это уместно, в результатах, а не на странице компонента (страницы компонентов больше шансов всплыть с <code translate="no" dir="ltr"> rel="следующий" </code> и <code translate="no" dir="ltr"> rel="предыдущий" </code> ).</p><p> Если у вас нет страницы просмотра всех или вы хотите переопределить Google, возвращающий страницу просмотра всех, вы можно использовать <code translate="no" dir="ltr"> rel="next" </code> и <code translate="no" dir="ltr"> rel="prev" </code>, как описано в этом посте.</p> Для получения информации о конфигурациях с разбивкой на страницы, которые включают страницу просмотра всех, см. нашу публикацию на Просмотреть все в результатах поиска.<h3 data-text="Outlining your options"><span class="ez-toc-section" id="i-15"> Описание ваших вариантов </span></h3><p> Вот три варианта серии:</p><ol><li> Оставьте все, что у вас есть, как есть.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/1.bp.blogspot.com/-jroYSrtaHOU/WfhDnVE0xUI/AAAAAAAAAQo/PEab3e5PdN8LLEqyWnyd4uY2ouLnlVsbwCLcBGAs/w1200-h630-p-k-no-nu/index.jpg' /><noscript><img loading='lazy' src='/800/600/http/1.bp.blogspot.com/-jroYSrtaHOU/WfhDnVE0xUI/AAAAAAAAAQo/PEab3e5PdN8LLEqyWnyd4uY2ouLnlVsbwCLcBGAs/w1200-h630-p-k-no-nu/index.jpg' /></noscript> Контент с разбивкой на страницы существует во всем Интернете, и мы продолжать стремиться предоставлять пользователям наилучшие результаты, независимо от страницы <code translate="no" dir="ltr"> rel="next" </code> / <code translate="no" dir="ltr"> rel="prev" </code> HTML-разметка или ее отсутствие.</li><li> Если у вас есть страница «Просмотреть все» или вы рассматриваете возможность создания страницы «Просмотреть все», см. нашу публикацию на Просмотреть все в результатах поиска.</li><li> Подскажите Google взаимосвязь между URL-адресами компонентов вашей серии с <code translate="no" dir="ltr"> rel="следующий" </code> и <code translate="no" dir="ltr"> rel="предыдущий" </code> . Это помогает нам более точно индексировать ваши контент и показывать пользователям наиболее релевантную страницу (обычно первую страницу). Реализация подробности ниже.</li></ol><h3 data-text="Implementing rel="next" and rel="prev""><span class="ez-toc-section" id="i-16"> Реализация </span></h3><code translate="no" dir="ltr"> rel="next" </code> и <code translate="no" dir="ltr"> rel="prev" </code></h3><p> Если вы предпочитаете вариант 3 (выше) для своего сайта, давайте начнем! Допустим, у вас есть контент разбивается на URL-адреса:</p><pre translate="no" dir="ltr"> http://www.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/4.bp.blogspot.com/-8q-kqgLi1KE/VlobrvfWbuI/AAAAAAAAAfk/mEeJNnE-Nzs/s1600/Untitled3.png' /><noscript><img loading='lazy' src='/800/600/http/4.bp.blogspot.com/-8q-kqgLi1KE/VlobrvfWbuI/AAAAAAAAAfk/mEeJNnE-Nzs/s1600/Untitled3.png' /></noscript> example.com/article?story=abc&page=1 http://www.example.com/article?story=abc&page=2 http://www.example.com/article?story=abc&page=3 http://www.example.com/article?story=abc&page=4 </pre><p> На первой странице <code translate="no" dir="ltr"> http://www.example.com/article?story=abc&page=1 </code> вы должны указать в разделе <code translate="no" dir="ltr"><head> </code>:</p><pre translate="no" dir="ltr"> <link rel="next" href="http://www.example.com/article?story=abc&page=2" /> </pre><p> На второй странице <code translate="no" dir="ltr"> http://www.example.com/article?story=abc&page=2 </code> :</p><pre translate="no" dir="ltr"> <link rel="prev" href="http://www.example.com/article?story=abc&page=1" /> <link rel="next" href="http://www.example.com/article?story=abc&page=3" /> </pre><p> На третьей странице <code translate="no" dir="ltr"> http://www.example.com/article?story=abc&page=3 </code> :</p><pre translate="no" dir="ltr"> <link rel="prev" href="http://www.example.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.ytimg.com/vi/vxQewNq5Xbg/hqdefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/vxQewNq5Xbg/hqdefault.jpg' /></noscript> com/article?story=abc&page=2" /> <link rel="next" href="http://www.example.com/article?story=abc&page=4" /> </pre><p> И на последней странице <code translate="no" dir="ltr"> http://www.example.com/article?story=abc&page=4 </code> :</p><pre translate="no" dir="ltr"> <link rel="prev" href="http://www.example.com/article?story=abc&page=3" /> </pre><p> Следует отметить несколько моментов:</p><p> Дополнительную информацию можно найти в нашем Справочный центр или присоединиться к разговор в нашем Справочный форум для веб-мастеров!</p><p> Авторы Бенджиа Ли и Йоахим Купке, инженеры-программисты, группа индексации</p><h2><span class="ez-toc-section" id="relme_Microformats_Wiki"> rel=»me» — Microformats Wiki </span></h2><dl><dt> короткий URL</dt><dd> http://ufs.cc/w/relme</dd></dl><p> XFN — Сеть друзей XHTML 1.1 представила значение rel «me», которое используется для обозначения эквивалентности профиля и для консолидации идентичности.</p><p><h3><span class="ez-toc-section" id="i-17"> Содержание </span></h3></p><ul><li> 1 пример</li><li> 2 скринкаста и видео</li><li> 3 учебника</li><li> 4 проверка домена</li><li> 5 относительная аутентификация</li><li> 6 реализаций<ul><li> 6.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/rejkowicz.pl/wp-content/uploads/2018/03/wersja-css-768x301.png' /><noscript><img loading='lazy' src='/800/600/http/rejkowicz.pl/wp-content/uploads/2018/03/wersja-css-768x301.png' /></noscript> 1 защита интересов</li></ul></li><li> 7 экземпляров в дикой природе</li><li> 8 артикулов</li><li> 9 см. также</li></ul><h3><span class="ez-toc-section" id="i-18"> пример </span></h3><p> <code> rel="me" </code> используется в гиперссылках с одной страницы о человеке на другие страницы о том же человеке.</p><p> Например, на домашней странице Tantek (упрощенная разметка)</p><pre> <a href="https://github.com/tantek" rel="me">@t</a> </pre><p> И сам его профиль на GitHub имеет (упрощенная разметка)</p><pre> <a href="https://tantek.com/" rel="me">https://tantek.com/</a> </pre><p> Таким образом, устанавливается двунаправленная ссылка rel-me и подтверждается, что два URL-адреса представляют одно и то же лицо.</p><p> Издатели могут использовать форму создателя XFN для создания гиперссылок rel-me.</p><h3><span class="ez-toc-section" id="i-19"> скринкаст и видео </span></h3><p> Посмотрите несколько коротких видеороликов:</p><ul><li> Превосходное *30-секундное* объяснение XFN rel=»me» Дэвида Рекордона<ul><li> Заархивированная страница, хотя для презентации требуется Flash</li><li> Оригинал: http://www.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/malasngoding.com/wp-content/uploads/2019/06/belajar-bootstrap-4-1024x421.png' /><noscript><img loading='lazy' src='/800/600/http/malasngoding.com/wp-content/uploads/2019/06/belajar-bootstrap-4-1024x421.png' /></noscript> sixapart.com/static_news/opening_social_graph/xfn_links/xfn_links.html</li></ul></li><li> Брэд Фитцпатрик объясняет rel=»me» и многое другое XFN.</li><li> Объяснение Джозефом Смарром на доске rel=»me», реализованного в онлайн-агрегаторе удостоверений личности Plaxo. (в архиве)</li></ul><p> Длиннее:</p><ul><li> Гэвин Белл на тему «Каково ваше происхождение?» (40 минут) — обеспечивает гораздо более широкое обсуждение постановки проблемы о том, кто является человеком в Интернете, и, начиная примерно с 00:07:30, объясняет, как hCard 1.0 + rel=»me» помогает решить эту проблему.</li></ul><hr/><hr/><p> <b> ПОДЛЕЖИТ ОБНОВЛЕНИЮ </b></p><p> Разделы ниже необходимо обновить (например, ссылки проверены, а мертвые ссылки заменены версиями Интернет-архива)</p><hr/><hr/><h3><span class="ez-toc-section" id="tutorials"> tutorials </span></h3><p> Простой проект по переносимости данных или это rel=me резюме Боба Нгу</p><h3><span class="ez-toc-section" id="i-20"> проверка домена </span></h3><p> rel=me — это стандартный способ проверить, принадлежит ли веб-сайт пользователю на стороннем сайте.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/b3XGH.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/b3XGH.png' /></noscript></p><ul><li> чтение веб-сайта пользователя, который он ввел в свой профиль на стороннем сайте</li><li> проверить гиперссылку rel=me со своего веб-сайта на свой профиль на стороннем сайте</li><li>, если такая гиперссылка rel=me найдена, то пользователь доказал, что он контролирует этот личный веб-сайт в достаточной степени, чтобы поместить ссылку на свой профиль на стороннем сайте, и, таким образом, проверка домена прошла успешно.</li></ul><p> Если вы являетесь разработчиком такого стороннего сайта с профилями пользователей, выполните описанное выше, чтобы внедрить функцию проверки домена личного веб-сайта.</p><h3><span class="ez-toc-section" id="rel-me-auth"> rel-me-auth </span></h3><p> RelMeAuth — это предлагаемый открытый стандарт для использования ссылок rel=»me» на профили в службах поддержки oauth для аутентификации либо через эти профили, либо через ваш собственный сайт.</p><p> Короче говоря, это комбинация проверки домена <b> </b>, как описано выше, и авторизации OAuth на стороннем сайте, на который ссылается домен пользователя.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cssfixer.com/wp-content/uploads/2019/02/responsive-meta-tag-by-css-fixer.jpg' /><noscript><img loading='lazy' src='/800/600/http/cssfixer.com/wp-content/uploads/2019/02/responsive-meta-tag-by-css-fixer.jpg' /></noscript></p><p> Узнайте больше о том, как реализовать RelMeAuth и вход через Интернет.</p><h3><span class="ez-toc-section" id="i-21"> реализаций </span></h3><p> Известные сайты:</p><ul><li> <b> Google </b> использует взаимные ссылки rel=me для проверки домена, которые он также использует для независимой поддержки авторов сайта.</li><li> <b> App.net </b> реализует rel-me для официального подключения вашего домена к вашей учетной записи app.net, а также публикации rel-me на вашем сайте.</li></ul><p> Услуги:</p><ul><li> <b> IndieAuth </b> — это, пожалуй, наиболее полная реализация rel=»me», использующая его для реализации RelMeAuth и надмножества веб-входа, ориентированного на независимые веб-сайты.</li></ul><p> Плагины WordPress:</p><ul><li> Плагин Social Links WordPress — поддерживает rel-me ссылки на другие службы</li><li> Плагин About Me (на github) — поддерживает создание страницы About Me с ссылками rel-me на другие профили.</li></ul><h4><span class="ez-toc-section" id="i-22"> адвокация </span></h4><p> Поддержка rel=me может осуществляться несколькими способами, если сайт имеет:</p><ul><li> профили пользователей, но нет поля «веб-сайт» — попросите их добавить поле «веб-сайт» и отметить его с помощью rel=me.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cachthietkeweb.vn/wp-content/uploads/2019/10/luu-ban-nhap-tu-dong-847.png' /><noscript><img loading='lazy' src='/800/600/http/cachthietkeweb.vn/wp-content/uploads/2019/10/luu-ban-nhap-tu-dong-847.png' /></noscript></li><li> поле «веб-сайт» в профилях — попросите его поддерживать публикацию rel=me</li><li> понятие «верификация» или «подтвержденные» профили — попросите его сделать это, подтвердив взаимное отношение rel=me</li><li> вход/вход — попросите его поддерживать RelMeAuth с пользовательским веб-интерфейсом входа.</li></ul><p> Текущие запросы:</p><ul><li> Gittip: добавьте поле профиля «веб-сайт» № 2477 — запрошено 07 июня 2014 г. Аароном Парецки.</li><li> …</li></ul><h3><span class="ez-toc-section" id="i-23"> реальных примеров </span></h3><p> Примеры сайтов, публикующих поддержку rel=me, т.е. в профилях пользователей.</p><p> См.:</p><ul><li> Службы поддержки XFN REL = ME</li></ul><h3><span class="ez-toc-section" id="i-24"> Статьи </span></h3><ul><li> 2018-04-26 Martijn van der Ven: Реальная сделка около <code> Rel = "Me" </code></li></ul><h3><span class="ez-toc-section" id="i-25"> См. Также </span></h3></li>779</li></ul><h3><span class="ez-toc-section" id="i-26"> См. Также </span></h3>9</li>7779</li></ul><h3><span class="ez-toc-section" id="i-27">. «я» </span></h3></li><li> rel=me Часто задаваемые вопросы (FAQ)</li><li> XFN — сеть друзей XHTML</li><li> отн.</li><li> социальная сеть-переносимость</li><li> XFN 1.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/1.bp.blogspot.com/-efUtSqoB6vA/Vv6E33ySKxI/AAAAAAAABog/cY4qZPSca2sF9_dT-3Y8MwaiSE2jiHBqw/s1600/Screenshot%2Bat%2B2016-04-01%2B21%253A24%253A43.png' /><noscript><img loading='lazy' src='/800/600/http/1.bp.blogspot.com/-efUtSqoB6vA/Vv6E33ySKxI/AAAAAAAABog/cY4qZPSca2sF9_dT-3Y8MwaiSE2jiHBqw/s1600/Screenshot%2Bat%2B2016-04-01%2B21%253A24%253A43.png' /></noscript> 1 Профиль</li></ul><h2><span class="ez-toc-section" id="25_HTML_Link_REL"> 25 Значения атрибутов HTML Link REL, которые вы, возможно, не знали, около </span></h2><p> MoreOnfew</p><p> Опубликовано <time datetime="2016-03-05T01:26:11"> марта 5 марта 2016 г. теги, которые, должно быть, использовали многие из нас. Этот тег обычно находится в разделе <strong> <code><head> </code> </strong> и играет роль указания связи между текущим документом и другими документами. Чаще всего этот тег используется для привязки документа или веб-страницы к таблице стилей.</p><p> Многие из нас использовали бы тег <strong> <code><link> </code> </strong>, чтобы просто указать таблицу стилей для веб-страницы и ничего больше. Однако мы можем использовать тег <strong> <code><link> </code> </strong>, чтобы указать более 25 других отношений между веб-страницей и другими документами. Давайте посмотрим на них.</p><h3><span class="ez-toc-section" id="_HTML5"> Тег ссылки HTML5 </span></h3><p> Все мы обязательно использовали бы тег <strong> <code><link> </code> </strong> для связи таблицы стилей с веб-страницей и должны знать о некоторых существующих атрибутах тега, таких как  <strong> <code> href </code> </strong> , <strong> <code> тип </code> </strong> и т.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/static.tildacdn.com/tild3061-3835-4134-b438-663465376564/image2.png' /><noscript><img loading='lazy' src='/800/600/http/static.tildacdn.com/tild3061-3835-4134-b438-663465376564/image2.png' /></noscript> д. Однако есть много других атрибутов, которые вы можете использовать с тегом <strong> <code><link> </code> </strong>. Тег ссылки <strong> </strong> существовал еще до появления HTML5, однако в HTML5 появились определенные новые атрибуты и значения.</p><p> Давайте посмотрим на синтаксис <strong> <code> <ссылка> </code> </strong> тег:</p><pre> <ссылка charset="список кодировок из RFC 2045" class="имя(я) класса" директор="ltr | rtl" href="URL" hreflang="код языка" id="уникальный буквенно-цифровой идентификатор" lang="код языка" media="all | слуховой | шрифт Брайля | печать | проекция | экран | другое" отн = "значение отношения" rev="значение отношения" style="информация о стиле" target="имя фрейма" (только переходный вариант) title="рекомендательная информация" type="MIME-тип" > </pre><p> Перечисленные выше атрибуты охватывают большинство популярных атрибутов, однако я выделил наиболее часто используемые.</p><h3><span class="ez-toc-section" id="_rel_HTML"> Атрибут rel в HTML </span></h3><p> Атрибут <strong> <code><link> </code> </strong> в HTML используется для обозначения отношения между связанным документом и текущим документом.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/oddstyle.ru/wp-content/uploads/2015/04/html-comments-search-example.png' /><noscript><img loading='lazy' src='/800/600/http/oddstyle.ru/wp-content/uploads/2015/04/html-comments-search-example.png' /></noscript> Например, файл css можно связать с веб-страницей как «таблицу стилей <strong> </strong>». Атрибут rel позволяет указать несколько значений, разделенных пробелами. Как правило, эти значения не чувствительны к регистру. Давайте посмотрим на различные возможные значения.</p><h4><span class="ez-toc-section" id="_HTML_rel"> Значения атрибута HTML rel </span></h4><table><caption> <strong> Таблица, показывающая различные значения атрибута rel. </strong></caption><tbody><tr><th> Значение взаимосвязи или значения для атрибута «REL»</th><th> Описание</th><th> Пример</th></tr><tr><td> <strong> <code> arderate </code> </strong></td><td> Ссылка на ссылку. Ссылка на ссылку «Ардистическая версия». , Например, это может быть переведенная версия документа, упомянутая или на которую ссылается <strong> <code> язык </code> </strong> атрибут.</td><td> <code><link href="spanish-welcome.html" rel="alternate" lang="es"> </code><p>  </p><p> <code><link href="spanish-style.css" rel="alternate stylesheet"> </code></p></td></tr><tr><td> <strong> <code> приложение </code> </strong></td><td> Это значение rel может использоваться для ссылки на документ, который будет служить «приложением» для документа или сайта.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/aimblog.ru/wp-content/uploads/2012/06/kak-uznat-nazvanie-shablona-WordPress.png' /><noscript><img loading='lazy' src='/800/600/http/aimblog.ru/wp-content/uploads/2012/06/kak-uznat-nazvanie-shablona-WordPress.png' /></noscript></td><td> <code><link href="appendix.html" rel="appendix"> </code></td></tr><tr><td> <strong> <code> архив </code> </strong></td><td> Ссылка на архивные документы.</td><td> <code><link href="archives.html" rel="archives"> </code></td></tr><tr><td> <strong> <code> автор </code> </strong></td><td> Ссылка на документ или страницу с информацией об «авторе» текущего документа.</td><td> <code><link href="moreonfew-author.html" rel="author"> </code></td></tr><tr><td> <strong> <code> канонический </code> </strong></td><td> Ссылка на предпочтительный URL-адрес страницы, предлагающая поисковым системам, чтобы URL-адрес, указанный в href, совпадал с текущей страницей, в основном во избежание дублирования контента. Например, если текущая страница — www.site.com/search/?q=products, вы можете указать поисковым системам фактический URL-адрес www.site.com/products/</td><td> <code><link href="www.site. com/products/" rel="canonical"> </code></td></tr><tr><td> <strong> <code> глава </code> </strong></td><td> Ссылка на документ, который является «главой» на сайте или в коллекции документов.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/3.bp.blogspot.com/-Z14nX0Ibu2Y/V5hda5mkziI/AAAAAAAAI30/VHfhOthJtMYkRU0H1QT18_gCHPa9Rcx_QCLcB/s1600/ctrl-u-view-source-search-description-muhbalak.jpg' /><noscript><img loading='lazy' src='/800/600/http/3.bp.blogspot.com/-Z14nX0Ibu2Y/V5hda5mkziI/AAAAAAAAI30/VHfhOthJtMYkRU0H1QT18_gCHPa9Rcx_QCLcB/s1600/ctrl-u-view-source-search-description-muhbalak.jpg' /></noscript></td><td> <code><link href="chapter01.html" rel="chapter"> </code></td></tr><tr><td> <strong> <code> content </code> </strong></td><td> Эта ссылка добавляет ссылку на документ, который служит оглавлением.</td><td> <code><link href="table-of-contents.html" rel="contents"> </code></td></tr><tr><td> <strong> <code> авторское право </code> </strong></td><td> Добавлена ​​ссылка на страницу, содержащую заявление об авторских правах для текущего документа с использованием этого значения rel.</td><td> <code><link href="copyright.html" rel="copyright"> </code></td></tr><tr><td> <strong> <code> первый </code> </strong></td><td> Добавляется ссылка на первый документ в коллекции.</td><td> <code><link href="page-1.html" rel="first"> </code></td></tr><tr><td> <strong> <code> глоссарий </code> </strong></td><td> Ссылка на документ, содержащий глоссарий терминов для текущего документа.</td><td> <code><link href="glossary.html" rel="glossary"> </code></td></tr><tr><td> <strong> <code> help </code> </strong></td><td> Ссылка на справочный документ для текущего сайта или документа.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/4.bp.blogspot.com/-SrfM3pVUNSU/V_EJbnh0OgI/AAAAAAAACUc/B3z8KyC_7HQ1I5xQMmYWzN15Hf2SnpEXwCLcB/s640/15%2Blangkah%2Bkembalikan%2Bblogpost%2Byang%2Bterhapus3-sumber%2Blaman.bmp' /><noscript><img loading='lazy' src='/800/600/http/4.bp.blogspot.com/-SrfM3pVUNSU/V_EJbnh0OgI/AAAAAAAACUc/B3z8KyC_7HQ1I5xQMmYWzN15Hf2SnpEXwCLcB/s640/15%2Blangkah%2Bkembalikan%2Bblogpost%2Byang%2Bterhapus3-sumber%2Blaman.bmp' /></noscript></td><td> <code><link href="help.html" rel="help"> </code></td></tr><tr><td> <strong> <code> icon </code> </strong> OR <strong> <code> ярлык или значок </code> </strong><td><td> Текущая страница документа или ссылка на текущую страницу документа например, фавикон. <strong> <code> Размеры </code> </strong> Атрибут также можно использовать вместе с этим.</td><td> <code><link href="favicon.png" rel="icon"> </code> <code><link href="favicon.png" rel="shortcut icon"> </code></td></tr><tr><td> <strong> <code> индекс </code> </strong></tr>6 A 90 документ, предоставляющий указатель для текущего документа.</td><td> <code><link href="page-index.html" rel="index"> </code></td></tr><tr><td> <strong> <code> last </code> </strong></td><td> Добавляется ссылка на последний документ в коллекции.</td><td> <code><link href="page-10.html" rel="last"> </code></td></tr><tr><td> <strong> <code> лицензия </code> </strong></td><td> Ссылка на юридический документ или информацию об авторских правах для текущего документа.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/snelwilcox.com/wp-content/uploads/2017/01/Notepad-kod-min-1024x666.jpg' /><noscript><img loading='lazy' src='/800/600/http/snelwilcox.com/wp-content/uploads/2017/01/Notepad-kod-min-1024x666.jpg' /></noscript></td><td> <code><link href="legal.html" rel="license"> </code></td></tr><tr><td> <strong> <code> next </code> </strong></td><td> Ссылка на следующий документ в коллекции документов. Некоторые браузеры могут выполнять предварительную загрузку следующей страницы.</td><td> <code><link href="page-02.html" rel="next"> </code></td></tr><tr><td> <strong> <code> pingback </code> </strong></td><td> Ссылка на URL для проверки связи при загрузке текущего документа.</td><td> <code><link href="https://www.moreonfew.com/ping.php" rel="pingback"> </code></td></tr><tr><td> <strong> <code> предварительная выборка </code> </strong></td><td> Предоставляет указание браузеру об объектах, предварительно загружается во время простоя.</td><td> <code><link href="some-big-img.png" rel="prefetch"> </code></td></tr><tr><td> <strong> <code> предыд. </code> </strong></td><td> Ссылка на предыдущий документ в коллекции документов.</td><td> <code><link href="page-intro.html" rel="prev"> </code></td></tr><tr><td> <strong> <code> поиск </code> </strong></td><td> Ссылка на средство поиска, используемое на сайте.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/slideplayer.info/slide/11963486/68/images/20/5%29+Cara+mengintegrasikan+Javascript+di+bootstrap+Sekarang+kita+integrasikan+index.html+kita+dengan+menambahkan+link%2C+sebagaimana+berikut+ini+%3A.jpg' /><noscript><img loading='lazy' src='/800/600/http/slideplayer.info/slide/11963486/68/images/20/5%29+Cara+mengintegrasikan+Javascript+di+bootstrap+Sekarang+kita+integrasikan+index.html+kita+dengan+menambahkan+link%2C+sebagaimana+berikut+ini+%3A.jpg' /></noscript></td><td> <code><link href="search.php" rel="search"> </code></td></tr><tr><td> <strong> <code> section </code> </strong></td><td> Ссылка на документ, являющийся разделом на сайте или в коллекции документов.</td><td> <code><link href="section-05.html" rel="section"> </code></td></tr><tr><td> <strong> <code> sidebar </code> </strong></td><td> Указывает URL-адрес, который должен отображаться на боковой панели браузера.</td><td> <code><link href="chapters.html" rel="sidebar"> </code></td></tr><tr><td> <strong> <code> start </code> </strong></td><td> Ссылка на первый документ или начальную страницу в наборе документов.</td><td> <code><link href="intro.html" rel="start"> </code></td></tr><tr><td> <strong> <code> таблица стилей </code> </strong></td><td> Ссылка на внешнюю таблицу стилей. Это один из наиболее распространенных вариантов использования тега ссылки.</td><td> <code><link href="main.css" rel="stylesheet"> </code></td></tr><tr><td> <strong> <code> subsection </code> </strong></td><td> Ссылка на документ, являющийся подразделом в наборе документов.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/wikihow.com/images/thumb/9/9c/Add-a-Background-to-a-Website-Step-9-Version-3.jpg/aid781785-v4-728px-Add-a-Background-to-a-Website-Step-9-Version-3.jpg' /><noscript><img loading='lazy' src='/800/600/http/wikihow.com/images/thumb/9/9c/Add-a-Background-to-a-Website-Step-9-Version-3.jpg/aid781785-v4-728px-Add-a-Background-to-a-Website-Step-9-Version-3.jpg' /></noscript></td><td> <code><link href="section-05a.html" rel="subsection"> </code></td></tr><tr><td> <strong> <code> тег </code> </strong></td><td> Тег, который применяется к документу.</td><td> <code><link href="extratag.html" rel="tag"> </code></td></tr><tr><td> <strong> <code> up </code> </strong></td><td> Ссылка на документ или раздел, предшествующий текущему документу. URL.</td><td> <code><link href="/main/parent.html" rel="up"> </code></td></tr></tbody></table><p> Может быть непросто запомнить все возможные значения, однако всегда полезно знать о существовании эти <strong> различные типы значений атрибута rel </strong> . Также обратите внимание, что не все браузеры могут поддерживать все различные значения. Кроме того, в некоторых случаях способ отображения браузерами может различаться, например, браузер Opera может отображать специальные кнопки для определенных типов ссылок, а другие браузеры — нет. Что ж, я настоятельно рекомендую вам попробовать различные значения атрибута rel, перечисленные выше, и поделиться с нами своим опытом.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/nika-info.ru/wp-content/uploads/2016/06/999999.jpg' /><noscript><img loading='lazy' src='/800/600/http/nika-info.ru/wp-content/uploads/2016/06/999999.jpg' /></noscript></p><h2><span class="ez-toc-section" id="HTMLrel"> HTMLのссылкаタグとは？基本的な書き方とrel属性まとめ </span></h2><p> 今回 、 、 html の Link タグ について 解説 し。 意味 と 書き 方 、 知っ て て たい たい タグ 属性 を て 紹介 し。。。。。。。。。。。。。。。。。。。。 別 別 別 別 別 別 別 別 別 とは 別 とは 別 別 別 別 別 別 別 別 別 別 別 別ものです。aタグについて知りたい方はこちらの記事をどうぞ。</p> <br/><h3><span class="ez-toc-section" id="1_link_900"> 1. linkタグとは 900？ </span></h3><p> ссылкаタグとは「そのページ」と「別のファイルやページ」を関連づけるためのタグです。</p> サルワカくん<p> 少し 前提 の 話 を。 みなさん が 普段 見 て いる ページ は は html により 書か て い ます。 見 て いる この も そうです ね。</p><h4><span class="ez-toc-section" id="HTMLheadbody"> HTMLはhead部分とbody部分に大きく分けられる </span></h4><p></p><p> <i aria-hidden="true"/> 訪問者に見える文章や画像、タイトルなどなどはbody部分（ <code><body> </code> 〜 <code></body> </code>) に 書か れ ます。 一方 で 、 головка 部分 （<code> <голова> </code> 〜 <code></head> </code>) に は 、 者 の 目 に 触れ ない や 情報 を ます。 訪問 者 目 に 触れ 設定 や 情報 書き ます。 訪問 の 目 触れ ない 設定 情報 を ます。 訪問 者 の に ない<h4><span class="ez-toc-section" id="i-28"> головаタグには検索エンジンやブラウザのための情報を書く </span></h4><p></p><p> <i aria-hidden="true"/> じゃあ Голова タグ は 何 を 書く か と いう と 、 など の 検索 エンジン や 、 、 の ため の を 書き ます 「この 文字 コード で 表示 て！」 「に タイトル コード で で 表示 表示 て し し 表示て欲しい！」「このCSSファイルを読み込んで！」という具合ですね。</p><h4><span class="ez-toc-section" id="head"> ссылкаタグはhead内に書く </span></h4><p> Ссылка タグ 基本 的 に に 内 に 書き ます。 つまり 訪問 し て くれ た 人 の 目 に 通常 は 触れ 、 ブラウザ や 検索 に 向け た 情報 指示 を 書く ため タグ。 に に 向け 情報 や 指示 を ため タグ のです。 に 向け 情報 や 指示 書く の のです。 に 向け た 情報 指示 を の のです。 に 向け た<h4><span class="ez-toc-section" id="i-29"> タグとの違い </span></h4><p> 「リンク」と言えば、аタグ（ <code> <a href="~"> </code> ）ですね。とはいえ、aタグとlinkタグは全くの別物です。</p><p> и タグ</p><p> a タグ 主 に 訪問 者 に 「ここ を クリック する 別 の ページ に 飛ぶよ」 と いう を 貼る もの。 タグ 内 書か れ ます。</p><p> ссылкаタグ</p><p> Ссылка タグ 、 検索 エンジン や ブラウザ に 「この ページ 、 別 の この ページ や ファイル と こんな が ある よ」 と もの です。 の 通り 、 タグ 内 に 書か ます。 です。 の 通り 、 タグ 内 に れ。。 です 前述 通り 、 、 内 に れ ます。 <br/> 一旦ここまでの内容をまとめますね。</p><p> ссылкаタグは…</p><ul><li> 「そのページ」と「外部のファイルやページ」を関連づける 902ける<li> 基本的にheadタグ内に書く</li><li> 基本的に訪問者の目には入らない</li><li> ブラウザや検索エンジンに向けた情報や指示を書くためのタグ</li><li> aタグとは役割が大きく違う。aタグはbodyタグ内でリンクを貼るために使われる</li></ul><h3><span class="ez-toc-section" id="2"> 2.</span></h3><img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/3.bp.blogspot.com/-qbdA4byZX-g/WptiBzXKPFI/AAAAAAAAAHQ/v3bUs72ZH5UkM8wTvMTeE_TS3hkfyA_ZgCEwYBhgL/s1600/11.png' /><noscript><img loading='lazy' src='/800/600/http/3.bp.blogspot.com/-qbdA4byZX-g/WptiBzXKPFI/AAAAAAAAAHQ/v3bUs72ZH5UkM8wTvMTeE_TS3hkfyA_ZgCEwYBhgL/s1600/11.png' /></noscript> ссылкаタグの書き方：relとhrefの意味は？</h3><p> 実際にどんなものなのか見てみるのが分かりやすいですね。</p><h4><span class="ez-toc-section" id="_1_CSS"> 例 1 ： CSS ファイル を 読み込む </span></h4><p data-readability-styled="true"> <code> </code></p><p> 例えば 上 の タグ タグ 「スタイル シート （（css ファイル を」 もの は は 「「 （（（（（シートです。</p><p> このタグを解読すると、以下のような意味になります。relでファイルとの関係性を、hrefで そのファイルがある場所（URL）を指定します。</p><p></p><p> ↑ Rel は 「Отношение (関係）」 の 略 です。 つまり 「タグ が 書か れ て いる いる と と で 指定 し て ページ の 間 で 、 どの よう な 関係 ある の を で で 、 どの どの な 関係 ある か で わけ 、 、 、 、 わけですね。 <br/> する と ブラウザ が 読みとって 「ふむ これ は は css ファイル んだ な。 て て もら おう か」 と 指定 さ た 場所 に ある CSS ファイル を で ます ます。</p><h4><span class="ez-toc-section" id="2-2"> 例2：検索エンジンにページの関係性を伝える </span></h4><p data-readability-styled="true"> <code><link rel="canonical" href="https://saruwakakun.com"> </code></p><p> こちら は seo 的 に 重要 な な な タグ です。 「「 「「 カノニカル） 」に は 、 英語 で「 の 」と 意味 が ます。 この タグ 、 、 エンジン に対して「 の （（（タグ タグ 、 検索 「（（（の）ページはこれだよ」と伝えるものなのです。</p><p></p> サルワカくん<p> ブログ を 運営 し て いる と 、 いつの 間 に 「内容 は 同じ な の に に が ページ」 が てしまっ たり な の。 分かり やすい 例 だ 「http://example.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/img.my7life.ru/upload_image/35a33e5f576ab269236a8fa1b7a68de3.jpg' /><noscript><img loading='lazy' src='/800/600/http/img.my7life.ru/upload_image/35a33e5f576ab269236a8fa1b7a68de3.jpg' /></noscript> com と「 「例 だ「 「「 「「 「「 「「 「「 やすいexample.com/」ですね（スラッシュの有無の違い）。</p> サルワカくん<p> これ 検索 エンジン に 別 の ページ と みなさ れる と ページ の 評価 が 分散 さ れ てしまい ます。 つまり コンテンツ に てしまい ます。 そこ で 、 каноническое の タグ の です により 正規 で で 、 、 、 で で の の のページURLはここだよ！」と伝えることができるのです。</p> サルワカくん<p> ページ の Голова 内 に <code><link rel = "canonical" href = "http://example.com"> </code> （スラッシュ 無し） と さ よう に し て おく で 、 検索 エンジン スラッシュ の の し おく こと 、 検索 が スラッシュ の の の スラッシュ が が が スラッシュページ を に 行っ て も 「ホンモノ は コレ じゃないんやな」 と できる のです （（301 リダイレクト よう に し ても 良い けど ね）。。</p><p> ちょっと話が脱線してしまいましたね…。каноническийタグについては、この記事の後半でも取り上上<h4><span class="ez-toc-section" id="relhref"> relとhref以外の属性が書かれることも </span></h4><p></p><p> Ссылка タグ 基本 文法 は rel と href を 指定 する です。 しかし 、 タグ の 種類 によって は 、 それ 以外 属性 を する こと あり ます。 とはいえ 、 この あたり 覚える 必要 ん。。。 とはいえ とはいえ とはいえ とはいえ 種類 より より より よりが 多い 覚え よう とし て も 、 きっと 覚え られ ません。 とき に 、 どんな 書き 方 する べき か 調べれ のです。</p><p> 一旦まとめ</p><ul><li> linkタグのhrefで「ページ/ファイルの場所」を指定</li><li> relで「そのページ/ファイルとの関係性」を指定する</li><li> медиаやтипなどそれ以外の属性が入るタグもある</li></ul><h4><span class="ez-toc-section" id="link"> あなたのサイトにはどんなlinkタグが書かれている？ </span></h4><p> 実際 現在 みなさん が 運営 し て いる ブログ や や サイト は 、 どの よう な な が 書か れ て いる か チェック し み ましょ う。</p><p></p><p> ページ の どこ でも 良い ので 右 クリック し ます。 さ れる メニュー の 中 から 「の ソース を 表示」 選び ます。</p><p></p><p> その を 構成 する する html がずらっ と 表示 さ ます。 この 中 の の <code> <голова> </code> タグ に に タグ 入っ て い ます。</p><p> ショートカットで検索</p><p> ここでショートカットを使うのがおすすめです。 <br/> Ctrl + F (Mac の に は ⌘ ⌘ + f) の ショート カット 使え ば 、 好き な 文字 列 を サクッと 検索 でき。 「「 Ссылка 」検索 すれ ば 、 タグ が たくさん する はず です。 と すれ ば 、 タグ たくさん ヒット する です。。 検索 ば 、 タグ たくさん する はず です。。 と0003<h3><span class="ez-toc-section" id="3"> 3.</span></h3> <img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/2.bp.blogspot.com/-k1AHfzGLV98/XD6O4cTIk7I/AAAAAAAAATQ/lx9t0SD2xHQkpMv_Tz4BImSAntiY3GOJACLcBGAs/s640/10.png' /><noscript><img loading='lazy' src='/800/600/http/2.bp.blogspot.com/-k1AHfzGLV98/XD6O4cTIk7I/AAAAAAAAATQ/lx9t0SD2xHQkpMv_Tz4BImSAntiY3GOJACLcBGAs/s640/10.png' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/html/link-rel-html-atribut-rel-htmlbook-ru-2.html" data-text="Link rel html: Атрибут rel | htmlbook.ru" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/html/link-rel-html-atribut-rel-htmlbook-ru-2.html" data-text="Link rel html: Атрибут rel | htmlbook.ru" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/html/link-rel-html-atribut-rel-htmlbook-ru-2.html" data-text="Link rel html: Атрибут rel | htmlbook.ru" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/html/link-rel-html-atribut-rel-htmlbook-ru-2.html" data-text="Link rel html: Атрибут rel | htmlbook.ru" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/raznoe-2/youtube-banner-sozdaem-banner-dlya-youtube-kanala-instrumenty-idei-sovety-blog-o-sozdanii-logo-i-dizajne.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Youtube баннер: Создаем баннер для YouTube-канала: инструменты, идеи, советы | Блог о создании лого и дизайне</span></a></li><li class="previous"><a href="https://ylianova.ru/raznoe-2/php-tpl-rabota-s-tpl-shablonom-programmirovanie-std-2.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Php tpl: Работа с tpl-шаблоном / Программирование / stD</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/link-rel-html-atribut-rel-htmlbook-ru-2.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='14754' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2025. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="2640694aac47059db81a1682-|49" defer></script>