meta 标签作用

meta 标签用来描述一个 html 网页文档的属性，如作者、日期和时间、网页描述、关键词、页面刷新等。

meta 标签有下面的作用：

  1. 声明页面使用语言；
  2. 针对搜索引擎的描述和关键词；
  3. 自动刷新；
  4. 实现网页转换时的动态效果；
  5. 控制页面缓存；
  6. 网页定级；
  7. 控制网页显示的窗口；

meta 标签组成

meta 标签可分为两大部分：http-equiv 和 name 变量。

http-equiv 语法格式：

1
<meta http-equiv="参数名" content="具体的参数值" />

name 语法格式：

1
<meta name="参数名" content="具体的参数值" />

例：

1
2
3
4
<!-- 声明文档使用的字符编码 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!-- 页面关键词设置 -->
<meta name="keywords" content="关键词"/>

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
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8' />
或 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- 网页内容描述 -->
<meta name="description" content="描述..." />

<!-- 网页关键词 -->
<meta name="keywords" content="关键词1,关键词2,..." />

<!-- 网页作者 -->
<meta name="author" content="yourname, email@foxmail.com" />

<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<!-- 自适应屏幕宽度； 常见于响应式|移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

<!-- 搜索引擎抓取设置 值：all|none|index|noindex|follow|nofollow, 默认all -->
<meta name="robots" content="index,follow" />

<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit" />

<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no" />

<!-- 设置页面过期时间 注：必须使用GMT的时间格式 -->
<meta http-equiv="Expires" content="31 Dec 2018" />

<!-- 自动刷新；每3秒刷新一次页面 -->
<meta http-equiv="Refresh" content="3" />

<!-- 停留 3 秒钟后自动跳转到URL -->
<meta http-equiv="Refresh" content="3;URL=https://www.baidu.com" />

<!-- 禁止浏览器从本地计算机的缓存中访问页面内容 -->
<meta http-equiv="cache-control" content="no-cache">

<!-- cookie 设定；如果网页过期，那么自动删除本地 cookie 注：必须使用GMT的时间格式 -->
<meta http-equiv="set-cookie" content="Mon,12 May 2018 00:20:00 GMT" />

<!-- 手Q分享通用接口 -->
<meta itemprop="name" content="这是分享的标题"/>
<meta itemprop="image" content="logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />

<!-- Open Graph Protocol（富媒体对象）-->
<meta content='https://jonas-song.github.io/' property='og:url'>
<meta content='标题' property='og:title'>
<meta content='图片' property='og:image'>
<meta content='名称' property='og:site_name'>
<meta content='描述' property='og:description'>
想了解更多的 Open Graph Protocol 可查看 facebook head.

总结

简单整理了平时开发会用到的一些 meta 标签，像charset、description、keywords、X-UA-Compatible 比较常见，这里有些属性参数没有详细描述，点击 HTML meta 标签查看更多设置。

注：

  1. 所有浏览器都支持 meta 标签；
  2. meta 标签必须被正确地关闭。