meta标签详解

2017-06-04 本文已影响33人邢烽朔

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

-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通用设置：



---

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

meta标签详解

-META标签

name:

猜你喜欢

热点阅读