Содержание

— HTML — Дока

Кратко

Скопировано

Позволяет загружать на страницу содержимое из внешнего файла.

Пример

Скопировано

<head>  <link href="style.css" rel="stylesheet"></head>
          <head>
  <link href="style.css" rel="stylesheet">
</head>

Как понять

Скопировано

Матёрые программисты советуют описывать CSS-стили в отдельных файлах: так их легче редактировать, сортировать и подключать к разным страницам сайта. Чтобы применить стили из внешнего файла на странице, используйте тег <link>.

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

Рассмотрим два наиболее часто встречающихся случая:

  1. Изображение, которое будет отображено в качестве фавиконки на вашем сайте;
  2. Внешняя ссылка на шрифт, который применяется на сайте.

Во всех описанных случаях <link> пишется внутри <head>.

Атрибуты

Скопировано

  • href — URL-ссылка на внешний файл. Ссылка может быть как полной или абсолютной http://localhost/sitename/css/style.css, так и неполной или относительной /sitename/css/style.css.

  • rel — говорит браузеру, какую роль играет ссылка внутри тега. Иными словами, этот атрибут выражает отношения между вашей страницей и файлом, на который ведёт ссылка. Самое часто встречающееся значение — rel

    ="stylesheet", оно означает, что ссылка внутри <link> ведёт на внешний файл с CSS-стилями. А для добавления фавиконки используется rel="icon". Также rel помогает определить, какую фавиконку на каком устройстве загружать, например: rel="apple-touch-icon-precomposed".

  • sizes — устанавливает размер — ширину и высоту — фавиконки в пикселях, например sizes="114x114". А если написать

    sizes="any", то браузер сможет масштабировать иконку под любой размер. Так можно делать с иконками в векторном формате, например SVG.

  • media — в зависимости от того, на каком устройстве открывают вашу страницу, можно применять разные стили к тексту или показывать разные иконки. Атрибут media указывает устройство, на котором работает тот или иной стиль. Например, <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

    .

    Также атрибут media может определять, какая тема используется в ОС. Благодаря этому можно произвести небольшие оптимизации. Например, если у нас есть два разделённых CSS-файла, каждый из которых содержит стили для одной из тем, то приоритет при загрузке будет отдаваться именно тому файлу, который относится к выбранной системной теме:

<link rel="stylesheet" href="css/light.css" media="(prefers-color-scheme: light)"><link rel="stylesheet" href="css/dark.css" media="(prefers-color-scheme: dark)">
          <link rel="stylesheet" href="css/light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="css/dark.css" media="(prefers-color-scheme: dark)">
  • as — позволяет указать тип загружаемого контента. Благодаря ему мы помогаем браузеру правильно расставлять приоритеты и планировать загрузку. as стоит применять, если указан атрибут rel="preload" или rel="prefetch".
  • crossorigin — указывает должен ли ресурс загружаться с помощью запроса CORS. Данный атрибут имеет два доступных значения:
    • anonymous
      — Cross-origin запрос выполняется без отправки учётных данных;
    • use-credentials — Cross-origin запрос выполняется с отправкой учётных данных.

Пример

Скопировано

Самый простой пример, как подключить файл со стилями:

<link href="style.css" rel="stylesheet">
          <link href="style.css" rel="stylesheet">

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

<link href="default.css" rel="stylesheet" title="Default Style"><link href="accessibility.css" rel="alternate stylesheet" title="Accessibility">
          
 
<link href="default. css" rel="stylesheet" title="Default Style">
<link href="accessibility.css" rel="alternate stylesheet" title="Accessibility">

Вот как можно использовать разные фавиконки для разных экранов и устройств:

