Элементы HTML HEAD
Коллекция элементов заголовка HTML .
расшифровка
ГОЛОВА
Коллекция элементов заголовка HTML.
<! doctype html> <html lang = "en"> <Голова> <Название> ГОЛОВКА </ название> </ HEAD> <Тело> </ Body> </ Html>
Список Содержит
- элементы
- Мета Элемент
- Элемент Связи
- Favicons
- Социальное
- Браузер / платформа
- Ссылки на приложения
элементы
<title> Заголовок страницы </ title>
<base href = "https://example.com/page.html">
<Стиль>
тело {цвет: красный; }
</ Стиль>
<script src = "script.js"> </ script>
Мета Элемент
<meta charset = "utf-8"> <meta http-equ = "x-ua-совместимый" content = "ie = edge"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <! - Приведенные выше 3 мета-тега * должны * идти первым в голове; любой другой заголовок должен идти * после * этих тегов -> <meta name = "Keywords" content = "Ваш, ключевые слова, здесь, запятая, разделенные, нет, пробелы"> <meta name = "description" content = "150 символов"> <meta name = "subject" content = "тема вашего сайта"> <meta name = "language" content = "en"> <meta name = "robots" content = "index, follow"> <meta name = "googlebot" content = "index, follow"> <meta name = "google" content = "nositelinkssearchbox"> <meta name = "google-site-verify" content = "verify_token"> <meta name = "updated" content = "Воскресенье, 18 июля 2010 г., 17:15"> <meta name = "abstract" content = ""> <meta name = "topic" content = ""> <meta name = "summary" content = ""> <meta name = "классификация" content = "business"> <meta name = "author" content = "name, [электронная почта защищена] "> <meta name = "designer" content = ""> <meta name = "reply-to" content = " [электронная почта защищена] "> <meta name = "owner" content = ""> <meta name = "url" content = "https://example.com/"> <meta name = "identifier-URL" content = "https://example.com/"> <meta name = "directory" content = "submission"> <meta name = "category" content = ""> <meta name = "cover" content = "Worldwide"> <meta name = "distribution" content = "Global"> <meta name = "rating" content = "General"> <meta name = "referrer" content = "never"> <meta name = "revisit-after" content = "7 дней"> <meta http-equ = "refresh" content = "300; url = https: //example.com/"> <! - Контроль кэша -> <meta http-equ = "Expires" content = "0"> <meta http-equ = "Pragma" content = "no-cache"> <meta http-equ = "Cache-Control" content = "no-cache">
Элемент Связи
<link rel = "copyright" href = "copyright.html"> <link rel = "stylesheet" href = "https://example.com/styles.css"> <link rel = "alternate" href = "https://feeds.feedburner.com/martini" type = "application / rss + xml" title = "RSS"> <link rel = "alternate" href = "https://example.com/feed.atom" type = "application / atom + xml" title = "Atom 0.3"> <link rel = "alternate" href = "https://es.example.com/" hreflang = "es"> <link rel = "me" href = "https://google.com/profiles/thenextweb" type = "text / html"> <link rel = "archives" href = "https://example.com/2003/05/" title = "Май 2003"> <link rel = "index" href = "https://example.com/" title = "ДеВитт Клинтон"> <link rel = "start" href = "https://example.com/photos/pattern_recognition_1_about/" title = "Распознавание образов 1"> <link rel = "prev" href = "https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" title = "OpenSearch и OpenID? Конечно способ привлечь мое внимание. "> <link rel = "search" href = "/ search.xml" type = "application / opensearchdescription + xml" title = "Viatropos"> <link rel = "self" type = "application / atom + xml" href = "https://example.com/atomFeed.php?page=3"> <link rel = "first" href = "https://example.com/atomFeed.php"> <link rel = "next" href = "https://example.com/atomFeed.php?page=4"> <link rel = "previous" href = "https://example.com/atomFeed.php?page=2"> <link rel = "last" href = "https://example.com/atomFeed.php?page=147"> <link rel = "shortlink" href = "https://example.com/?p=43625"> <link rel = "canonical" href = "https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"> <link rel = "amphtml" href = "https://www.example.com/url/to/amp-version.html"> <link rel = "EditURI" href = "https://example.com/xmlrpc.php?rsd" type = "application / rsd + xml" title = "RSD"> <link rel = "pingback" href = "https://example.com/xmlrpc.php"> <link rel = "webmention" href = "https://example.com/webmention"> <link rel = "manifest" href = "manifest.json"> <link rel = "author" href = "humans.txt"> <link rel = "import" href = "component.html"> <! - Предварительная загрузка, предварительная загрузка, предварительный просмотр -> <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 = "subresource" href = "styles.css"> <link rel = "preload" href = "image.png"> <! - Дополнительная информация: https://css-tricks.com/prefetching-preloading-prebrowsing/ ->
Favicons
<! - для IE 10 и ниже -> <! - Нет ссылки, просто поместите файл favicon.ico в корневой каталог -> <! - Для IE 11, Chrome, Firefox, Safari, Opera -> <link rel = "icon" href = "path / to / favicon-16.png" size = "16x16" type = "image / png"> <link rel = "icon" href = "path / to / favicon-32.png" sizes = "32x32" type = "image / png"> <link rel = "icon" href = "path / to / favicon-48.png" sizes = "48x48" type = "image / png"> <link rel = "icon" href = "path / to / favicon-62.png" sizes = "62x62" type = "image / png"> <! - Подробнее: https://bitsofco.de/all-about-favicons-and-touch-icons/ ->
Социальное
- Facebook / Открыть График
- щебет
- Google+ / Schema.org
Facebook / Открыть График
<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: description" content = "Описание здесь"> <meta property = "og: site_name" content = "Имя сайта"> <meta property = "og: locale" content = "en_US"> <meta property = "article: author" content = ""> <! - Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -> <! - Открыть график: http://ogp.me/ ->
щебет
<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"> <! - Дополнительная информация: https://dev.twitter.com/cards/getting-started -> <! - Проверить: https://dev.twitter.com/docs/cards/validation/validator ->
Google+ / Schema.org
<meta itemprop = "name" content = "Заголовок содержимого"> <meta itemprop = "description" content = "Содержание описания менее 200 символов"> <meta itemprop = "image" content = "https://example.com/image.jpg">
Браузер / платформа
- Apple iOS
- Apple Safari
- Google Android
- Гугл Хром
- Microsoft Internet Explorer
- Microsoft Internet Explorer (LEGACY НЕ ИСПОЛЬЗУЙТЕ)
- Браузер 360
Apple iOS
<! - Smart App Banner -> <meta name = "apple-itunes-app" content = "app-id = APP_ID, affiliate-data = AFFILIATE_ID, app-аргумент = SOME_TEXT"> <! - отключить автоматическое обнаружение и форматирование возможных телефонных номеров -> <meta name = "format-Detection" content = "telephone = no"> <! - Добавить на главный экран -> <meta name = "apple-mobile-web-app-enabled" content = "yes"> <meta name = "apple-mobile-web-app-status-bar-style" content = "black"> <meta name = "apple-mobile-web-app-title" content = "Название приложения"> <! - Сенсорные иконки -> <link rel = "apple-touch-icon" href = "apple-touch-icon.png"> <link rel = "apple-touch-icon-precomposed" href = "apple-touch-icon-precomposed.png"> <! - В большинстве случаев достаточно одного сенсорного значка размером 180 × 180 пикселей в голове -> <! - Если вы используете art-direction и / или хотите иметь разный контент для каждого устройства, вы можете добавить больше сенсорных значков -> <! - Startup Image -> <link rel = "apple-touch-startup-image" href = "startup.png"> <! - Дополнительная информация: https://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html ->
Apple Safari
<! - Закрепленный сайт -> <link rel = "mask-icon" href = "icon.svg" color = "red">
Google Android
<meta name = "theme-color" content = "# E64545"> <! - Добавить на домашний экран -> <meta name = "с поддержкой мобильного веб-приложения" content = "yes"> <! - Дополнительная информация: https://developer.chrome.com/multidevice/android/installtohomescreen ->
Гугл Хром
<link rel = "chrome-webstore-item" href = "https://chrome.google.com/webstore/detail/APP_ID"> <! - Отключить запрос на перевод -> <meta name = "google" value = "notranslate">
Microsoft Internet Explorer
<meta http-equ = "x-ua-совместимый" content = "ie = edge"> <meta http-equ = "cleartype" content = "on"> <meta name = "skype_toolbar" content = "skype_toolbar_parser_compatible"> <! - Закрепленный сайт -> <! - IE 10 / Windows 8 -> <meta name = "msapplication-TileImage" content = "pinned-tile-144.png"> <meta name = "msapplication-TileColor" content = "# 009900"> <! - IE 11 / Windows 9.1 -> <meta name = "msapplication-config" content = "ieconfig.xml">
Microsoft Internet Explorer (LEGACY НЕ ИСПОЛЬЗУЙТЕ)
<! - Тэги Legacy (НЕ ИСПОЛЬЗОВАТЬ) -> <meta name = "mssmarttagspreventparsing" content = "true"> <meta http-equ = "page-enter" content = "revealtrans (duration = 2, transition = 2)"> <meta http-equ = "page-exit" content = "revealtrans (duration = 3, transition = 12)">
Браузер 360
<! - выбрать движок рендеринга по порядку -> <meta name = "renderer" content = "webkit | ie-comp | ie-stand">
Ссылки на приложения
<! - 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 = "Ссылки на приложения"> <! - Android -> <meta property = "al: android: url" content = "applinks: // docs"> <meta property = "al: android: app_name" content = "Ссылки на приложения"> <meta property = "al: android: package" content = "org.applinks"> <! - Web Fallback -> <meta property = "al: web: url" content = "http://applinks.org/documentation"> <! - Дополнительная информация: http://applinks.org/documentation/ ->
Новый контент: Composer: менеджер зависимостей для PHP , R программирования
disqus2code