head 速查表

发表于 | 分类于

原文链接：http://gethead.info/

日常翻译系列，正好也归纳总结一下head标签内各种标签的用法。

基础标签

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

1
2
3
4
5
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 标题 -->
<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标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<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标签属性，由于使用率较低或已经过时等原因，不推荐使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!-- 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标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!-- 引入一个 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/ -->

网站图标

1
2
3
4
5
6
7
<!-- 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 分享协议

1
2
3
4
5
6
7
8
9
10
11
<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 平台分享协议

1
2
3
4
5
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

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

Twitter Cards 分享协议

1
2
3
4
5
6
7
8
9
<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

1
2
3
4
<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 能阻止用户从你的网站中保存内容, 阻止提示可自定义。

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

OEmbed

1
2
3
4
5
6
<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">

浏览器或平台 相关

iOS 相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- 告诉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">

Safari 相关

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

安卓相关

1
2
3
4
5
6
7
8
9
<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 相关

1
2
3
4
<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” 。

1
2
3
4
5
6
7
8
9
<!-- 关联一个 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">

IE 相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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">
1
2
3
4
5
6
7
8
9
10
11
<!-- 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/ -->

中国浏览器相关

360

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

QQ

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

UC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 锁定屏幕旋转方向 -->
<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">

小窍门

性能

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

例如:

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

其他资源

相关项目