<!-- На iPad третьего поколения с Retina-дисплеем: --><link rel="apple-touch-icon-precomposed" href="favicon144.png"><!-- iPhone с Retina-дисплеем: --><link rel="apple-touch-icon-precomposed" href="favicon114.png"><!-- iPad первого и второго поколений: --><link rel="apple-touch-icon-precomposed" href="favicon72.png"><!-- iPhone, iPod Touch и Android 2.1+ устройства без Retina дисплея: --><link rel="apple-touch-icon-precomposed" href="favicon57.png"><!-- стандартная фавиконка --><link rel="icon" href="favicon32.png">
          
 
<!-- На iPad третьего поколения с Retina-дисплеем: -->
<link rel="apple-touch-icon-precomposed" href="favicon144.png">
<!-- iPhone с Retina-дисплеем: -->
<link rel="apple-touch-icon-precomposed" href="favicon114. png">
<!-- iPad первого и второго поколений: -->
<link rel="apple-touch-icon-precomposed" href="favicon72.png">
<!-- iPhone, iPod Touch и Android 2.1+ устройства без Retina дисплея: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png">
<!-- стандартная фавиконка -->
<link rel="icon" href="favicon32.png">

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

<link href="print.css" rel="stylesheet" media="print"><link href="mobile.css" rel="stylesheet" media="all"><link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"><link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
          
 
<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres. css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

В этом примере мы подключаем внешний файл со стилями с помощью атрибута rel="stylesheet" тега <link>, указываем RSS-документ текущего сайта (

<link rel="alternate" type="application/rss+xml">) и устанавливаем иконку сайта — фавиконку — в адресной строке браузера (<link rel="shortcut icon">):

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>Кулинарный блог</title>  <link rel="stylesheet" href="ie.css">  <link rel="alternate" type="application/rss+xml" title="Статьи с сайта cookbook.ru" href="http://cookbook.ru/rss.xml">  <link rel="shortcut icon" href="http://cookbook.ru/favicon.ico"></head><body><p>...</p></body></html>
          
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Кулинарный блог</title>
  <link rel="stylesheet" href="ie. css">
  <link rel="alternate" type="application/rss+xml" title="Статьи с сайта cookbook.ru" href="http://cookbook.ru/rss.xml">
  <link rel="shortcut icon" href="http://cookbook.ru/favicon.ico">
</head>
<body>
<p>...</p>
</body>
</html>

Оптимизация

Скопировано

<link> — очень мощный и гибко настраиваемый тег. С его помощью можно многое оптимизировать, давайте посмотрим, как.

Условная загрузка ресурсов с медиавыражениями

Скопировано

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

<link href="print.css" rel="stylesheet" media="print"><link href="mobile.css" rel="stylesheet" media="all"><link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"><link href="highres. css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
          <link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

Предзагрузка ресурсов (

preload)

Скопировано

<link rel="preload"> говорит браузеру как можно скорее загрузить и кэшировать ресурс (например, скрипт или таблицу стилей). Это полезно, когда ресурс понадобится через несколько секунд после загрузки страницы, и вы хотите ускорить процесс.

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

<link rel="preload" href="style. css" as="style">
          <link rel="preload" href="style.css" as="style">

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

Предзагрузка и кэширование (

prefetch)

Скопировано

<link rel="prefetch"> просит браузер загрузить и кэшировать ресурс в фоновом режиме. Загрузка происходит с низким приоритетом, поэтому не мешает более важным ресурсам. Это полезно, если ресурс понадобится на следующей странице, а вы хотите заранее его кэшировать.

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

<link rel="prefetch" href="style.css" as="style">
          <link rel="prefetch" href="style.css" as="style">

Вероятно, этот тег можно безопасно использовать в любом объёме. Браузеры обычно планируют prefetch с наименьшим приоритетом, так что он никому не мешает. Только всегда стоит учитывать тот факт, что расходуется трафик пользователя, который может стоить денег.

Предварительное подключение к домену (

preconnect)

Скопировано

<link rel="preconnect"> просит браузер заранее подключиться к домену, когда вы хотите ускорить установку соединения в будущем.

Браузер должен установить соединение, если извлекает какие-то ресурсы с нового стороннего домена. Например, если загружает шрифты Google Fonts или запрашивает ответ в формате JSON с сервера.

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

<link rel= "preconnect" href="https://api.my-app.com">
          <link rel= "preconnect" href="https://api. my-app.com">

