<meta>标签详解

<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对，这些内容描述了有关文档的元信息，比如针对搜索引擎和更新频度的描述和关键词。

1、<meta>标签的属性

<meta>标签拥有以下几种属性，包括content，name，http-equiv和scheme。通常来说，content都是与name或http-equiv成对出现的。

name属性

规定了名称/值对中的名称。一般的取值可以为keywords，description，author，revised等。这些与content成对出现，描述了文档的关键字，文档描述，作者和修订等信息。如下

[html] view plain copy

<meta name="keywords" content="Hello,World">

描述了文档关键字为：Hello和World。

http-equiv属性

在将要发送给浏览器的MIME文件头部添加一个名称/值对，其中名称就是有http-equiv指定，值自然是由content指定。它的取值可以为content-type，expires，refresh，set-cookie等。例子如下

[javascript] view plain copy

<meta http-equiv="expires" content="31 Dec 2014">

scheme属性

用于指定要用来翻译属性值的方案。

2、SEO相关问题

<meta>标签中的title、keywords和description等属性对于搜索引擎优化seo有着一定影响。不过对于现在的搜索引擎，<meta>标签的内容影响不大。目前来说，对于seo，keywords基本无用，google会完全忽略，bing和yahoo会更具它做一些分类。title和description有着一定的影响，title影响较大。

3、<meta>标签内属性顺序问题

<meta>标签内的属性顺序对于seo基本无影响，但是有一点要注意是，<meta charset="xxx">属性要写在最前面，让浏览器尽早获得字符编码信息。

4、IE版本的最新渲染模式

对于IE8，http-equiv属性有一个特别值：X-UA-compatible，用来规定浏览器的渲染模式。可选为IE6,7或IE最新版本的渲染模式。

[html] view plain copy

<meta http-equiv="X-UA-compatible" content="IE=edge">

这个例子就规定了浏览器采用最新的IE渲染模式。

5、移动版本的相关属性值

对于移动端，name属性有一个特别值：viewport。用来控制viewport的大小和缩放。

什么是viewport?

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中，也不会破坏没有针对手机

浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的不同部分。

常用的viewport的值有width，height，initial-scale，user-scalable等。

[javascript] view plain copy

<meta name="viewport" content="width=device initial-scale=1">

上面这个例子就规定了viewport的宽度为设备宽度，初始缩放比例为1，就是不缩放。