Skip to content
/ HEAD Public
forked from joshbuchea/HEAD

Список того, что вы можете указать в HEAD

html-head.ru
185 stars 1.9k forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

htmlacademy/HEAD

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

423 Commits
.github
.github
 
 
scripts
scripts
 
 
styles
styles
 
 
.gitignore
.gitignore
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 

Repository files navigation

🤯 HEAD

Простое руководство по HTML-элементам в <head>

Contributors CC0 Follow @joshbuchea on Twitter

Оглавление

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--
   Вышеуказанные 2 мета-тега *должны* стоять как можно раньше в <head>.
   Для обеспечения правильного отображения документов.
   Любой другой элемент заголовка должен идти *после* этих тегов.
  -->
  <title>Заголовок страницы</title>
</head>

meta charset - определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" - настройки viewport, связанные с мобильной отзывчивостью

width=device-width - физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 - начальный масштаб, 1 означает отсутствие масштабирования

⬆ вернуться к началу.

Элементы

Допустимые элементы <head> включают base, link, meta, noscript, script, style, template и title.

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

<!--
 Установите кодировку символов для этого документа так, чтобы
 все символы в пространстве UTF-8 (например, эмодзи)
 отображались правильно.
-->
<meta charset="utf-8">

<!-- Установите заголовок документа -->
<title>Заголовок страницы</title>

<!-- Установите базовый URL для всех относительных URL в документе -->
<base href="https://example.com/page.html">

<!-- Ссылка на внешний файл CSS -->
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/print.css" media="print">

<!-- Используется для добавления CSS в документ. Используется для важной стилизации -->
<style>
/* ... */
</style>

<!-- Ссылка на внешний JavaScript файл -->
<script src="scripts/scripts.js"></script>

<!-- Используется для добавления JavaScript в документ-->
<script>
 // функция(и) идут здесь
</script>

<!-- Используется на случай если JavaScript отключен в браузере -->
<noscript>
 <!-- Альтернатива, когда JavaScript отключен -->
</noscript>

<!-- 
  Используется для объявления HTML-фрагментов, которые могут быть клонированы и вставлены в документ.
  Если указан в <head>, то <template> может содержать только метаданные 
-->
<template>
  
</template>

⬆ вернуться к началу.

Мета

<!--
  Вышеуказанные 2 мета-тега *должны* стоять как можно раньше в <head>.
  Для обеспечения правильного отображения документов.
  Любой другой элемент заголовка должен идти *после* этих тегов.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- viewport-fit для управления безопасной зоны -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • contain: вьюпорт должен полностью вмещать веб-контент.
  • cover: веб-контент должен полностью покрывать вьюпорт.
  • auto: значение по умолчанию, работает как contain.

Подробнее в блоке css-live

<!--
  Позволяет контролировать, откуда загружаются ресурсы.
  Поместите как можно раньше в <head>, так как тег 
  применяется только к ресурсам, которые объявлены после него.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Название веб-приложения (должно использоваться только в том случае, если веб-сайт используется как приложение) -->
<meta name="application-name" content="Имя приложения">.

<!-- Цвет вкладки для Chrome на Android, Vivaldi, Safari 15 -->
<meta name="theme-color" content="#4285f4">

<!-- Список ключевых слов -->
<meta name="keywords" content="ваши, теги">

<!-- Краткое описание документа (ограничение до 150 символов) -->
<!-- Это содержимое *может* использоваться в результатах поисковых систем. -->
<meta name="description" content="Описание страницы">.
<!-- Управление поведением поисковых машин при осмотре и индексации сайта -->
<meta name="robots" content="index,follow"><!-- Все поисковые системы -->
<meta name="googlebot" content="index,follow"><!-- Специфика Google -->
<meta name="bingbot" content="index,follow"><!-- Специфика Bing -->

