合适的meta，你选对了吗?

meta标签用来描述一个HTML网页文档的属性，例如做者、日期和时间、网页描述、关键词、页面刷新等。它提供的信息虽然用户不可见，但倒是文档的最基本的元数据。

对于网页来讲，meta data就是经过一些字段信息来描述一下当前网页，以便浏览器和搜索引擎在访问到此网页的时候，能够经过这些描述信息来知道如何去解析此网页数据。

meta标签共有四个属性：http-equiv、name、scheme和content;不一样的属性又有不一样的参数值，这些不一样的参数值就实现了不一样的网页功能。其中http-equiv顾名思义，经常使用来作http协议上的一些限制，其做用是把 content 属性关联到 HTTP 头部。scheme 属性用于指定要用来翻译属性值的方案。

简单来讲，就是meta标签提供的是一个"键值对"，name/http-equiv做为键，content做为值，scheme不经常使用。

基于以上理念，meta标签又常被用来做为SEO的有力提供。

常见的meta标识有：

//声明文档使用的字符编码
<meta charset="utf-8">

//页面描述
<meta name="description" content="网页描述"/>

//页面关键词
<meta name="keywords" content=""/>

//网页做者
<meta name="author" content="name, email@gmail.com"/>
复制代码

这里的charset实际上是h5的新属性，等同于 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，做用是会在本网页的http请求头中添加： content-type: text/html; charset=UTF-8

这些是最正规的meta用法，基本上每一个浏览器都支持，也是定义在标签规范内的。

---

然而尴尬的是，就像当初script标签本意也不是做为jsonp的用法同样，现代浏览器支持的meta标签彻底超出了其初始的定义。

上文有说过，meta标签的信息用户是不可见的，并且其简单的键值对结构无疑是最简单的传递网页信息的方式，才是浏览器厂商最终对meta标签下手的缘由，加上每一个浏览器但愿体现自身特点，最终致使了meta标签的凌乱不堪。

其中有做为特定浏览器专用的meta标识。例：

//uc强制竖屏
<meta name="screen-orientation" content="portrait">

//QQ强制竖屏
<meta name="x5-orientation" content="portrait">

//UC强制全屏
<meta name="full-screen" content="yes">

//设置苹果工具栏颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
复制代码

这些其实都是浏览器厂商定制版本的meta，虽然不常见，可是一旦用上也能减小不少复杂的需求。

做为一个前端开发者，不得不说一句，仍是很期待浏览器早日实现统一的 🤣。

逃。。。

---

下面是收集的meta标签，之后有更多收集会及时更新，也但愿网友有更多的meta标签能不吝赐教：

//声明文档使用的字符编码
<meta charset="utf-8">

//优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

//页面描述
<meta name="description" content="网页描述"/>

//页面关键词
<meta name="keywords" content=""/>

//网页做者
<meta name="author" content="name, email@gmail.com"/>

//搜索引擎抓取
<meta name="robots" content="index,follow"/>

//为移动设备添加 viewport
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

//添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

//设置苹果工具栏颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

//启用360浏览器的极速模式(webkit)
<meta name="renderer" content="webkit">

//避免IE使用兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">

//不让百度转码
<meta http-equiv="Cache-Control" content="no-siteapp" />

//针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，好比黑莓
<meta name="HandheldFriendly" content="true">

//微软的老式浏览器
<meta name="MobileOptimized" content="320″> //uc强制竖屏 <meta name="screen-orientation" content="portrait">

//QQ强制竖屏
<meta name="x5-orientation" content="portrait">

//UC强制全屏
<meta name="full-screen" content="yes">

//QQ强制全屏
<meta name="x5-fullscreen" content="true">

//UC应用模式
<meta name="browsermode" content="application">

//QQ应用模式
<meta name="x5-page-mode" content="app">

//windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no">

//设置页面不缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

复制代码

—— The End