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源文本，请点击这里。