那些你不知道的meta標籤

前端一小卒發表於2019-01-01

作為一名切圖仔，對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標籤在此也就不再進行講解。

相關文章