一份清单：全部能够放进head标签的元素

GitHub - joshbuchea/HEAD: 一份清单：全部能够放进head标签的元素

原文连接

译文连接

 

HEAD

能够在你文档的head标签中使用的全部内容的清单。

目录

• Recommended Minimum

• Elements

• Meta

• Link

  • Favicons

• Social

  • Facebook Open Graph

  • Facebook Instant Articles

  • Twitter Cards

  • Google+ / Schema.org

  • OEmbed

• Browsers / Platforms

  • Apple iOS

  • Apple Safari

  • Google Android

  • Google Chrome

  • Microsoft Internet Explorer

• Browsers (Chinese)

  • 360 Browser

  • QQ Mobile Browser

  • UC Mobile Browser

• App Links

• Notes

  • Performance

• Other Resources

• Related Projects

• Other Formats

• Translations

• Contributing

• Contributors

• Author

• License

推荐的最基本的

下面是一个最简单的网站须要的最基本的标签。

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 上面的三个标签 *必须* 在head标签的最前面；任何其余的标签必须在这三个标签的 *后面* -->
<title>Page Title</title>

Elements

<!-- 文档标题  -->
<title>Page Title</title>

<!-- 在文档中包含的全部相对 URL 的 Base URL -->
<base href="https://example.com/page.html">

<!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

<!-- 内部样式表 -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<!-- JavaScript -->
<script src="script.js"></script>
<noscript><!--脚本未被执行时的替代内容--></noscript>

Meta

<meta charset="utf-8"> <!-- 设置文档的字符编码 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 上面的三个标签 *必须* 在head标签的最前面；任何其余的标签必须在这三个标签的 *后面* -->

<!-- 容许控制资源从何处加载 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 尽量早的在文档中放置 -->
<!-- 仅适用于此标签后的内容 -->

<!-- Web应用程序名称（仅当网站做为应用程序时使用） -->
<meta name="application-name" content="Application Name">

<!-- 页面的简短描述（限制为150个字符） -->
<!-- 在 *部分* 状况下，这个描述被用做搜索结果中显示的片断的一部分。 -->
<meta name="description" content="A description of the page">

<!-- 控制搜索引擎的抓取和索引行为 -->
<meta name="robots" content="index,follow"><!-- All Search Engines --><!-- 全部的搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- Google Specific --><!-- 针对 Google -->