Используйте этот тег, чтобы немного ускорить загрузку стороннего скрипта или стилей за счёт предварительной установки соединения. Но не забывайте о том, что установка и поддержание соединения — дорогостоящая операция как для клиента, так и для сервера. Поэтому используйте preconnect максимум для 4-6 доменов.

Предварительное разрешение записи DNS (

dns-prefetch)

Скопировано

<link rel="dns-prefetch"> просит браузер заранее выполнить резолвинг DNS для домена, если вы скоро будете подключаться к нему и хотите ускорить начальное соединение.

Браузер должен определить его IP-адрес, если будет извлекать какие-то ресурсы оттуда. Например, загружать React из CDN.

Для каждого нового домена разрешение записи DNS обычно занимает около 20−120 мс. Это влияет только на загрузку первого ресурса с данного домена. Если осуществить разрешение DNS заранее, то мы сэкономим время и загрузим ресурс быстрее.

<link rel="dns-prefetch" href="https://api.my-app.com">
          <link rel="dns-prefetch" href="https://api.my-app.com">

Обратите внимание на схожие характеристики у <link rel="dns-prefetch"> и <link rel="preconnect">.

Использовать их вместе для одного домена обычно не имеет смысла, так как <link rel="preconnect"> уже включает в себя <link rel="dns-prefetch"> и многое другое. Это может быть оправданным в двух случаях:

  1. Вы планируете поддерживать старые браузеры: используйте <link rel="dns-prefetch"> в качестве запасного варианта для <link rel="preconnect">.
  2. Вы планируете ускорить подключение более чем к 4−6 доменам: тег <link rel="preconnect"> не рекомендуется использовать более чем с 4−6 доменами. <link rel="dns-prefetch"> потребляет меньше ресурсов, поэтому в случае необходимости используйте его.

Предзагрузка и пререндер страницы (

prerender)

Скопировано

<link rel="prerender"> просит браузер загрузить URL-адрес и отобразить его на невидимой вкладке.

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

<link rel="prerender" href="https://my-app.com/pricing">
          <link rel="prerender" href="https://my-app.com/pricing">

Но не злоупотребляйте такой возможностью! Предварительный рендеринг чрезвычайно дорого обходится с точки зрения трафика и памяти. Поэтому не используйте <link rel="prerender"> более чем для одной страницы.

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 Чаще всего <link> используется для CSS-стилей, подгруженных из файла. А также для фавиконки и других важных ссылок.

Здесь также можно указать, является ли страница канонической (главной среди дублированных) или альтернативной: <link rel="canonical">, <link rel="alternate">.

Это нужно для качественной индексации в поисковиках. Например, если у нас мобилка на поддомене m.site.ru, то <link rel="canonical" href="https://site.ru/">, и <link rel="alternate" href="https://m. site.ru/">.

Также в alternate указываются всякие REST API и другие сервисные дела.

🛠 Для CSS не надо использовать type="text/css" — устарело.

🛠 Стоит отдельно описать правило специфичности: если какой-то стиль описывается ниже, то браузер выдаст ему больший приоритет. Это значит, что если мы подключаем стили несколькими файлами, мы можем столкнуться с проблемой, когда при правке стиля в CSS-файле это не повлияет на поведение элемента на странице, потому что в другом файле, подключённом ниже, есть какое-то переназначение того же стиля.

Алёна Батицкая советует

Скопировано

🛠 Начинающие разработчики часто путают атрибуты src и href.

src расшифровывается как source и переводится как «источник».

href расшифровывается как hyper reference, что переводится как «гиперссылка».

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

Соответственно, поскольку тег <link> — это ссылка, то для него мы используем атрибут href. Аналогично для тега <a>.

Тем временем, для тега <script> или <img> нужно писать атрибут src, поскольку эти теги загружают данные на страницу, а не перенаправляют пользователя или браузер куда-либо.

🛠 При подключении стилей не забываем про каскад! ☝️

На собеседовании

Скопировано

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

❓

Почему принято размещать <link> со стилями внутри <head>, а <script> перед закрывающим тегом </body>? Когда можно нарушить это правило?

Скопировано

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

HTML тег

