浅析meta标签用处

　　meta标签是html文档头部的一个标签，meta在计算机中是元的意思，w3shcool中称之为metadata，也就是元数据，固然，是描述网页的元数据，这个标签不是给用户看的，是给搜索引擎看的，说白了就是为了SEO。meta标签关键点在于它的属性，这些属性很繁琐，容易混淆，现将其用法作一个小小的总结，以供后来参考。

　　meta标签的属性用法分红两大类（charset属性只有一个固定用法，暂不列入2大类之中），分别是:

　　1. <meta name = "XXX" content = "xxxxx" />，这种用法的核心是属性name，其值是可变的，可是都有固定选项，不能随意乱写，咱们下边会一一分析列举

　　2. <meta http-equiv = "xxxxx" content = "xxxxx" /> 这种用法的核心是属性http-equiv，其值是可变的，可是都有固定选项，不能随意乱写，咱们下边会一一分析列举

　　1、首先来看 使用name属性的用法

　　name属性主要用于描述网页，好比网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。name属性常见的值有：

　　1.1 title

　　title做为name属性的值，其做用与<title>标签的做用是同样的，通常用的较少，更多的是直接使用<title></title>标签。能见到使用此值的网站好比优酷

<meta name="title" content="优酷-这世界很酷" />

 

　　1.2 keywords

　　顾名思义，描述网站的关键字，你们都会用它，好比：

优酷的：
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放" />
京东的：
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

　　1.3 description

　　对于网站功能，主要内容的描述性信息，好比：　　

京东的：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通信、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，
为您提供愉悦的网上购物体验!" />

　　1.4 viewport

　　视口，用来作移动端网页适配的。这个能够做为学习移动web开发时再详细了解。最多见的用法以下：　　

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

　　1.5 robots

　　robots用来告诉爬虫哪些页面须要索引，哪些页面不须要索引。当name属性为“robots”的时候，content的参数有all,none,index,noindex,follow,nofollow。默认是all。

　　1.6 author

　　描述网页开发者信息，例如：

<meta name = "author" content = "barteam" />

　　1.7 generator 

　　描述网页的开发工具，通常使用的较少

　　1.8 copyright

　　描述版权信息，好比：　　

起点中文网的：
<meta name="copyright" content="本页版权 www.qidian.com 起点中文网全部。All Rights Reserved" />

　　其余不常见的属性就再也不赘述了，想了解的能够在百度。

　　2、再来看http-equiv属性

　　它的值也有好多种可选项，把经常使用的也扒出来看看。

　　2.1 content-type

　　这个值是后台告诉浏览器，这次响应报文最基本的信息，很是关键，例如：　　

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

　　这个例子中，meta标签告诉了浏览器2个重要信息，其一，告诉浏览器这次响应报文是一个纯文本文档，而且这个文档是html文档。其二，这个html文档的编码格式是utf-8 。

　　这个信息是很是关键的，若是响应报文是一个jpg图片，而响应头的meta标签写成如上的示例，那么这个图片就会被当作html纯文本文档来解释，结果是固然没法看到图片了。

　　2.2 X-UA-Compatible

　　IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题。好比：　　

<meta http-equiv="X-UA-Compatible" content="IE=7">  

　　以上代码告诉IE浏览器，不管是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。 

　　2.3 cache-control

　　告诉浏览器缓存机制，不多用。

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

　　当使用 cache-control时，content对应的值也不少，以下：

• Public：指示响应可被任何缓存区缓存。
• Private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这容许服务器仅仅描述当用户的部分响应消息，此响应消息对于其余用户的请求无效
• no-cache：指示请求或响应消息不能缓存
• no-store：用于防止重要的信息被无心的发布。在请求消息中发送将使得请求和响应消息都不使用缓存
• max-age：指示客户机能够接收生存期不大于指定时间（以秒为单位）的响应
• min-fresh：指示客户机能够接收响应时间小于当前时间加上指定时间的响应
• max-stale：指示客户机能够接收超出超时期间的响应消息。若是指定max-stale消息的值，那么客户机能够接收超出超时期指定值以内的响应消息

　　固然还有其余不少，这里再也不一一列举了。

　　3、对于网页编码字符集的设置，如今更多的使用charset属性

　　好比：

<meta charset="UTF-8">

 

　　这是更推荐的设置字符集的用法。

　　好了，就总结到这里吧