Для роботов есть несколько значений:

  • all - нет ограничений на индексирование и показ контента.
  • noindex - не показывать эту страницу в результатах поиска.
  • nofollow - не выполнять переход по ссылкам на странице.
  • none - эквивалент noindex, nofollow.
  • noarchive - запрещает показывать ссылку на кеш в результатах поиска.
  • nosnippet - не показывать в результатах поиска текстовый фрагмент или видео.
  • max-snippet: [number] - ограничение на количество символов в текстовом фрагменте
  • max-image-preview: [setting] - определяет максимальный размер изображений, которые могут показываться в результатах поиска для этой страницы.
  • max-video-preview: [number] - задает для фрагмента видео со страницы ограничение по длительности в секундах при показе в результатах поиска.
  • notranslate - не предлагать перевести эту страницу в результатах поиска.
  • noimageindex - не индексировать изображения на странице.
  • unavailable_after: [date/time] - запрещает показывать страницу в результатах поиска после даты и времени.
  • noyaca - запрет на использование информации из Яндекса. Каталога для описания в сниппете
  • noodp — запрет на использование описания из dMoz для сниппета;
  • noydir — запрет на использование описания из Yahoo! Directory для сниппета.

Значения можно писать через запятую content="max-snippet:-1, max-image-preview:large, max-video-preview:-1". Подробнее в документации Google Поиска

<!-- Указывает Google не показывать поисковую строку sitelinks -->
<meta name="google" content="nositelinkssearchbox">

<!-- Указывает Google не переводить документ -->
<meta name="google" content="notranslate">

<!-- Проверить право собственности сайта -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Яндекс Вебмастерам -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->

<!-- Укажите программное обеспечение, использованное для создания документа (например, WordPress, Dreamweaver) -->
<meta name="generator" content="название программного обеспечения">

<!-- Краткое описание темы вашего документа -->
<meta name="subject" content="тема вашего документа">

<!-- Дает общую возрастную оценку, основанную на содержании документа -->
<meta name="rating" content="General">

<!-- Позволяет контролировать, как передается информация о реферере -->
<meta name="referrer" content="no-referrer">
<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров -->
<meta name="format-detection" content="telephone=no">

<!-- а также можно отключить дату, адрес, url и email -->
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="url=no">
<meta name="format-detection" content="email=no">

<!-- можно комбинировать несколько значений-->
<meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">

Подробнее в:

<!-- Полностью отказаться от предварительной выборки DNS, установив значение "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- Указывает документ, который будет отображаться в определенном фрейме -->
<meta http-equiv="Window-Target" content="">

У Window-Target есть несколько значений значения:

  • _self - загружает документ в текущем окне
  • _blank - загружает документ в новом окне
  • _parent - загружает документ в родительском фрейме
  • _top - загружает документ в полном окне браузера
  • имя_фрейма - загружает документ в указанном фрейме
<!-- Гео-теги -->
<meta name="ICBM" content="широта, долгота">.
<meta name="geo.position" content="широта;долгота">
<meta name="geo.region" content="country[-state]"><!-- Код страны (ISO 3166-1): обязательный, код штата (ISO 3166-2): необязательный; например, content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- например, content="New York City" -->

<!-- Монетизация веб-сайтов https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$paymentpointer.example">

<!-- Подсказывает, что сайт оптимизирован для мобильных устройств-->
<meta name="HandheldFriendly" content="true">

<!-- Указывает автора документа -->
<meta name="author" content="Nikolai Shabalin">

<!-- Принадлежность авторских прав-->
<meta name="copyright" content="Nikolai Shabalin">

<!-- Создатель документа -->
<meta name="creator" content="Nikolai Shabalin">

<!-- Владелец -->
<meta name="owner" content="">

<!-- Перезагружает страницу через указанное количество секунд -->
<meta http-equiv="Refresh" content="20">
<meta http-equiv="Refresh" content="20; URL=page4.html"> <!-- Перезагружает к указанной странице -->

<!-- Язык документа -->
<meta name="language" content="Russian">
<!-- контролирует занесение страниц в кэш-память -->
<meta http-equiv="pragma" content="no-cache">