onplayСкрипт викликається коли медіа дані готові почати відтворення.
onafterprintСкрипт виконується тільки після як документ надрукований.
onbeforeprintСкрипт виконується перед тим, як документ надрукований.
onbeforeunloadСкрипт виконується коли документ ось-ось буде вивантажений
onhashchangeСкрипт виконується коли там відбулися зміни до частини якоря в URL
onloadВикликається після того як завантаження елемента завершене.
onmessageСкрипт виконується коли викликане повідомлення.
onofflineСпрацьовує коли браузер починає працювати в автономному режимі
ononlineСпрацьовує коли браузер починає працювати в режимі онлай.
onpagehideСкрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshowСкрипт виконується коли користувач заходить на сторінку.
onpopstateСкрипт виконується коли змінено історію одного вікна.
onresizeСкрипт виконується, коли розмір вікна браузера змінюється.
onstorageСкрипт виконується, коли вміст Web Storage оновлюється.
onunloadВикликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblurСкрипт виконується, коли елемент втрачає фокус.
onchangeВикликається в той момент, коли значення елемента змінюється.
oncontextmenuСкрипт виконується коли викликається контекстне меню.
onfocusВикликається в той момент, коли елемент отримує фокус.
oninputСкрипт викликається коли користувач вводить дані поле.
oninvalidСкрипт виконується, коли елемент недійсний.
onresetВикликається, коли натискається у формі кнопка типу Reset.
onsearchВикликається, коли користувач щось пише в поле пошуку (для &lt;input type=&quot;search&quot;&gt;)
onselectВикликаєтсья після того як будь-який текст був обраний в елементі.
onsubmitВикликається при відправленні форми.
onkeydownПодія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypressВикликається коли корисрувач натиснув на клавішу.
onkeyupВикликається коли користувач відпускає клавішу.
ondblclickВиникає при подвійному клацанні ЛКМ на елементі.
ondragПеріодично викликається при операції перетягування.
ondragendВикликається коли користувач відпускає перелягуваний елемент.
ondragenterВикликається, коли перетягуваний елемент входить в цільову зону.
ondragleaveВикликається, коли перетягуваний елемент виходть з зони призначення.
ondragoverВикликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstartВикликається, коли користувач починає перетягувати елемент, або виділений текст.
ondropВикликається, коли перетягуваний елемент падає до зони призначення.
onmousedownВикликається, коли користувач затискає ЛКМ на елементі.
onmousemoveВикликається, коли курсор миші переміщається над елементом.
onmouseoutВикликається, коли курсор виходить за межі елемента.
onmouseoverВиконується, коли курсор наводиться на елемент.
onmouseupВикликається, коли користувач відпускає кнопку миші.
onscrollВикликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheelВикликається, коли користувач прокручує коліщатко миші.
oncopyВикликається, коли користувач копіює вміст елемента.
oncutВикликається, коли користувач вирізає вміст елемента.
onpasteВикликається, коли користувач вставляє вміст в елемент.
onabortВиконується при перериванні якоїсь події.
oncanplayСкрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythroughСкрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechangeСкрипт виконується коли змінюється кий в &lt;track&gt; елемента
ondurationchangeВикликається коли змінюється довжина медіа файлу.
onemptiedВикликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onendedВикликається коли медіа елемент повністю відтворив свій зміст.
onshowВикликається, коли елемент &lt;menu&gt; буде відображено як контекстне меню.
onloadedmetadataСкрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddataВикликається коли медіа данні завантажено.
onloadstartВикликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpauseВикликається коли відтворення медіа даних призупинено.
onplayingВикликається коли розпочато відтворення медіа даних.
onprogressПодія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechangeВикликається коли змінюється швидкість відтворення медіа даних.
onseekedВикликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseekingВикликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalledСкрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspendСкрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdateВикликається коли змінилася позиція відтворення елемента &lt;audio&gt; або &lt;video&gt;.
onvolumechangeВикликається коли змінюється гучність звуку.
onwaitingВикликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggleВикликається, коли користувач відкриває або закриває елемент &lt;details&gt;.
onerrorВикликається якщо при завантаженні елемента сталася помилка.
onclickПодія викликається коли користувач клацає ЛКМ по елементу.

