前端“meta”标签详细整理

其实这些东西大概在一年前就搞出来了,看了很多有关的文章,现在分享出来,如果对你有些帮助,我还是挺开心的。因为里面有很多也是我没用过的,实在是用不到,如果觉得有问题,就留言或者微信、邮箱联系我,我们共同探讨。

Meta标签:标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务
换句话说,这些信息有助于搜索引擎更准确的识别网页的内容,也有助于第三方工具抓取网站基本信息。

W3C标准下有四个属性。

  • content(必需):定义与name或http-equiv属性相关的元信息

  • http-equiv:把content属性关联到HTTP,如果没有提供name属性,content的值会对应http-equiv属性

  • name:把content属性关联到一个名称

  • charset:html5新加


http-equiv属性

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

meta标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值">

其中http-equiv属性主要有以下几种参数:

A、Expires(期限)

说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
  用法:<meta http-equiv="expires" content="Fri, 12 Jan 2016 18:18:18 GMT">
  注意:必须使用GMT的时间格式。

B、Pragma(cache模式)

说明:禁止浏览器从本地计算机的缓存中访问页面内容。
  用法:<meta http-equiv="Pragma" content="no-cache">
  注意:这样设定,访问者将无法脱机浏览。

C、Refresh(刷新) :

content内的数字代表时间(秒),即多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)
  说明:自动刷新并指向新页面。
  用法:<meta http-equiv="refresh" content="2;URL=http://www.root.net">(注意后面的引号,分隔在秒数的后面和网址的前面)
  注意:其中的2是指停留2秒钟后自动刷新到URL网址。

D、Set-Cookie(cookie设定)

说明:如果网页过期,那么存盘的cookie将被删除。
  用法:<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/">
  注意:必须使用GMT的时间格式。

E、Window-target(显示窗口的设定)

说明:强制页面在当前窗口以独立页面显示。
  用法:<meta http-equiv="Window-target" content="_top">
  注意:用来防止别人在框架里调用自己的页面。

F、content-Type(显示字符集的设定)

说明:设定页面使用的字符集。
  用法:<meta http-equiv="content-Type" content="text/html; charset=gb2312">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    http-equiv="Content-Type" 表示描述文档类型
    content="text/HTML; 文档类型,这里为html,如果JS就是text/javascript,
    charset=utf-8 页面字符集,编码,eg:gb2312,iso-8859-1,utf-8

现在有更为简洁的<meta charset=“utf-8” />

G、content-Language(显示语言的设定)

用法:<meta http-equiv="Content-Language" content="zh-cn" />

H、特殊——X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
如果安装了GCF,则使用GCF来渲染页面,如果没安装GCF,则使用最高版本的IE内核进行渲染。
http-equiv="X-UA-Compatible",这个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式

扩展:Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。

<!-- 关于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 -->
I、转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta

<meta http-equiv="Cache-Control" content="no-siteapp" />


name属性

name属性来表述页面文档的元信息,通过http-equiv属性设置http请求指令,通过charset设置页面的字符编码。

页面关键词

每个网页应具有描述该网页内容的一组唯一的关键字
<meta name="keywords" content="your tags" />

页面描述

每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签
<meta name="description" content="150 words" />

搜索引擎索引方式

robots是一组使用逗号(,)分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow

<meta name="robots" content="index,follow" />

    all:文件将被检索,且页面上的链接可以被查询;
    none:文件将不被检索,且页面上的链接不可以被查询;
    index:文件将被检索;
    follow:页面上的链接可以被查询;
    noindex:文件将不被检索;
    nofollow:页面上的链接不可以被查询。
viewport

能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。
大部分4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

WebApp全屏模式:伪装app,离线应用

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

隐藏状态栏/设置状态栏颜色

只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">

浏览器内核控制

<meta name="renderer" content="webkit|ie-comp|ie-stand">
国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染<meta name="renderer" content="webkit|ie-comp|ie-stand">
content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。
这里特别需要说明一下,有一次一个朋友问360的首页或者天猫之类的大网站,发现不只是优先使用webkit内核,而是只有这一种选择,根本没有兼容模式的选择,为什么呢?

就是这个样子

找了好长时间才找到一个靠谱点的答案:如果想要实现这么一个功能,需要跟他们合作,具体是怎么一种方式如果有需要可以跟联系他们的客服吧,或者是你知道这究竟是怎么一回事,也可以跟我说一下。

站点适配:主要用于PC-手机页的对应关系

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">

[wml|xhtml|html5]根据手机页的协议语言,选择其中一种;
url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。
google的网站认证代码,证明该网站的所有者是你

<meta name="google-site-verification"content="tPkY-Quj85Ni78uIWOIREPO9k5xczDgjch10qsLfVfs" />

QQ登陆声明

<meta property="qc:admins" content="153033120760567656375" />

微博登陆声明

<meta property="wb:webmaster" content="e9da5e10879ed7c9" />

关于自定义设置

以淘宝为例
淘宝xTao为外部合作伙伴提供的一套跟踪引导成交效果数据的解决方案
<meta name="data-spm" content="a215s">
<meta content="fullscreen=yes,preventMove=no" name="ML-Config">用于控制全屏显示

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

推荐阅读更多精彩内容