Meta标签

meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。

meta 标签一般分作两类，一类是利用name属性定义的，另一类是利用http-equiv属性定义的，接下来我们就分别介绍一下。

name属性

name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。meta标签中name属性语法格式是：

1. keywords

页面的关键字，一般用于搜索引擎优化。不过在09年的时候，Google宣布，这个关键字已经不再使用了，另外，如果在keywords里塞了太多的垃圾信息的话，Bing（Yahoo）可能把网站标记为一个垃圾网站，总之，这是一个被抛弃的meta标签。

2. description

给搜索引擎提供关于这个网页的简短的描述，这个标签曾经在搜索排名中占有很大的权重，但随着算法的不断的更新升级，它的地位也逐渐降低。它虽然不会提高网站排名，但是，因为它会被用在搜索引擎的结果页，所以依然有用。推荐的description长度为160 个字符。
如果你没有使用description标签或者description标签为空时，搜索引擎仍会在搜索结果页显示出自己创键的一小段文字。大多数的结果都不是用户需要的，也就意味着你将失去用户点击网页的机会。

3. title
   title 不是meta标签，但是考虑他他在SEO中的重要作用，这里也做一下简单的介绍。

标题通常会显示在两个不同的地方;浏览器的头部标签和搜索结果页。这就意味着title标签在点击率(CTR)和排名上有很重要的影响。另外谷歌会限制标题为70个字符。

4. viewport
   定义浏览器用于显示网页的那部分区域，他不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

5. robots
   用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

• none 搜索引擎将忽略此网页，等价于noindex，nofollow。
• noindex 搜索引擎不索引此网页。
• nofollow 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
• all 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
• index 搜索引擎索引此网页。
• follow 搜索引擎继续通过此网页的链接索引搜索其它的网页。

6. renderer
   renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。

 //默认webkit内核
 //默认IE兼容模式
 //默认IE标准模式

http-equiv属性

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

1. content-Type
   用于设定网页字符集，便于浏览器解析与渲染页面

 
 //HTML5设定网页字符集的方式，推荐使用UTF-8

2. X-UA-Compatible
   用于告知浏览器以何种版本来渲染页面

3. cache-control
   指导浏览器如何缓存某个响应以及缓存多长时间。

• no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存
• no-store: 不允许缓存，每次都要去服务器上，下载完整的响应
• 如果响应被标记为“public”，则即使它有关联的 HTTP 身份验证，甚至响应状态代码通常无法缓存，也可以缓存响应。大多数情况下，“public”不是必需的，因为明确的缓存信息（例如“max-age”）已表示响应是可以缓存的
• private 浏览器可以缓存“private”响应。不过，这些响应通常只为单个用户缓存，因此不允许任何中间缓存对其进行缓存。例如，用户的浏览器可以缓存包含用户私人信息的 HTML 网页，但 CDN 却不能缓存
• max-age 指令指定从请求的时间开始，允许获取的响应被重用的最长时间（单位：秒）。例如，“max-age=60”表示可在接下来的 60 秒缓存和重用响应。

常用meta标签集合

贪玩儿的小灰灰感谢您的耐心阅读，如果有问题记得留言哦 =^_=

公众号 | 贪玩儿的小灰灰

• 每周都会推送原创、有用、有趣的旅行图文和攻略。