HTML meta 元标签实用指南
JyLie 2016-07-29 HTMLmeta
在 <!DOCTYPE html> HTML5 标准声明下，使用 HTML5 doctype，不区分大小写。
# meta 标签
元素可提供有关页面的元信息。设置得当还能大大提高 seo 推广。
meta 元数据分类：
name: 如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。http-equiv: 如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。charset: 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。itemprop: 如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。
# meta 类型 name
语法结构：<meta name="" content="" />
name属性提供的是文档级别（document-level）的元数据，应用于整个页面。
🌰 举个栗子：
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符" />
<!-- 页面关键词 -->
<meta name="keywords" content="" />
<!-- 网页作者 -->
<meta name="author" content="JyLie" />
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow" />
<!-- 忽略数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no" />
<!-- 忽略邮箱地址的识别 -->
<meta name="format-detection" content="email=no" />
<!-- 忽略电话/邮箱简写 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!--H5页面窗口自动调整到设备宽度，并禁止用户缩放页面-->
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
<!-- 识别为 chrome 内核 -->
<meta name="renderer" content="webkit" />
<!--iphoneX的齐刘海-->
<!-- 1.meta 设置可伸缩 -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"
/>
<style>
/* 2-1.若全部body元素增加样式 */
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
/* 2-2.若局部组件有fixed底部的元素，也增加上面样式 */
.component {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: #fff; /* 记得添加background-color，不然会出现透明镂空的情况 */
}
</style>
<!-- iphoneX的齐刘海 end -->
<!--IOS启用 WebApp 全屏模式-->
<!--当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）-->
<meta name="apple-touch-fullscreen" content="yes" />
<!-- start -->
<!-- 只有生效时： safari 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏,听说在IOS7以上版本就没效果了 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 则生效：可选default、black、black-translucent 但是我都是用black-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- end -->
<!-- IOS添加到主屏后的标题（IOS 6 新增） -->
<meta name="apple-mobile-web-app-title" content="标题" />
<!-- 添加智能App 广告条 Smart App Banner（IOS 6+ Safari） -->
<meta name=apple-itunes-app content=app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL>
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app" />
<!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes" />
<!-- UC应用模式 -->
<meta name="browsermode" content="application" />
<!--windows phone 点击无高光 设置页面不缓存 ，去掉后a、input标签被点击时产生的半透明灰色背景-->
<meta name="msapplication-tap-highlight" content="no" />
<!-- windows phone 的老式浏览器 -->
<meta name="MobileOptimized" content="320″" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true" />
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
71
72
73
74
75
76
77
78
79
80
81
82
83
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
71
72
73
74
75
76
77
78
79
80
81
82
83
# meta 类型 http-equiv
语法结构：<meta http-equiv="" content="" />
http-equiv属性顾名思义，相当于 http 的文件头作用，它可以向服务器请求头回传一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为 content，content 中的内容其实就是各个参数的变量值。
🌰 举个栗子：
<!--优先使用最新版本 IE 和 Chrome-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--百度禁止转码-->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 设置不缓存页面：设定禁止浏览器从本地机的缓存中调阅页面内容 -->
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<!-- 设置不缓存页面：设定网页的到期时间，页面过期后会重新到服务器拉取数据。 -->
<meta http-equiv="expires" content="0" />
<!-- 若设置指定时间，则必须使用GMT的时间格式。 -->
<meta http-equiv="expires" content="Tue,10 May 2022 11:50:11 GMT" />
<!-- 设置页面过期时间，页面过期后cookie被删除。且必须使用GMT的时间格式 -->
<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday,Jun-2007 22:33:00 GMT;path=/" />
<!-- 强制页面在当前窗口以独立页面显示，用来防止别人在框架里调用自己的页面 -->
<meta http-equiv="Window-target" content="_top" />
<!-- 设定页面使用的字符集 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<!-- 给搜索引擎用设置关键字 -->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<!-- 给搜索引擎用设置页面描述 -->
<meta http-equiv="description" content="page description......" />
<!-- 设置2秒后自动刷新并指向新页面，且不可返回上级页面 -->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com/" />
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
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
# 页面过度效果
在在 IE5.5 及以上版本的浏览器中使用。
默认情况下都已经启用了，如果需要手动启用则只需在 Internet 选项中： Advanced（高级）- Browsing（浏览）- Enable page transitions（启用页面过渡）即可。
http-equiv可设置页面过度效果状态为：
- Page-Enter : 进入页面
- Page-Exit : 离开页面
- Site-Enter : 进入网站
- Site-Exit : 离开网站
content需要设置两个属性表示分别表示：
Duration: 过渡速度，单位秒Transition: 可选项。整数值(Integer)。设置或检索转换所使用的方式，具体数值介绍:0: 矩形收缩转换。1: 矩形扩张转换。2: 圆形收缩转换。3: 圆形扩张转换。4: 向上擦除。5: 向下擦除。6: 向右擦除。7: 向左擦除。8: 纵向百叶窗转换。9: 横向百叶窗转换。10: 国际象棋棋盘横向转换。11: 国际象棋棋盘纵向转换。12: 随机杂点干扰转换。13: 左右关门效果转换。14: 左右开门效果转换。15: 上下关门效果转换。16: 上下开门效果转换。17: 从右上角到左下角的锯齿边覆盖效果转换。18: 从右下角到左上角的锯齿边覆盖效果转换。19: 从左上角到右下角的锯齿边覆盖效果转换。20: 从左下角到右上角的锯齿边覆盖效果转换。21: 随机横线条转换。22: 随机竖线条转换。23: 随机使用上面可能的值转换。
🌰 以过渡速度为 2 秒，举个栗子（Edge 和 Chrome 最新版本好像不支持这个效果）：
<!-- 混合 (淡入淡出) -->
<meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)" />
<!-- 盒状收缩 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=0)" />
<!-- 盒状展开 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=1)" />
<!-- 圆形收缩 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=2)" />
<!-- 圆形放射 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=3)" />
<!-- 向上擦除 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=4)" />
<!-- 向下擦除 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=5)" />
<!-- 向右擦除 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=6)" />
<!-- 向左擦除 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=7)" />
<!-- 垂直遮蔽 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=8)" />
<!-- 水平遮蔽 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=9)" />
<!-- 横向棋盘式 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=10)" />
<!-- 纵向棋盘式 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=11)" />
<!-- 随机溶解 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)" />
<!-- 左右向中央缩进 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=13)" />
<!-- 中央向左右扩展 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=14)" />
<!-- 上下向中央缩进 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=15)" />
<!-- 中央向上下扩展 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=16)" />
<!-- 从左下抽出 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=17)" />
<!-- 从左上抽出 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=18)" />
<!-- 从右下抽出 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=19)" />
<!-- 从右上抽出 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=20)" />
<!-- 随机水平线条 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=21)" />
<!-- 随机垂直线条 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=22)" />
<!-- 随机 -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=23)" />
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
71
72
73
74
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
71
72
73
74
🌰IE 过渡效果（其他效果百度），举个栗子:
<!-- Blinds（百叶窗） -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)" />
<!-- GradientWipe（渐变扫除） -->
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)" />
1
2
3
4
5
2
3
4
5
# meta 类型 charset
语法结构：<meta charset="" />
<!-- 声明文档使用的utf-8字符编码 -->
<meta charset="utf-8" />
1
2
2
# meta 类型 itemprop
语法结构：<meta itemprop="" />
# 内核识别
# QQ 浏览器
文献文档QQ 浏览器-元素检测
- 识别为 chrome 内核
<!-- 识别为 chrome 内核，下面3个meta中任选一个，即可正确识别 -->
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
1
2
3
4
2
3
4
- 识别为 IE 内核
<!-- 识别为 IE 内核，下面3个meta中任选一个，即可正确识别 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="renderer" content="ie-comp" />
<meta name="renderer" content="ie-stand" />
1
2
3
4
2
3
4