Как указать Canonical с помощью rel=&qout;canonical&qout; и другие методы | Центр поиска Google | Документация

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

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

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

Хотя мы рекомендуем вам использовать эти методы, ни один из них не является обязательным; твой сайт, скорее всего, будет работать без указания канонического предпочтения. Это потому что если вы не укажете канонический URL, Google определит, какая версия URL-адреса объективно лучше всего показывается пользователям в Поиске.

Если вы используете CMS, например WordPress, Wix или Blogger , возможно, вы не сможете редактировать свой HTML напрямую. Вместо этого ваша CMS может иметь страницу настроек поисковой системы. или какой-либо другой механизм, сообщающий поисковым системам о каноническом URL-адресе. Искать инструкции по модификации вашей страницы на вашей CMS (например, выполните поиск «wordpress установить канонический элемент»).

Причины указать канонический URL

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

  • Чтобы указать, какой URL вы хотите, чтобы люди видели в результатах поиска. Возможно, вы предпочитаете, чтобы люди переходили на страницу продукта зеленых платьев через https://www.example.com/dresses/green/greendress.html вместо https://example.com/dresses/cocktail?gclid=ABCD .
  • Для консолидации сигналов о похожих или дублирующихся страницах. Это помогает поисковые системы, чтобы иметь возможность консолидировать сигналы, которые они имеют для отдельных URL-адреса (например, ссылки на них) в один предпочтительный URL-адрес. Это означает, что сигналы с других сайтов на https://example.com/dresses/cocktail?gclid=ABCD получить объединены ссылками на https://www.example.com/dresses/green/greendress.html , если последнее становится каноническим.
  • Чтобы упростить отслеживание метрик для части контента. С разнообразием URL-адресов, вам может быть сложнее получить консолидированные показатели для определенный фрагмент контента.
  • Для управления синдицированным контентом. Если вы синдицируете свой контент для публикация на других доменах, вы можете захотеть, чтобы конкретный URL отображался в поиске Результаты.
  • Чтобы не тратить время на сканирование дубликатов страниц. Вы можете захотеть Googlebot, чтобы получить максимальную отдачу от вашего сайта, поэтому лучше потратить время сканирование новых (или обновленных) страниц на вашем сайте, а не сканирование дубликатов версии одного и того же контента.

Лучшие практики

Для всех методов канонизации следуйте этим рекомендациям:

  • Не используйте файл robots.txt для целей канонизации.
  • Не используйте средство удаления URL для канонизации. Он скрывает все версии URL из поиска.
  • Не указывайте разные URL-адреса как канонические для одной и той же страницы, используя различные методы канонизации (например, не указывать один URL-адрес в карта сайта, но другой URL для той же страницы с использованием отн = "канонический" ).
  • Не использовать без индекса как средство предотвращения выбора канонической страницы. Это правило призвано исключить страницу из индекса, чтобы не управлять выбором канонической страницы.
  • Если вы используете hreflang элементов, обязательно укажите каноническую страницу на том же языке или на самом лучшем из возможных заменить язык, если каноническая страница для того же языка не существует.
  • При размещении ссылки на своем сайте используйте канонический URL-адрес, а не повторяющийся URL-адрес. Постоянная ссылка на URL, который вы считаете каноническим, помогает Google понять ваши предпочтения.

Сравнение методов канонизации

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

Метод и описание
rel="canonical" ссылка элемент

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

Плюсы:
  • Может отображать бесконечное количество дубликатов страниц.
 Минусы:
  • Можно увеличить размер страницы.
  • Может быть сложно поддерживать сопоставление на больших сайтах или сайтах, где URL-адреса часто меняются.
  • Работает только для HTML-страниц, но не для таких файлов, как PDF. В таких случаях, вы можете использовать rel="canonical" HTTP-заголовок.
rel="canonical" HTTP-заголовок

Отправьте заголовок rel="canonical" в ответе вашей страницы.

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

Укажите свои канонические страницы в карте сайта.