<!-- 告诉 Google 不显示 [sitelinks](!https://en.wikipedia.org/wiki/Sitelink) 搜索框 -->
<meta name="google" content="nositelinkssearchbox">

<!-- 告诉谷歌不要为这个页面提供翻译 -->
<meta name="google" content="notranslate">

<!-- Google [Search Console](!https://developers.google.cn/webmaster-tools/) 身份验证 -->
<meta name="google-site-verification" content="verification_token">

<!-- [Yandex Webmasters](!https://webmaster.yandex.com/) 身份验证 -->
<meta name="yandex-verification" content="verification_token">

<!-- [Bing Webmaster Center](!https://www.bing.com/toolbox/webmaster/) 身份验证 -->
<meta name="msvalidate.01" content="verification_token">

<!-- [Alexa Console](!http://www.alexa.com/) 身份验证 -->
<meta name="alexaVerifyID" content="verification_token">

<!-- [Pinterest Console](!https://developers.pinterest.com) 身份验证 -->
<meta name="p:domain_verify" content="code from pinterest">

<!-- [Norton Safe Web](!https://safeweb.norton.com/help/site_owners) 身份验证 -->
<meta name="norton-safeweb-site-verification" content="norton code">

<!-- 用于命名构建网站的软件 (i.e. - WordPress, Dreamweaver) -->
<meta name="generator" content="program">

<!-- 网站主题的简短描述 -->
<meta name="subject" content="your website's subject">

<!-- 基于网站内容给出通常[年龄分级](!https://en.wikipedia.org/wiki/International_Age_Rating_Coalition) -->
<meta name="rating" content="General">

<!-- 容许控制 referrer 信息如何传递 -->
<meta name="referrer" content="no-referrer">

<!-- 禁用自动检测和格式化可能的电话号码 -->
<meta name="format-detection" content="telephone=no">

<!-- 经过设置为"off"彻底关闭[ DNS 预读取](!https://developer.mozilla.org/zh-CN/docs/Controlling_DNS_prefetching) -->
<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- 在客户端浏览器上存储cookie以进行用户识别 -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">

<!-- 指定显示在特定框架中的页面 -->
<meta http-equiv="Window-Target" content="_value">

<!-- 地理标签 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<!-- 国家代码（ISO 3166-1）：强制性，州代码（ISO 3166-2）：可选；eg. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->

• Google能够识别的meta标签

• Meta扩展-WHATWG Wiki

• ICBM-维基百科

• 地理标签-维基百科

Link

<!-- 指向一个CSS样式表 -->
<link rel="stylesheet" href="https://example.com/styles.css">

<!-- 帮助解决内容重复收录 [Canonical link element](!https://en.wikipedia.org/wiki/Canonical_link_element) -->
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">

<!--  以前用于包含 icon 连接，但已被废弃再也不使用 -->
<link rel="shortlink" href="https://example.com/?p=42">

<!-- 连接到当前文档的 [AMP HTML](!https://www.ampproject.org/) 版本 -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- 连接到为web应用程序指定“安装”凭证的JSON文件 -->
<link rel="manifest" href="manifest.json">

<!-- 连接到文档的做者 -->
<link rel="author" href="humans.txt">

<!-- 连接到适用于连接上下文的版权声明 -->
<link rel="copyright" href="copyright.html">

<!-- 给出文档的另外一种语言的替代版本  [a-simple-guide-to-using-rel-alternate-hreflang-x](!https://searchenginewatch.com/sew/how-to/2232347/a-simple-guide-to-using-rel-alternate-hreflang-x) -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- 提供了关于做者或其余人的信息 -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- 描述历史记录、文件或其余资料的集合的文档的连接。 -->
<link rel="archives" href="https://example.com/archives/">

<!-- 层次结构中的顶级资源的连接 -->
<link rel="index" href="https://example.com/">

<!-- 给出一个自我参考 - 当文档有多个可能的参考时很是有用 -->
<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="prev" href="https://example.com/atomFeed.php?page=2">
<link rel="last" href="https://example.com/atomFeed.php?page=147">

<!-- 使用第三方服务维护博客时使用 -->
<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 时通知它 -->
<link rel="webmention" href="https://example.com/webmention">

<!-- 加载一个外部的 HTML 文件到当前 HTML 文件中 -->
<link rel="import" href="/path/to/component.html">

<!-- 打开搜索 -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

<!-- Feeds网络订阅 -->
<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">

<!-- 预读取，预加载，预浏览 -->
<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" href="image.png" as="image">
<!-- 更多信息: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->

Favicons

<!-- IE 10 及如下版本 -->
<!-- 将 favicon.ico 放在网站根目录中 - 不须要 link 标签 -->

<!-- IE 11, Chrome, Firefox, Safari, Opera -->
<link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png">

• 关于 Favicons (和 Touch Icons)

• Favicon 对照表

Social 社交媒体

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="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">

• Facebook Open Graph Markup

• Open Graph protocol

Facebook Instant Articles

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

<!-- 你的文章的 Web 版本的 URL -->
<link rel="canonical" href="http://example.com/article.html">

<!-- 本文使用的样式 -->
<meta property="fb:article_style" content="myarticlestyle">

• Facebook Instant Articles: Creating Articles

• Instant Articles: Format Reference

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="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

• Twitter Cards: Getting Started Guide

• Twitter Card Validator

Google+ / Schema.org

<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">

Pinterest

Pinterest 让你阻止用户从你的网站上保存东西，查看 help center。 description 是可选的

<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">

OEmbed

<link rel="alternate" type="application/json+oembed"
  href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=json"
  title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
  href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=xml"
  title="oEmbed Profile: XML">

• oEmbed format

Browsers浏览器 / Platforms平台

Apple iOS

<!-- Smart App Banner 智能 App 广告条 -->
<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">

<!-- Add to Home Screen 添加到主屏幕 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="App Title">

<!-- Touch Icons -->
<!-- 在大多数状况下，在head中一个180×180px的图标就足够了。 -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- 注意: iOS 7 的 Safari 不为图标添加效果。 -->
<!-- 旧版本 Safari 不会为后缀名为 -precomposed.png 的 icon 文件添加效果 -->

<!-- 启动画面 ( 弃用 ) -->
<link rel="apple-touch-startup-image" href="/path/to/startup.png">

<!-- 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">

• Apple Meta Tags

Apple Safari

<!-- 固定书签页 -->
<link rel="mask-icon" href="/path/to/icon.svg" color="red">

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" value="notranslate">

Google Chrome Mobile (只针对 Android)

从 Chrome 31 开始, 你能够像 Safari 同样设置你的 Web 应用为“app mode” 。

<!-- 连接到一个 manifest 并定义 manifest 的元数据。 -->
<!-- manifest.json的例子能够在下面的连接中找到。 -->
<link rel="manifest" href="manifest.json">

<!-- 将你的网页定义为 Web 应用 -->
<meta name="mobile-web-app-capable" content="yes">

<!-- 主屏幕图标  -->
<link rel="icon" sizes="192x192" href="highres-icon.png">

• Google Developer

Microsoft Internet Explorer

<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- IE10: 禁用点击时连接高亮 (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) -->
<meta name="msapplication-tap-highlight" content="no">

<!-- 固定网页 (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) -->
<meta name="application-name" content="Sample Title">
<meta name="msapplication-tooltip" content="A description of what this site does.">
<meta name="msapplication-starturl" content="http://example.com/index.html?pinned=true">
<meta name="msapplication-navbutton-color" content="#FF3300">
<meta name="msapplication-window" content="width=800;height=600">
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://example.com/path/to/file.xml">
<meta name="msapplication-TileColor" content="#FF3300">
<meta name="msapplication-TileImage" content="/path/to/tileimage.jpg">

<meta name="msapplication-config" content="http://example.com/browserconfig.xml">
<meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile;polling-uri2=http://example.com/livetile2">
<meta name="msapplication-task-separator" content="1">

App Links 应用关联

<!-- 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 Fallback  Web替代显示资源文件 -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- 更多信息: http://applinks.org/documentation/ -->

• App Links Docs

Browsers (Chinese)

360 浏览器

<!-- [按指定顺序选择渲染引擎](!http://se.360.cn/v6/help/meta.html) -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ 手机浏览器

<!-- 将屏幕锁定为指定方向 竖屏/横屏 -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 设置页面全屏显示 -->
<meta name="x5-fullscreen" content="true">
<!-- 开启网页应用模式 (全屏,etc.) -->
<meta name="x5-page-mode" content="app">

• QQ手机浏览器

UC 手机浏览器

<!-- 强制页面横屏/竖屏显示 -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 设置页面全屏显示 -->
<meta name="full-screen" content="yes">
<!-- 即便是无图模式UC浏览器仍会显示图片 -->
<meta name="imagemode" content="force">
<!-- 调用应用模式(全屏,禁止手势, etc.) -->
<meta name="browsermode" content="application">
<!-- 禁用 UC浏览器的夜间模式 -->
<meta name="nightmode" content="disable">
<!-- 简化页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快 -->
<meta name="layoutmode" content="fitscreen">
<!-- 禁用UC浏览器的特性:“当页面文字多时，放大字体”。 -->
<meta name="wap-font-scale" content="no">

• UC浏览器文档
• 最新版UC浏览器文档

注释

性能

Moving the href attribute to the beginning of an element improves compression when GZIP is enabled, because the href attribute is used in a, base and link tags. 当启用 GZIP 时，将 href 属性移动到元素的开始能够提升压缩，由于 href 属性 在 a, base and link 标签中使用。

例子:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

其它资源

• HTML5 Boilerplate Docs: The HTML

• HTML5 Boilerplate Docs: Extend and customize

相关项目

• Atom HTML Head Snippets - Atom package for HEAD snippets

• Sublime Text HTML Head Snippets - Sublime Text package for HEAD snippets

• head-it - CLI interface for HEAD snippets

• vue-head - Manipulating the meta information of the HEAD tag for Vue.js

版权声明

本译文仅用于学习、研究和交流目的，欢迎非商业转载。转载请注明出处、译者和众成翻译的完整连接。要获取包含以上信息的本文Markdown源文本，请 点击这里。