什么是meta标签?

HTML语言HEAD区的一个辅助性标签，我们通常都在HEAD区域编写一些meta(注意：meta只能写在HEAD区域)，用来提供关于HTML文档的元数据（meta-information），元数据不会显示在页面上，但是对于浏览器是可读取渲染的。它可用于浏览器如何显示内容或重新加载页面，页面SEO优化（关键词和页面描述）等...

meta标签的属性

页面中常用的meat标签总结

一、http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

字符编码：声明文档使用的字符编码

该声明用来指定文档的编码，除了UTF-8(国际通用语言编码,也是最常使用的)，可选值还有：GB2312(简体中文)、BIG5(繁体中文)、iso-2022-jp(日文)、ks_c_5601(韩文)、ISO-8859-1(英文)等

     <meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1"/>

当然，你可能还见过使用以下这种方式来定义文档字符编码。相对于这种方式，更推荐你使用第1种（推荐使用HTML5的声明方式）。

     <meta http-equiv="content-type" content="text/html; charset=utf-8;"/>

Expires（期限）

该声明用来指定页面的过期时间，一旦网页过期，从服务器上重新请求，其中时间必须使用GMT格式，或者直接是0（即不缓存）

     <meta http-equiv="expires" content="Thu Jan 01 1970 00:00:00 GMT 或者 0"/>

Pragma(cache模式）

禁止浏览器从本地计算机的缓存中访问页面内容。

     <meta http-equiv="pragma" content="no-cache"/>     <meta http-equiv="cache-control" content="no-cache"/>

Refresh（刷新）

该声明用来指定页面自刷新或者跳转到其它页面，其中的时间单位是s。第一种写法是10s后刷新本页面，第二种写法是10s后跳转到新的页面。

     <meta http-equiv="refresh" content="10"/>     <meta http-equiv="refresh" content="10; url=..."/>

Set-Cookie(cookie设定）

如果网页过期，那么存盘的cookie将被删除。

     <meta http-equiv="set-cookie" content="[cookie名字]=[cookie值]; expires=[cookie过期时间];path=/;"/>

Window-target（显示窗口的设定）

强制页面在当前窗口以独立页面显示。用来防止别人在框架里调用自己的页面。

     <meta http-equiv="window-target" content="_top"/>

声明使用的浏览器及版本

x-ua-compatible设置是从IE8开始增加的（很明显，只适用于IE），对于过往的版本无法识别。开发者可以通过设置x-ua-compatible来指定渲染引擎的类型和版本，并且因为需求不同可以有多种不同的设置。

     <meta http-equiv="x-ua-compatible" content="IE=7"/>     <meta http-equiv="x-ua-compatible" content="IE=4"/>     <meta http-equiv="x-ua-compatible" content="IE=50"/>

当直接指定content为IE的某个具体版本，如上述代码第1条，客户端的IE将会使用IE7.0标准模式对页面进行渲染，并忽略Doctype定义。当指定的IE版本在客户端IE中不存在时，IE将会尝试将该值转换为最为接近的版本。例如指定一个低于5.0的IE版本，如上述代码第2条，客户端的IE将会使用IE5.0对页面进行渲染，由于IE5.0并没有标准模式，所以将会直接使用quirks mode来渲染；如果指定一个大于客户端IE的版本，如上述代码第3条，假定客户端IE的最高版本为9.0，那么IE会将该值转换为IE=9，即使用IE9.0标准模式对页面进行渲染。

     <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"/>

当指定的content值加了Emulate前缀时，如上述代码，客户端IE将会根据Doctype定义来决定如何来对页面进行渲染。假设页面使用了标准的Doctype，那么此定义效果等同上面的情况；假设页面并没有使用标准的Doctype，那么将使用quirks mode来渲染。

     <meta http-equiv="x-ua-compatible" content="IE=Edge"/>

当指定的content值为IE=Edge时，如上述代码，客户端的IE将会使用最高的标准模式对页面进行渲染。

     <meta http-equiv="x-ua-compatible" content="IE=7, 10, 11"/>

当指定的content值有多个版本时，如上述代码，假定客户端IE版本为8.0或者9.0，则使用IE7.0标准模式对页面进行渲染；假定客户端IE版本为10.0或者11.0，则直接使用对应版本的标准模式对页面进行渲染。

     <meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1"/>

当指定的content值为IE=Edge, chrome=1时，如上述代码，假定客户端安装了Google Chrome Frame，则在IE中使用chrome的渲染引擎来渲染页面，否则，将会使用客户端IE最高的标准模式对页面进行渲染。

二、NAME属性

Keywords（关键字）

用来告诉搜索引擎你网页的关键字是什么(这个关键字的设定对于整个页面的SEO优化非常的重要)。一般来说我们会根据当前页面所展示的内容来设定一组关键词语，这样用户在网上进行搜索的时候，搜索引擎会把拥有或者靠近相关关键词的页面呈现给用户，以达到产品推广的作用(当然这个需要长期的SEO/SEM等运营推广才会让自己的网页在搜索出的结果中靠前)。关键字内容太短，搜索引擎可能不会认为和这些内容有关，但是关键字的设定不能超过874个字符。

     <meta name="keywords" content="javascript培训,js培训,HTML5培训,css培训,前端开发培训,node.js培训,nodeJS培训,移动端培训,北京珠峰培训"/>

description（网站内容描述）

用来告诉搜索引擎你的网站主要内容。网站内容描述（description）的设计要点：

• ①网页描述为自然语言而不是罗列关键词（与keywords设计正好相反）；
• ②尽可能准确地描述网页的核心内容，通常为网页内容的摘要信息，也就是希望搜索引擎在检索结果中展示的摘要信息；
• ③网页描述中含有有效关键词；
• ④网页描述内容与网页标题或者网页主体内容有高度相关性；
• ⑤网页描述的文字不必太多，一般每个网页都应有一个不超过150个字符且能准确反映网页内容的描述标签。

     <meta name="description" content="珠峰培训是中国前端开发知名品牌，七年JS前端培训，以专注立身；70%的同学来自老学员推荐，以诚信立业。先学习考试通过后交学费；四周内可无条件退学费；工资不到9千退学费。我们专注的特色培训有：javascript培训,node.JS培训,前端开发培训,HTML5培训,移动端培训"/>

robots（机器人向导）

robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

content的参数有 all(默认值),none,index,noindex,follow,nofollow。 all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索； nofollow：页面上的链接不可以被查询。

     <meta name="robots" content="index,follow"/>     <meta name="google" content="index,follow"/> ->下面是声明其它搜索引擎的搜索模式     <meta name="googlebot" content="index,follow"/>     <meta name="verify" content="index,follow"/>

声明搜索引擎抓取间隔

有时候你可能并不希望站点一直被搜索引擎抓取，而是每间隔一段时间才来访问一次，这时，可以声明revisit-after meta。

     <meta name="revisit-after" content="10 days"/>

声明网页的作者信息

     <meta name="author" content="zhufeng,zhufengpeixun@qq.com"/>