【资料总结】 head 速查表Pinterest 能阻止用户从你的网站中保存内容, 阻止提示可自定义。 Chrome 3

译者：sea_ljf

内容索引

基础标签
Elements
meta标签
不推荐使用的meta标签
link标签
网站图标
社交分享相关
Facebook Open Graph 分享协议
Facebook Instant Articles 平台分享协议
Twitter Cards 分享协议
Google+ / Schema.org
OEmbed
浏览器或平台相关
iOS 相关
Safari 相关
安卓相关
Chrome 相关
IE 相关
App Links 协议
中国浏览器相关
360
QQ
UC
小窍门
性能
其他资料
相关项目

基础标签

对于一个页面来说，（在<head>内）最起码要有以下标签：

<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标签的属性必须在最开始的位置设置，其他的标签只能设置在它们之下 -->
<title>Page Title</title>

Elements

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

<!-- 此标签为页面上的所有链接规定默认地址或默认目标 -->
<base href=""https://example.com/page.html"">

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

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

<!-- JavaScript -->
`<script src=""script.js"">`</script>
<noscript><!--no JS alternative--></noscript>

meta标签

<meta charset=""utf-8""> <!-- set character encoding for the document -->
<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标签的属性必须在最开始的位置设置，其他的标签只能设置在它们之下 -->

<!-- 控制资源的加载来源 防止XSS-->
<meta http-equiv=""Content-Security-Policy"" content=""default-src 'self'"">
<!-- 在文档中越前面使用这个属性越好 -->
<!-- 这个meta标签下面的资源才能被控制来源-->

<!-- 应用的名字（该属性只应该使用在网页作为app使用的情况下） -->
<meta name=""application-name"" content=""Application Name"">

<!-- 该页面的简短简述（最多150个词） -->
<!-- 某些情况下，description的内容片段会作为搜索内容呈现 -->
<meta name=""description"" content=""A description of the page"">

<!-- 控制搜索引擎爬虫的行为 -->
<meta name=""robots"" content=""index,follow,noodp""><!-- 所有引擎 -->
<meta name=""googlebot"" content=""index,follow""><!-- Google 专用 -->

<!-- 让 Google 在搜索结果中不要显示站内链接 -->
<meta name=""google"" content=""nositelinkssearchbox"">

<!-- 让 Google 不要提供内容翻译 -->
<meta name=""google"" content=""notranslate"">

<!-- 为 Google 提供网站所有者的凭证 -->
<meta name=""google-site-verification"" content=""verification_token"">

<!-- 用于标记网站的构建工具 (例如. - WordPress, Dreamweaver) -->
<meta name=""generator"" content=""program"">

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

<!-- 告诉爬虫该页面在全站中的比重 -->
<meta name=""rating"" content=""General"">

<!-- 控制发送给服务器的referrer -->
<meta name=""referrer"" content=""no-referrer"">

<!-- Disable automatic detection and formatting of possible phone numbers -->
<!-- 不允许格式侦测电话号码 -->
<meta name=""format-detection"" content=""telephone=no"">

<!-- 不允许DNS预取 -->
<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"">

<!-- Geo 标签 -->
<meta name=""ICBM"" content=""latitude, longitude"">
<meta name=""geo.position"" content=""latitude;longitude"">
<meta name=""geo.region"" content=""country[-state]""><!-- 国家代码 (ISO 3166-1): mandatory, 区域代码 (ISO 3166-2): 可选; 例如： content=""US"" / content=""US-NY"" -->
<meta name=""geo.placename"" content=""city/town""><!-- 例如： content=""New York City"" -->

不推荐使用的meta标签

以下meta标签属性，由于使用率较低或已经过时等原因，不推荐使用：

<!-- Google 忽略 & Bing 认为这是垃圾邮件的标识 -->
<meta name=""keywords"" content=""your,keywords,here,comma,separated,no,spaces"">
<!-- 对现在搜索引擎毫无帮助 -->
<meta name=""revised"" content=""Sunday, July 18th, 2010, 5:15 pm"">

