meta标签详解

有时，只需站着不动....

-META标签

• meta 标签两个属性：

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

• http-equiv属性：
  http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。

语法格式：<meta name / http-equiv="参数" content="具体的描述">

---

name:

• keywords(关键字)
  <pre><meta name="keywords" content="淘宝,掏宝,网上购物,C2C,在线交易"></pre>

• description(网站内容的描述)
  <pre><meta name="description" content="一个人的Blog"></pre>

• viewport(移动端的窗口)
  <pre>``` <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

• 注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

• robots(定义搜索引擎爬虫的索引方式)
  <pre>```
  <meta name="robots" content="index,follow" />

 
  - robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。

- author(作者)
<pre>```<meta name="author" content="XXXXXXXX@XX.com">```</pre>


- copyright(版权)
<pre>``` <meta name="copyright" content="XXXXXXXXX">
 <!--代表该网站为XXXXXXXXX个人版权所有。-->```</pre>

- revisit-after(搜索引擎爬虫重访时间)
<pre>```<meta name="revisit-after" content="7 days" >```</pre>
 - 说明：如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。举例：

- renderer(双核浏览器渲染方式)
<pre>```<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 与font-family优先规则一样 -->
 <meta name="renderer" content="webkit"> <!-- 默认webkit内核 -->
  <meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 -->
  <meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 -->```</pre>

---

## http-equiv:

 - [X-UA-Compatible](https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx)(浏览器采取何种版本渲染当前页面)
<pre>```<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->```</pre>


- cache-control(指定请求和响应遵循的缓存机制)

说明：指导浏览器如何缓存某个响应以及缓存多长时间。[参考链接：Google Developers](https://developers.google.com/?hl=zh-cn)[参考链接：HTTP缓存](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn#cache-control)
![](https://segmentfault.com/image?src=http://7xoxxe.com1.z0.glb.clouddn.com/cache.png&objectId=1190000004279791&token=60cc5b81792e199feb8a6b032aff4b83)
<pre>```  <meta http-equiv="cache-control" content="no-cache">

<!-- no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。 -->
<!-- no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）-->
<!-- public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果-->
<!-- private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）-->
<!-- maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。-->
```</pre>



 - expires(网页到期时间)
<pre>```<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
<!-- 用于设定网页的到期时间，过期后网页必须到服务器上重新传输。-->
```</pre>


- refresh(自动刷新并指向某页面)
<pre>```<meta http-equiv="refresh" content="10；URL=http://www.xxx.com/"> 
<!-- 意思是10秒后跳转向我的博客 -->
```</pre>

- Set-Cookie(cookie设定)
<pre>```
<!-- 如果网页过期。那么这个网页存在本地的cookies也会被自动删除。 -->
<meta http-equiv="Set-Cookie" content="name, date"> 
<!-- 格式 -->
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> 
<!-- 具体范例 -->```</pre>

---

> 移动web前端meta通用设置：

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="renderer" content="webkit">

<meta name="MobileOptimized" content="320">

<meta name="keywords" content="">
<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

<meta name="HandheldFriendly" content="true">

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<meta name="format-detection" content="telphone=no, email=no" />

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

<meta name="msapplication-tap-highlight" content="no">

---

参考链接:[点击](http://www.maoyupeng.com/web-app-common-meta.html)
参考链接:[点击](https://segmentfault.com/a/1190000004279791)