Плюсы:

  • Простота сборки и обслуживания, особенно на больших площадках.

Минусы:

  • Google по-прежнему должен определить связанный дубликат для любого canonicals, которые вы указываете в карте сайта.
  • Менее мощный сигнал для Google, чем отн = "канонический" картографическая техника.
Перенаправления Используйте перенаправления, чтобы сообщить роботу Googlebot, что перенаправленный URL-адрес лучше, чем заданный. URL. Используйте это только при объявлении дубликата страницы устаревшим.
Вариант AMP Если одним из ваших вариантов является страница AMP, следуйте рекомендациям по AMP, чтобы укажите каноническую страницу и вариант AMP.

Google поддерживает rel канонический ссылка аннотации, как описано в RFC 6596. Вы можете предоставить аннотации rel="canonical" link в два пути:

  • Элемент rel="canonical" link в HTML
  • HTTP-заголовок rel="canonical" link

Мы рекомендуем вам выбрать один из них и использовать его; при поддержке, используя оба метода одновременно более подвержены ошибкам (например, вы можете предоставить один URL-адрес в заголовке HTTP и другой URL-адрес в отн = "канонический" ссылка элемент).

Элемент

rel="canonical" link

Элемент rel="canonical" link (также известный как канонический элемент ) — это элемент, используемый в разделе head HTML. чтобы указать, что другая страница представляет содержимое на странице.

Предположим, вы хотите https://example.com/dresses/green-dresses быть канонический URL-адрес, хотя к этому контенту могут обращаться различные URL-адреса. Укажите это URL как канонический со следующими шагами:

  1. Добавьте элемент с атрибутом rel="canonical" в раздел дубликаты страниц, указывающие на каноническую страницу. Например:
     
  <голова>
    Откройте для себя мир платьев
  2. Если каноническая страница имеет мобильный вариант на отдельном URL-адресе, добавьте rel="alternate" ссылка элемента на него, указывая на мобильный версия страницы:
     
  <голова>
    Откройте для себя мир платьев
  3. Добавить любой hreflang или другие элементы, подходящие для страницы.

Используйте абсолютные пути, а не относительные пути с rel="canonical" ссылка элемент. Несмотря на то, что относительные пути поддерживаются Google, они может вызвать проблемы в долгосрочной перспективе (например, если вы непреднамеренно разрешите тестовый сайт для сканирования), поэтому мы их не рекомендуем.

Хороший пример : https://www.example.com/dresses/green/greendress.html

Плохой пример : /dresses/green/greendress.html

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

Если вы используете JavaScript для добавления rel="canonical" ссылка элемент, убедись в правильно вставьте элемент канонической ссылки.

Если вы можете изменить конфигурацию вашего сервера, вы можете использовать отн = "канонический" HTTP-заголовок а не элемент HTML для указания канонического URL-адреса для документа, поддерживаемого поиском, включая документы, отличные от HTML, такие как PDF-файлы.

В настоящее время Google поддерживает этот метод только для результатов веб-поиска.

Если вы публикуете содержимое во многих форматах файлов, таких как PDF или Microsoft Word, каждый на их собственный URL, вы можете вернуть HTTP-заголовок rel="canonical" , чтобы сообщить Googlebot, какой канонический URL-адрес для файлов, отличных от HTML. Например, чтобы указать что PDF-версия версии .docx должна быть канонической, вы можете добавьте этот HTTP-заголовок для версии содержимого .docx :

 HTTP/1.1 200 ОК
Длина контента: 19...
  Ссылка: ; отн = "канонический" 
...

Как и в случае с элементом rel="canonical" link , используйте абсолютные URL-адреса. в HTTP-заголовке rel="canonical" и согласно RFC2616, используйте только двойные кавычки вокруг URL.

Использовать карту сайта

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

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

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

Используйте этот метод, если хотите избавиться от существующих дубликатов страниц. Все методы перенаправления — 301 и 302 редиректы, мета-обновление , Перенаправления JavaScript — имеют такое же влияние на поиск Google, однако время поисковые системы должны заметить, что разные методы перенаправления могут различаться.

