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)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容

  • 先附上几篇网上查找的关于meta标签的资料、文章,看完这个几篇文章后,会对meta标签有一定的了解!HTML me...
    米斯特卢阅读 1,594评论 0 2
  • (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...
    love丁酥酥阅读 846评论 2 3
  • 标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新...
    出云月阅读 245评论 0 0
  • W3School say meta 标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的...
    bpup阅读 752评论 0 0
  • HTML meta标签总结与属性使用介绍 之前学习前端中,对meta标签的了解仅仅只是这一句。 但是打开任意的网站...
    小豆soybean阅读 287评论 0 0