Подробнее про pragma.

<!-- Сделать повторный сетевой запрос после указанной даты и времени -->
<meta http-equiv="Expires" content="Sun, 01 Jan 2012 00:00:01 GMT" />

Подробнее про expires.

<!-- Как часто посещать сайт роботу-->
<meta name="revisit" content="10 day">

<!-- Дата последнего изменения документа -->
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />

<!-- Как часто посещать сайт роботу-->
<meta name="revisit-after" content="10 day">

revisit-after поисковыми роботами чаще всего игнорируется.

<!-- Используется как description, но для научных статей-->
<meta name="abstract" content="">
<meta name="topic" content="">
<meta name="summary" content="">

<!-- Для обратной связи -->
<meta name="reply-to" content="[email protected]">
<!-- Соль -->
<meta name="salt" content="21f157b19463e98d0e9723cf486d620a">

Про соль подробнее

<!-- Регистрация доменного имени -->
<meta name="parking" content="имя регистратора">

Подробнее про парковку доменов

<!-- Отключает возможность Скайпа звонить по номерам на странице-->
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Подробнее про отключение Скайпа

⬆ вернуться к началу.

Ссылки

<!-- Путь до внешней таблицы стилей -->
<link rel="stylesheet" href="https://example.com/styles.css">.

<!-- Помогает предотвратить проблемы дублированного контента -->
<link rel="canonical" href="https://example.com/article/?page=2">

<!-- Ссылки на AMP HTML версию текущего документа -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- Ссылка на JSON-файл, в котором указаны данные для "установки" веб-приложения -->
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="manifest.webmanifest">
<!-- Ссылки на информацию об авторе (авторах) документа -->
<link rel="author" href="humans.txt">

О human.txt подробнее

<!-- Ссылается на заявление об авторском праве, применимое к контексту ссылки -->
<link rel="license" href="copyright.html">

<!-- Дает ссылку на место в вашем документе, который может быть на другом языке -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Предоставляет информацию об авторе или другом человеке. 
Используется для RelMeAuth, распределённой формы проверки личности. Смотри https://microformats.org/wiki/RelMeAuth, чтобы узнать больше -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:[email protected]">.
<link rel="me" href="sms:+15035550125">

<!-- Ссылки на документ, описывающий коллекцию записей, документов или других материалов, представляющих исторический интерес -->
<link rel="archives" href="https://example.com/archives/">

<!-- Ссылки на ресурс верхнего уровня в иерархической структуре -->
<link rel="index" href="https://example.com/article/">

<!-- Обеспечивает самостоятельную ссылку - полезно, когда документ имеет несколько возможных ссылок -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">

<!-- Предыдущий и следующий документы в серии документов, соответственно -->
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">

<!-- Используется, когда для ведения блога используется сторонний сервис -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- Формирует автоматический комментарий, когда другой блог WordPress ссылается на ваш блог WordPress или пост -->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- Уведомляет URL, когда вы ссылаетесь на него в вашем документе. Дополнительная информация на https://webmention.net -->
<link rel="webmention" href="https://example.com/webmention">

<!-- Позволяет размещать сообщения на вашем собственном домене с помощью клиента Micropub. Более подробная информация на https://indieweb.org/Micropub  -->
<link rel="micropub" href="https://example.com/micropub">

