合適的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