meta标签使用手册
一、meta标签的含义
<meta>是HTML中很常用的标签之一，通常用于描述一些与当前HTML页面有关的元信息。
这里我们先要理解一下什么是元信息。所谓元信息，就是用来描述信息的信息。比如我们通过http发送了一个请求，那么请求主体就是我们的主体信息。而用于描述该信息的那些状态参数，如编码格式、超时时间、消息长度等，就是描述信息用的信息，它们就被称为元信息。
对于一个HTML文档而言也是一样的。用于描述文档的编码格式、关键字、作者等内容的信息，就被称为该文档的元信息，它们由meta标签所定义。元信息不参与渲染，只是一些描述信息。
与元信息对应的是流信息（也就流数据），它是实际需要渲染的网页元素，如body、div、p等元素。在HTML5中，meta标签还可以添加itemprop属性，用于描述用户的某些流内容，此时，它与所描述的流内容一样，也成了流内容。如：
<p itemscope>
<span>
马云<meta itemprop content="阿里巴巴前董事长">
</span>
</p>
这里的meta标签现在是文档内容的一部分了（这样的数据在HTML5中称为微数据），它不再是元数据，而是流数据。
关于这类用法，本文不会详解，感兴趣的可自行查阅。下面我们就看一下作为元数据使用的<meta>标签支持哪些属性。
二、meta使用说明
meta标签总共支持4个全局属性：charset、http-equiv、name和content。
1. charset
charset用于定义文档的编码格式，常见的格式有utf-8、gbk等，如：
<meta charset="utf-8">
中文网页一般多使用utf-8的编码格式。网页的编码格式还有另一种写法：
<meta http-equiv="content-type" content="text/html; charset=utf-8">
这是HTTP4.01常见的写法，在HTML5中仍然被支持。
2. http-equiv
在HTML4中，http-equiv支持很多值，它们每个值都对应http响应头的一个字段。服务端会用http-equiv的值来设置响应头（equiv全写是equivalent，含义为“等价”，意指该参数可以等价转化为http响应头字段）。
http-equiv需要结合content属性来使用，以定义一个响应头字段的值。不过在HTML5中，已经不再用这个字段来描述响应头，它所支持的值也缩减为5个（鉴于目前浏览器仍然支持HTML4，因此像expires、cache-control这样被HTML5舍弃的值仍然是有效的）。它的基本语法如下：
<meta http-equiv="" content="">
HTML5的http-equiv包含以下几个值：
- content-security-policy，定义文档的内容安全策略。
- content-type，定义文档类型，其值必须是"text/html; charset=utf-8"。
- default-style，设置默认CSS样式表组的名称。
- x-ua-compatible，兼容性声明，指定所用浏览器的内核，规范要求此时content的值必须包含"IE=edge"。
- refresh，定义文档的自动刷新策略。
(1). content-security-policy
定义文档的的内容安全策略，主要目的是抵御XSS（cross-site scripting attacks，跨站点脚本攻击）。
此时content的值是用分号隔开的一组需要启用的安全策略及对应的值，如：
<meta http-equiv="content-security-policy"
content="frame-src https://xxx.xxx.xxx; script-src https://xxx.xxx.xxx">
这里的content定义了两个安全策略：frame-src和script-src，它们分别定义的是iframe（frame）和script的域地址，如果对应的资源不是来自指定的域，浏览器就会抛出错误，禁止加载这些资源，这样可以有效防止跨站点攻击。
标准定义了约三十个安全策略选项，这里不再一一详述，感兴趣的请参阅mdn开发者文档：Content-Security-Policy。
(2). content-type
在HTML5中被<meta charset='utf-8'>所取代，并且mdn开发者文档中指出，在使用该属性时，对应的值必须是"text/html; charset=utf-8"。
(3). default-style
规定要使用的预定义的样式表。它的值必须与某个link或style标签的title一致，以指定该样式表作为当前文档的默认样式表。如：
<meta http-equiv="default-style" content="preferred stylesheet">
<link href='' rel='stylesheet' title='preferred stylesheet'>
(4). x-ua-compatible
指定浏览器所要启用的内核版本。
国内很多浏览器都有多个内核，比如360浏览器的极速模式使用的是谷歌内核，而兼容模式则使用IE内核，另外在兼容模式下，也可以设定不同的IE版本。
下面的标签要求在两种模式下分别启用谷歌和IE的最新版本：
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
(5). refresh
定义页面的刷新策略。
如果对应的content是一个整数，那么页面会在指定的时间间隔（秒）后重新加载；如果content的值是整数后面跟了;url=xxx，并且这个url是个合法的值，那么浏览器会在指定的秒数后跳转到该地址。如：
<!--页面会在20秒后刷新-->
<meta http-equiv="refresh" content="20">
<!--页面会在20秒后跳转到百度-->
<meta http-equiv="refresh" content="20;url=https://www.baidu.com">
3. name
同http-equiv一样，name也需要配合content属性一起使用。与http-equiv不同的是，由name描述的属性与响应头的字段没有对应关系，它们更多的是描述文档本身。
name的常见取值包括：
- application-name，定义正运行在该网页上的网络应用名称。
- author，文档的作者，可以用自由的格式去定义。
- description，定义页面内容的简短和精确的描述，某些浏览器（如Firefox和Opera）会将其作为书签页的默认描述。
- generator，生成页面的软件的标识符。
- keywords，由逗号分隔的页面内容相关的关键词。
- referrer ，控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容。
- creator，文档的创建人。
- googlebot，谷歌专用的爬虫字段。
- publisher，文档的发布人。
- robots ，定义搜索引擎或抓取工具的行为。
- slurp，雅虎专用的抓取工具行为定义。
- viewport，定义移动端的初始视口大小。
注意，标准没有严格限制name必须取上述值，你可以用它来描述任何你想描述的元信息，比如：
<!-- 一下引自百度 -->
<meta name="theme-color" content="#2932e1">
<meta name="baidu-site-verification" content="15CGsqM7Xb">
<!-- 以下引自淘宝官网 -->
<meta name="spm-id" content="a21bo">
<meta name="aplus-xplug" content="NONE">
(1). application-name
定义的是当前应用的名称，一般用于帮助浏览器区分不同的网络应用。不同于title，这个属性的值对用户不可见。简单的应用不应该使用这个属性。
(2). author、creator、publisher
分别是当前文档的作者、创建人和发布人，在使用这三个值时，你可以定义多个meta，如：
<meta creator="张三">
<meta creator="李四">
(3). generator
指明了生成当前页面的软件的标识符，目前暂未用到过，不做详述。
(4). keywords
定义一组与当前网页相关的关键词，主要用于SEO（搜索引擎优化）。它的格式如下：
<meta name="keywords" content="关键词1, 关键词2">
(5). referrer
控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容。它对应的content值应该是下表中的一个，用于定义不同的行为（表格来自mdn）：
| content值 | 作用 |
|---|---|
| no-referrer | 不要发送 HTTP Referer 首部 |
| origin | 发送当前文档的 origin |
| no-referrer-when-downgrade | 当目的地是安全的（https->https），则发送origin作为referrer；如果目的地不安全（https->http），则不发送referrer。这是默认行为。 |
| origin-when-crossorigin | 在同源请求下，发送完整的URL (不含查询参数) 作为referrer；否则仅发送当前文档的 origin作为referrer |
| unsafe-URL | 在同源请求下，发送完整的URL (不含查询参数)作为referrer；跨域时不发送 |
(6). robots
该参数定义的是搜索引擎或抓取工具的行为，此时content的应是下列的值（多个值用逗号隔开）：
| 值 | 说明 | 浏览器支持性 |
|---|---|---|
| index | 允许搜索引擎对当前页面建立索引 | ALL |
| noindex | 禁止搜索引擎对当前页面建立索引 | ALL |
| follow | 允许搜索引擎爬取当前页面的链接对应的其他页面。比如某个站点的首页包含多个链接，可以链接到站点内的其他页面，这时引擎在爬取首页时，会继续爬取首页指向的那些页面 | ALL |
| nofollow | 禁止搜索引擎爬取页面内的链接页面 | ALL |
| noodp | 禁止使用开放式目录（Open Directory Project，详见百度百科 - 开放式目录） | Google, Yahoo, Bing |
| noarchive | 禁止搜索引擎缓存当前页面的内容 | Google, Yahoo |
| nosnippet | 禁止搜索引擎在搜索结果页面中保留任何描述 | |
| noimageindex | 禁止搜索引擎将当前页面作为索引图像的引用页 | |
| noydir | 禁止使用雅虎目录，雅虎目录是开放式目录的前驱 | Yahoo |
| nocache | 等价于noarchive，仅用于Bing | Bing |
如希望搜索引擎爬取当前页内包含的链接页面，但不对当前页建立索引：
<meta name="robots" content="noindex, follow">
slurp与robots含义是相同的，但仅用于Slurp – Yahoo Search的抓取工具。
(7). viewport
它提供有关视口初始大小的提示，仅供移动设备使用。此时content的可选值包括：
| 选项 | 值 | 描述 |
|---|---|---|
| width | 一个正整数或特殊的字符串‘device-width’ | 值为正整数时，是以像素(px)为单位的页面初始宽度；当为’device-width’时，表示页面初始宽度为设备宽度 |
| height | 一个正整数或者字符串 device-height | 同上，定义页面初始高度 |
| initial-scale | 一个介于0.0到1.0的正数 | 定义设备宽度与视口宽度的百分比，即视口的缩放比例 |
| maximum-scale | 一个0.0到10.0的正数 | 定义缩放的最大值，当达到这个比值时，用户无法继续放大 |
| minimum-scale | 一个0.0到10.0的正数 | 定义缩放的最小值，当达到这个比值时，用户无法继续缩小。minimum-scale必须小于maximum-scale，否则可能造成无法预知的异常 |
| user-scalable | yes或no | 是否允许用户缩放页面，默认为yes |
以下是一个移动设备常用的值：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
表示初始等于设备宽度，不缩放。
viewport的规范程度虽然不高，但大多数移动浏览器都尊重这一声明，因此具有实际上的统治地位。
4. content
content需要结合http-equiv或name属性使用，上面已经介绍了其用法，这里不再赘述。
总结
meta标签设计的主要目的是让机器（如搜索引擎）更好地理解网页。随着SEO（搜索引擎优化）的盛行，meta的使用也变得越来越重要。此外，HTML5也使用meta描述页面的微数据，meta的价值进一步提高。