Для быстрого эффекта используйте 3xx HTTP (также известный как на стороне сервера ). перенаправляет.

Предположим, что на вашу страницу можно попасть несколькими способами:

  • https://example.com/home
  • https://home.example.com
  • https://www.example.com

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

Помимо явно предоставленных методов, Google также использует набор сигналов канонизации. которые обычно основаны на настройке сайта: предпочтение HTTPS вместо HTTP и URL-адреса в hreflang кластеров.

Предпочитать HTTPS вместо HTTP для канонических URL-адресов

Google предпочитает страницы HTTPS эквивалентным страницам HTTP как каноническим, за исключением случаев, когда являются проблемы или противоречивые сигналы, такие как следующие:

  • Страница HTTPS имеет недействительный сертификат SSL.
  • Страница HTTPS содержит небезопасные зависимости (кроме изображений).
  • Страница HTTPS перенаправляет пользователей на страницу HTTP или через нее.
  • Страница HTTPS имеет ссылку rel="canonical" на HTTP-страницу.

Хотя наши системы по умолчанию предпочитают страницы HTTPS страницам HTTP, вы можете убедиться в этом. поведение, предприняв любое из следующих действий:

  • Добавить перенаправления со страницы HTTP на страницу HTTPS.
  • Добавьте ссылку rel="canonical" из HTTP страницу на страницу HTTPS.
  • Осуществлять ХСТС.

Чтобы Google не мог неправильно сделать HTTP-страницу канонической, избегайте . следующие практики:

  • Избегайте плохих сертификатов TLS/SSL и перенаправлений HTTPS-to-HTTP, поскольку они очень сильно предпочесть HTTP. Внедрение HSTS не может отменить это сильное предпочтение.
  • Не включайте HTTP-версию своих страниц в карту сайта или hreflang аннотации а не версию HTTPS.
  • Избегайте использования сертификата SSL/TLS для неправильного варианта хоста. Например, example.com , обслуживающий сертификат для subdomain.example.com . Сертификат должен совпадать с полным URL-адресом вашего сайта или быть подстановочным сертификатом, может использоваться для нескольких поддоменов в домене.

Предпочитать URL-адреса в кластерах

hreflang

Чтобы помочь с усилиями по локализации сайтов, для целей канонизации Google предпочитает URL-адреса, которые являются частью кластеров hreflang . Например, если https://example.com/de-de/cats и https://example.com/de-ch/cats взаимно указывают друг на друга с помощью hreflang аннотации, но не для https://example.com/de-at/cats , страницы для de-de и de-ch будут предпочтительнее в качестве канонических. страницы /de-at/ , которая не отображается в hreflang кластер.

Подробнее о устранение неполадок и исправление проблем с канонизацией.

mailto: HTML-ссылка на электронную почту

mailto: HTML-ссылка на электронную почту, что это такое, как создать, примеры и генератор кода.

  • Что такое ссылка mailto?
  • Как создать ссылку mailto в HTML?
  • mailto примеры
  • генератор кода ссылки mailto

Что такое ссылка mailto

Ссылка mailto — это тип ссылки HTML, которая активирует почтовый клиент по умолчанию на компьютере для отправки электронной почты.

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

Если у вас Microsoft Outlook , например, в качестве почтового клиента по умолчанию, нажатие на ссылку mailto откроет новая почта окно.

Как создать ссылку mailto в HTML

Ссылка mailto записывается как обычная ссылка с дополнительными параметрами внутри атрибута href:

mailto examples

Отправить письмо на адрес электронной почты

com»>Отправить письмо

Код сгенерирует эту ссылку:

Отправить письмо

Нажав на ссылку выше откроется новое почтовое окно:

 

Почта на адрес электронной почты с темой

Отправить почту с тема

%20 представляет пробел.

Код создаст эту ссылку:

Отправить письмо с темой

При нажатии на ссылку выше откроется новое окно почты:

 

Почта на адрес электронной почты с копией, скрытой копией, темой и телом

Как добавить пробелы в тему или тело письма

Вы можете добавить пробелы, написав %20 в тексте субъекта или тела.

No related posts.