經常使用meta整理

1. SEO優化

• 頁面關鍵字

<meta name="keywords" content="your tags" />

• 頁面描述

<meta name="description" content="150 words" />

• 搜索引擎索引方式

<meta name="robots" content="index,follow" />
<!--
    all：文件將被檢索，且頁面上的連接能夠被查詢；
    none：文件將不被檢索，且頁面上的連接不能夠被查詢；
    index：文件將被檢索；
    follow：頁面上的連接能夠被查詢；
    noindex：文件將不被檢索；
    nofollow：頁面上的連接不能夠被查詢。
-->

• 頁面重定向和刷新

<meta http-equiv="refresh" content="0;url=" />

• 定義網頁做者

<meta name="author" content="author name" />

2. 移動設備

• viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊  -->
<!--
    width：寬度（數值 / device-width）（範圍從200 到10,000，默認爲980 像素）
    height：高度（數值 / device-height）（範圍從223 到10,000）
    initial-scale：初始的縮放比例 （範圍從>0 到10）
    minimum-scale：容許用戶縮放到的最小比例
    maximum-scale：容許用戶縮放到的最大比例
    user-scalable：用戶是否能夠手動縮 (no,yes)
-->

• WebApp全屏模式：假裝app，離線應用

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<!-- 啓用 WebApp 全屏模式 -->

• 隱藏狀態欄/設置狀態欄顏色：只有在開啓WebApp全屏模式時才生效。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- content的值爲default | black | black-translucent -->

• 添加到主屏後的標題

<meta name="apple-mobile-web-app-title" content="標題">

• 忽略數字自動識別爲電話號碼

<meta content="telephone=no" name="format-detection" />

• 忽略識別郵箱

<meta content="email=no" name="format-detection" />

• 添加智能 App 廣告條 Smart App Banner：告訴瀏覽器這個網站對應的app，並在頁面上顯示下載banner。參考文檔

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

• 其餘

<!-- 針對手持設備優化，主要是針對一些老的不識別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">
<!-- UC禁止夜間模式顯示 -->
<meta name="nightmode" content="disable">

3. 網頁相關

• 申明編碼

<meta charset='utf-8' />

• 優先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 關於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 -->

• 瀏覽器內核控制

<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 國內雙核瀏覽器默認內核模式以下：
1. 搜狗高速瀏覽器、QQ瀏覽器：IE內核（兼容模式）
2. 360極速瀏覽器、遨遊瀏覽器：Webkit內核（極速模式）-->

• 禁止瀏覽器從本地計算機的緩存中訪問頁面內容：訪問者將沒法脫機瀏覽。

// 用於設定網頁的到期時間。一旦網頁過時，必須到服務器上從新傳輸。 
＜meta http-equiv="expires" content="0"＞
// 用於設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定後一旦離開網頁就沒法從Cache中再調出
<meta http-equiv="Pragma" content="no-cache">
// 清除緩存
<meta http-equiv="cache-control" content="no-cache">

• Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標 -->

• 站點適配：主要用於PC-手機頁的對應關係。

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
    [wml|xhtml|html5]根據手機頁的協議語言，選擇其中一種；
    url="url" 後者表明當前PC頁所對應的手機頁URL，二者必須是一一對應關係。
-->

• 轉碼申明：用百度打開網頁可能會對其進行轉碼（好比貼廣告），避免轉碼可添加以下meta。

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

<meta name="applicable-device" content="pc,mobile">
//表示頁面同時適合在移動設備和PC上進行瀏覽

• 禁止自動翻譯

<meta name="google" value="notranslate">

參考資料

• 經常使用的 HTML 頭部標籤
• HTML head 頭標籤
• Meta http-equiv屬性與HTTP頭的Expires中（Cache-control）詳解