<!-- 容易成为垃圾邮件发送的目标 -->
<meta name=""reply-to"" content=""email@example.com"">

<!-- 更好的实践是使用 <link rel=""author""> 或者 humans.txt 文件 -->
<meta name=""author"" content=""name, email@example.com"">
<meta name=""designer"" content="""">
<meta name=""owner"" content="""">

<!-- 告诉爬虫多久间隔多久再来爬一次。但由于现在搜索引擎的爬虫不定时地再来爬取这个页面，所以并没有用。 -->
<meta name=""revisit-after"" content=""7 days"">

<!-- 间隔一段时间后，跳转到另外一个 URL -->
<!-- W3C 不建议使用这个属性. Google 建议使用301跳转取代它 -->
<meta http-equiv=""refresh"" content=""300; url=https://example.com/"">

<!-- 描述这个网站的话题 -->
<meta name=""topic"" content="""">

<!-- 对公司或者网站建立目的的简介 -->
<meta name=""summary"" content="""">

<!-- 过时的属性，和现在的 keywords 属性一样的效果 -->
<meta name=""classification"" content=""business"">

<!-- 和 URL 产生一样的效果, （浏览器）不再支持 -->
<meta name=""identifier-URL"" content=""https://example.com/"">

<!-- 与 keywords 属性一样的功能 -->
<meta name=""category"" content="""">

<!-- 确保你的网站在任何国家与语言中都能显示 -->
<meta name=""coverage"" content=""Worldwide"">

<!-- 与 coverage 属性效果一致 -->
<meta name=""distribution"" content=""Global"">

<!-- 控制用户访问权限 -->
<meta http-equiv=""Pics-label"" content=""value"">

<!-- 缓存控制 -->
<!-- 最佳实践实在服务器端返回响应头 -->
<meta http-equiv=""Expires"" content=""0"">
<meta http-equiv=""Pragma"" content=""no-cache"">
<meta http-equiv=""Cache-Control"" content=""no-cache"">

Link标签

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

<!-- 阻止相同的内容被搜索引擎重复收录 -->
<link rel=""canonical"" href=""https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"">

<!-- 短网址, 但这是过时的（属性），不再被使用 -->
<link rel=""shortlink"" href=""https://example.com/?p=42"">

<!-- 关联到正确的 AMP HTML 版本-->
<link rel=""amphtml"" href=""https://example.com/path/to/amp-version.html"">

<!-- 使用manifest缓存 -->
<link rel=""manifest"" href=""manifest.json"">

<!-- 链接到作者的 humans.txt -->
<link rel=""author"" href=""humans.txt"">

<!-- 链接到当前文档的版权或隐私页面 -->
<link rel=""copyright"" href=""copyright.html"">

<!-- 当用户端使用其他语言时，链接到一个备选的源 -->
<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"">

<!-- 指向 pingback 服务器的 URL，即其他人引用你内容时会被通知的地址 -->
<link rel=""pingback"" href=""https://example.com/xmlrpc.php"">

<!-- 但你引用在网站中引用某篇文章的地址，对方会得到通知 -->
<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"">

<!-- 链接到一个备选的源 -->
<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/ -->

网站图标

<!-- IE10 或更低版本的 IE -->
<!-- 将 favicon.ico 放在根目录中 - 不需要标签 -->

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

社交分享相关

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 文档: https://developers.facebook.com/docs/sharing/webmasters#markup -->
<!-- Open Graph 分享协议: http://ogp.me/ -->

Facebook Instant Articles 平台分享协议

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

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

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"">
<!-- 更多信息: https://dev.twitter.com/cards/getting-started -->
<!-- 验证参考: https://dev.twitter.com/docs/cards/validation/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 能阻止用户从你的网站中保存内容, 阻止提示可自定义。

<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 格式

浏览器或平台相关

iOS 相关

<!-- 告诉iphone的safari浏览器，这个网站对应的app是什么，然后在页面上面显示一个下载banner -->
<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"">

<!-- 控制栏状态或样式相关 -->
<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 -->
<link rel=""apple-touch-icon"" href=""/path/to/apple-touch-icon.png"">
<link rel=""apple-touch-icon-precomposed"" href=""/path/to/apple-touch-icon-precomposed.png"">
<!-- iOS 8+ 不再支持 precomposed, 只有 apple-touch-icon 是必须的 -->

<!-- 多数情况下，一张大小为 180×180px 的图片作为 touch icon 已经足够了-->
<!-- 也可以使用不同的尺寸的图标 -->
<!-- 由 device 决定 -->
<link rel=""apple-touch-icon"" sizes=""57x57"" href=""/path/to/icon@57.png"">
<link rel=""apple-touch-icon"" sizes=""72x72"" href=""/path/to/icon@72.png"">
<link rel=""apple-touch-icon"" sizes=""114x114"" href=""/path/to/icon@114.png"">
<link rel=""apple-touch-icon"" sizes=""144x144"" href=""/path/to/icon@144.png"">

<!-- 启动图片 ( 已经过时 ) -->
<link rel=""apple-touch-startup-image"" href=""/path/to/startup.png"">

<!-- iOS app deep linking -->
<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"">

苹果相关的 meta 标签

Safari 相关

<!-- 网站图标 -->
<link rel=""mask-icon"" href=""/path/to/icon.svg"" color=""red"">

安卓相关

<meta name=""theme-color"" content=""#E64545"">

<!-- 控制状态栏 -->
<meta name=""mobile-web-app-capable"" content=""yes"">
<!-- 更多讯息: https://developer.chrome.com/multidevice/android/installtohomescreen -->

<!-- Android app deep linking -->
<meta name=""google-play-app"" content=""app-id=package-name"">
<link rel=""alternate"" href=""android-app://package-name/http/url-sample.com"">

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一样设定网站应用为 “app mode” 。

<!-- 关联一个 manifest 文件 -->
<!-- 作为例子的 manifest.json 可以在下方找到链接 -->
<link rel=""manifest"" href=""manifest.json"">

<!-- 定义你的网页为一个 web app -->
<meta name=""mobile-web-app-capable"" content=""yes"">

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

Google 开发者

IE 相关

<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 Link

<!-- 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"">
<!-- 回退 -->
<meta property=""al:web:url"" content=""http://applinks.org/documentation"">
<!-- 过多信息: http://applinks.org/documentation/ -->

App Links 文档

中国浏览器相关

360

<!-- 选择渲染引擎 -->
<meta name=""renderer"" content=""webkit|ie-comp|ie-stand"">

QQ

<!-- 锁定屏幕旋转方向 -->
<meta name=""x5-orientation"" content=""landscape/portrait"">
<!-- 全屏显示 -->
<meta name=""x5-fullscreen"" content=""true"">
<!-- 页面会以应用模式显示 -->
<meta name=""x5-page-mode"" content=""app"">

UC

<!-- 锁定屏幕旋转方向 -->
<meta name=""screen-orientation"" content=""landscape/portrait"">
<!-- 全屏显示 -->
<meta name=""full-screen"" content=""yes"">
<!-- 即使在文字模式， UC 浏览器也会显示图片 -->
<meta name=""imagemode"" content=""force"">
<!-- 页面会以应用模式显示 -->
<meta name=""browsermode"" content=""application"">
<!-- 禁止使用夜间模式 -->
<meta name=""nightmode"" content=""disable"">
<!-- 简化页面，使其可通过更少的数据加载 -->
<meta name=""layoutmode"" content=""fitscreen"">
<!-- 禁止浏览器的多词情况下放大字体的特性 -->
<meta name=""wap-font-scale"" content=""no"">

UC Browser 文档

小窍门

性能

当使用 GZIP 压缩时，将 href 属性移至最前可提供压缩比率，这是由于 href 属性会用于 a, base 和 link 标签。

例如:

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

其他资源

【资料总结】 head 速查表