<!-- Позволяет использовать ваш сайт с [социальным ридером](https://indieweb.org/social_reader) на базе Microsub. Более подробная информация на https://indieweb.org/Microsub -->
<link rel="microsub" href="https://example.com/microsub">

<!-- Позволяет использовать ваш сайт с IndieAuth, для проверки личности с помощью вашего доменного имени. Подробнее на https://indieauth.net -->
<link rel="token_endpoint" href="https://example.com/token">
<link rel="authorization_endpoint" href="https://example.com/auth">

<!-- Open Search -->
<link rel="search" href="open-search.xml" type="application/opensearchdescription+xml" title="Заголовок поиска">

<!-- Фиды -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<!-- Дополнительная информация: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" as="image" href="important.png">

Значений as может быть несколько:

  • audio: аудиофайл
  • document: HTML-документ
  • embed: внедренный ресурс
  • fetch: любой ресурс, который не подходит ни под одну из остальных категорий
  • font: шрифт
  • image: изображение
  • object: объект
  • script: JavaScript-файл
  • style: CSS-файл
  • track: файл субтитров
  • video: видеофайл
  • worker: воркер

У image есть уникальная возможность указать адаптивную картинку:

<link rel="preload" as="image" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w">
<link rel="modulepreload" href="super-critical-stuff.js"> <!-- Предзагрузка модулей -->

⬆ вернуться к началу.

Иконки

<!-- Для IE 10 и ниже -->
<link rel="icon" href="favicon.ico"><!-- 32×32 -->

<link rel="icon" href="favicon.ico"> - необязательно указывать в <head>. Любой сервер ищет favicon.ico, но для этого favicon.ico обязательно нужно положить в корень проекта. От .ico лучше не отказываться, так как могут перестать работать иконки, например в RSS-читалках. В .ico поддерживается прозрачность. На данный момент в Хром есть баг. Если в проекте подключены ICO и SVG версии, то всё равно предпочтение отдаётся ICO.

<link rel="icon" href="icon.svg" type="image/svg+xml">

Преимущество SVG-фавиконки в том, что, помимо того, что он векторный, он может подстраиваться под тёмную тему с помощью @media (prefers-color-scheme: dark). Поддержка векторных фавиконок.

<!-- IOS 8+ -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"><!-- 180×180 -->

Используется для отображения ярлыка на домашнем экране IPhone и IPad.

Выше указаны три версии для фавиконки, но можно добавить ещё 2, чтобы учесть большинство современных браузеров. Чтобы не увеличивать HTML другие фавиконки добавляют в веб-манифест

<link rel="manifest" href="/manifest.webmanifest">

manifest.webmanifest

{
  "icons": [
    { "src": "192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "12.png", "type": "image/png", "sizes": "512x512" }
  ]
}

⬆ вернуться к началу.

Социальные сети

Facebook Open Graph

Большинство материалов передается на Facebook в виде URL, поэтому важно, чтобы вы разметили свой сайт тегами Open Graph, чтобы взять под контроль то, как ваши материалы появляются на Facebook. Подробнее о разметке Facebook Open Graph

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Заголовок содержимого">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="Описание того, что находится на изображении (не подпись)">
<meta property="og:description" content="Описание">
<meta property="og:site_name" content="Название сайта">
<meta property="og:locale" content="ru_RU">
<meta property="article:author" content="">

Twitter Card

С помощью Twitter Cards вы можете прикреплять к твитам фотографии, видео и мультимедийные файлы, тем самым способствуя привлечению трафика на ваш сайт. Подробнее о Twitter Cards

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Заголовок контента">.
<meta name="twitter:description" content="Описание контента менее 200 символов">.
<meta name="twitter:image" content="https://example.com/image.jpg">.
<meta name="twitter:image:alt" content="Текстовое описание изображения, передающее его суть пользователям с ослабленным зрением. Максимум 420 символов.">

Twitter Privacy

Если вы встраиваете твиты в свой сайт, Twitter может использовать информацию с вашего сайта для адаптации контента и предложений для пользователей Twitter. Подробнее о возможностях конфиденциальности Twitter.

<!-- запретить Twitter использовать информацию о вашем сайте в целях персонализации -->
<meta name="twitter:dnt" content="on">

Schema.org

<html lang="" itemscope itemtype="https://schema.org/Article">
   <head>
     <link rel="author" href="">
     <link rel="publisher" href="">
     <meta itemprop="name" content="Заголовок контента">.
     <meta itemprop="description" content="Описание содержимого менее 200 символов">.
     <meta itemprop="image" content="https://example.com/image.jpg">
  </head>
</html>

Примечание: Эти мета-теги требуют добавления атрибутов itemscope и itemtype к тегу <html>.

JSON-LD

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

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "author": {
      "@type": "Person",
      "name": "Your Name"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Your Organization"
    },
    "headline": "Article Headline",
    "image": "https://example.com/image.jpg",
    "datePublished": "2020-02-05T08:00:00+08:00",
    "dateModified": "2020-03-05T09:20:00+08:00"
  }
</script>

⬆ вернуться к началу.

Pinterest

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

<meta name="pinterest" content="nopin" description="Извините, вы не можете сохранить с моего сайта!">.

Facebook Instant Articles

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- URL веб-версии вашей статьи -->
<link rel="canonical" href="https://example.com/article.html">

<!-- Стиль, который будет использоваться для этой статьи -->
<meta property="fb:article_style" content="myarticlestyle">

OEmbed

<link rel="alternate" type="application/json+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
 title="Профиль oEmbed: JSON">
<link rel="alternate" type="text/xml+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
 title="oEmbed Profile: XML">

QQ/Wechat

Пользователи обмениваются веб-страницами в qq wechat с помощью форматированного сообщения

<meta itemprop="name" content="название акции">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="поделиться содержимым">

⬆ вернуться к началу.

Браузеры / Платформы

Apple iOS

<!-- Баннер умного приложения -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров -->
<meta name="format-detection" content="telephone=no">

<!-- Иконка запуска (180x180px или больше) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Изображение экрана запуска -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">

<!-- Заголовок значка запуска -->
<meta name="apple-mobile-web-app-title" content="Название приложения">.

<!-- Включить автономный (полноэкранный) режим -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Внешний вид строки состояния (не влияет, если не включен автономный режим) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- Глубокое связывание приложений iOS -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

Google Android

<!-- Цветовая тем приложения -->
<meta name="theme-color" content="#E64545">

<!-- Добавить на главный экран -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Дополнительная информация: https://developer.chrome.com/multidevice/android/installtohomescreen -->

<!-- Глубокое связывание приложений Android -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">

Google Chrome

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">.

<!-- Отключить подсказку перевода -->
<meta name="google" content="notranslate">

Microsoft Internet Explorer

<!-- Заставить IE 8/9/10 использовать свой последний движок рендеринга -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров расширением для браузера Skype Toolbar-->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- Плитки Windows -->
<meta name="msapplication-config" content="/browserconfig.xml">

Минимально необходимая разметка xml для browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="small.png"/>
            <square150x150logo src="medium.png"/>
            <wide310x150logo src="wide.png"/>
            <square310x310logo src="large.png"/>
        </tile>
    </msapplication>
</browserconfig>

⬆ вернуться к началу.

Браузеры (китайские)

360 Browser

<!-- Выбор порядка движков рендеринга -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ Mobile Browser

<!-- Фиксирует экран в заданной ориентации -->
<meta name="x5-orientation" content="landscape/portrait">

<!-- Отображение этого документа в полноэкранном режиме -->
<meta name="x5-fullscreen" content="true">

<!-- Документ будет отображаться в "режиме приложения" (полноэкранный режим и т.д.) -->
<meta name="x5-page-mode" content="app">

UC Mobile Browser

<!-- Фиксация экрана в заданной ориентации -->
<meta name="screen-orientation" content="landscape/portrait">

<!-- Отображение этого документа в полноэкранном режиме -->
<meta name="full-screen" content="yes">

<!-- Браузер UC будет отображать изображения, даже если находится в "текстовом режиме" -->
<meta name="imagemode" content="force">

<!-- Документ будет отображаться в "режиме приложения" (полноэкранный режим, запрещающий жест и т.д.) -->
<meta name="browsermode" content="application">

<!-- Отключение "ночного режима" браузера UC для этого документа -->
<meta name="nightmode" content="disable">

<!-- Упростить документ, чтобы уменьшить передачу данных -->
<meta name="layoutmode" content="fitscreen">

<!-- Отключить функцию браузера UC "увеличивать масштаб шрифта, когда в документе много слов" -->
<meta name="wap-font-scale" content="no">

⬆ вернуться к началу.

CSRF

<!-- Токен для идентификации формы -->
<meta name="csrf-token" content="токен">
<meta name="csrf-param" content="csrf_token">

Подробнее про CSRF-атаки

⬆ вернуться к началу.

Подсказки клиентов

<!-- Включает подсказки клиентов -->
<meta http-equiv="Accept-CH" content="DPR">
<meta http-equiv="Accept-CH" content="DPR, Width">

Подробнее про подсказки клиентов

⬆ вернуться к началу.

Устаревшее

Значок прикрепленной вкладки Safari

В macOS 10.11 появились закреплённые закладки, но стандартные не подошли. Поэтому создали новый тип фавиконки. Далее эти значки использовались в тач-баре Макбуков.

Для таких значков есть ряд требований:

  • только SVG
  • 100% чёрный вектор
  • с помощью color менять цвет
  • SVG должен быть однослойным
  • viewBox должен быть равен "0 0 16 16"
  • фон должен быть прозрачным
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

Проблемой было то, что такие значки, хоть они и SVG, никак не менялись для тёмной темы. А прозрачный фон становился контрастным, но вы это не могли контролировать.

Сейчас для тач-бара и закрепленной вкладки хорошо подходят:

  • Apple touch иконки <link rel="apple-touch-icon" href="/custom_icon.png">
  • Фавиконка <link rel="icon" href="favicon.png">
  • Монограмма. Если никаких иконок нет, то значок создаётся из первой буквы заголовка страницы или имени домена верхнего уровня

Начиная с Safari 12 отдельный вариант иконок стал не нужен.

Значок плитки Windows

<meta name="msapplication-TileColor" content="#efefef">

Браузер Edge раньше поддерживал такой формат значков для меню "Пуск". Для последних версий Windows это больше не требуется

Отображение документа в нужном режиме для IE

В зависимости от переданного значения content заставляет различные версии IE отображать документ в том или ином режиме.

<meta http-equiv="X-UA-Compatible" content="IE=5">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Но начиная с IE11 режимы документов устарели. Режим Edge стал предпочтительным.

shortcut для фавиконок

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

shortcut - использовался исключительно IE.

Почему не стоит использовать shortcut

Яндекс табло

<link rel="yandex-tableau-widget" href="/manifest.json">

manifest.json

{
"version": "1.0",
"api_version": 1,
"layout":
	{
	"logo": "https://webliberty.ru/wp-content/themes/lime/images/manifest.png",
	"color": "#e9ffd0",
	"show_title": false
	}
}

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

Ссылки на приложения

Поддержка прекращена

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">

<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">

<!-- Web fall back -->
<meta property="al:web:url" content="https://applinks.org/documentation">

⬆ вернуться к началу.

Первый и последний документы в серии документов

<!-- Первый и последний документы в серии документов, соответственно -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">

Другие ресурсы

⬆ вернуться к началу.

Связанные проекты

⬆ вернуться к началу.

🌐 Переводы

⬆ вернуться к началу.

🤝 Contributing

Откройте issue или PR, чтобы предложить изменения или дополнения.

🌟 Contributors

Посмотрите на всех супер классных авторов 🤩

👤 Автор оригинального репозитория

Josh Buchea

💛 Поддержка

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

Всем кто помогает, спасибо! 🙏

— Josh

📝 Лицензия

CC0

⬆ вернуться к началу.

About

Список того, что вы можете указать в HEAD

html-head.ru

Topics

html list favicon meta-tags head

Resources

Readme
Activity
Custom properties

Stars

185 stars

Watchers

4 watching

Forks

21 forks
Report repository

Releases 22

Коко Latest
Feb 6, 2024
+ 21 releases

Packages

No packages published