那些你不知道的meta标簽

作為一名切圖仔，對meta一直都是用于SEO優化、設定視口标簽，但是最近一段時間檢視淘寶、京東、蘇甯等網站的前端代碼卻發現meta标簽的使用多種多樣，這才知道自己一直小觑了meta标簽。 在陸續看了其他幾家大型網站的前端代碼和翻閱了相關資料寫下了這篇文章，如果文章中有什麼錯誤，麻煩指出，立即更正。

http-equiv

http-equiv

是meta标簽内容中非常重要的一環，從字面上看是跟HTTP相關，事實上其該屬性的内容值都是特定HTTP的頭，該屬性與伺服器和浏覽器進行互動，讓網站内容顯示的準确和及時。 該屬性中

content-type、content-language和set-cookie

已經被廢除了，同時像

cleartype、imagetoolbar

這類不在HTML标準範圍内的，在此不再進行描述。

content-security-policy

處于安全方面的考慮，浏覽器的同源政策在一定程度上保護了使用者安全，但是像

script、link、img

等标簽是不受同源政策的影響，而這些因素會給我們的使用者帶來安全風險，這個時候，該屬性就出馬了。 在浏覽器中，通過設定該屬性來聲明哪些動态資源允許被加載以此減少XSS攻擊。該屬性的内容包括了對

script、style、font、media

等靜态資源的控制，由于其内容過多，在此就不再進行贅述， 想要對此進行了解的，可以閱讀Content Security Policy Reference。

cache-control、Pragma、Expires

将這三個屬性并列在一起，是因為其跟HTTP頭有着同樣的屬性。從字面上看，加上相應的屬性能夠讓浏覽器緩存相應的html内容，是以在某些網站（包括大型網站）上你能夠看到以下meta标簽内容

<meta http-equiv="cache-control" content="max-age=180" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
複制代碼
           

但是，現實是殘酷的，這些标簽往往不會生效，甚至在HTML5規範中，http-equiv中的屬性并不包括這三個，如果我們需要進行緩存控制的話，還是 寄希望與HTTP headers上。

x-dns-prefetch-control

雖然在meta标簽設定緩存無效，但是我們可以設定meta标簽來提前進行DNS解析以此來提升網站性能。在HTML頁面中的a标簽會自動啟用DNS提前解析，但是在HTTPS上卻失效了，這個時候就輪到該屬性登場了 通過設定

<meta http-equiv="x-dns-prefetch-control" content="on" />

就可以讓a标簽在HTTPS環境下進行DNS預解析。

refresh

這個屬性的值可以進行頁面的跳轉，其效果跟如下函數一樣。

setTimeout(function(){
  window.location.href = "https://www.example.com"
},time)
複制代碼
           

其常用的用法如下：

//目前頁面每一秒後重新整理一下
<meta http-equiv="refresh" content="1">
//目前頁面一秒後跳轉到首頁
<meta http-equiv="refresh" content="0;url='/'">
/目前頁面一秒後跳轉到百度
<meta http-equiv="refresh" content="0;url='https://www.baidu.com'">
複制代碼
           

需要注意的是，在某些浏覽器（Firefox）需要使用者手動啟用autorefreh，同時其相對于JS執行，跳轉需要等待時間過長。

default-style

這個屬性指定了在頁面上使用的首選樣式表. content屬性必須包含

<link>

元素的标題, href屬性連結到CSS樣式表或包含CSS樣式表的

<style>

元素的标題.

name

name

是我們日常使用最頻繁的屬性，其中

author、keywords、description、robots、viewport

的值在平時中經常使用，是以不在此進行講解。 下面列出一些在應用中比較有用的值。

/*保留曆史記錄以及動畫效果*/
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">

/*是否啟用 WebApp 全屏模式*/
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 設定狀态欄的背景顔色,隻有在 “apple-mobile-web-app-capable” content=”yes” 時生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

/*添加到主屏後的标題*/
<meta name="apple-mobile-web-app-title" content="App Title">

/*在網頁上方顯示一個app banner，提供app store下載下傳*/
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"

/*啟用360浏覽器的極速模式(webkit)*/
<meta name="renderer" content="webkit">

/*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">

/*禁止自動探測并格式化手機号碼*/
<meta name="format-detection" content="telephone=no">
複制代碼
           

雜項

其實meta标簽的作用不止于此，很多網站（google,baidu,sogou,twitter）都有一套屬于自己的規範，開發者為了相容性，自然要加上相應的屬性。 相應的meta标簽在此也就不再進行講解。