前言

meta 標簽提供關於 html 文檔的元數據（元數據不會顯示在網頁上，但是對於機器是可讀的。），常用來描述一個 html 網頁的屬性（例如作者、網頁描述、關鍵詞等。）或者渲染方式等。meta 標簽有兩個屬性，分別是 http-equiv 屬性和 name 屬性，不同的屬性又有不同的屬性值，這些不同的屬性值就實現了網頁不同的功能。

name 屬性主要用於描述網頁，與之對應的屬性值為 content，content 中的內容主要是便於搜索引擎查找信息和分類信息用的。

格式為：<meta name="屬性名"content="屬性值" />。

http-equiv（http-equivalent）屬性相當於 http 的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助精確地顯示網頁內容，與之對應的屬性值同樣為 content。

格式為：<meta http-equiv="屬性名"content="屬性值" />。

（以下按照 meta 標簽功能進行分類解釋。）

搜索引擎優化（SEO）

keywords（關鍵詞）

示例：<meta name="keywords" content="關鍵詞1, 關鍵詞2, 關鍵詞3, ..." />。

說明：keywords 用來告訴搜索引擎網頁的關鍵詞是什麽，為搜索引擎提供關鍵詞列表，各關鍵詞間用英文逗號隔開。每個網頁應具有描述該網頁內容的一組唯一的關鍵詞，這樣用戶可以通過關鍵詞搜索你的網站。

description（網頁描述）

示例：<meta name="description" content="這裏是網頁描述，不超過150個字符" />。

說明：description 用來告訴搜索引擎網頁的主要內容是什麽，每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽。

robots（搜索引擎抓取）

示例：<meta name="robots" content="index, follow" />。

說明：robots 用來告訴爬蟲哪些網頁需要索引，哪些網頁不需要索引。content 的值有 all、none、index、noindex、follow、nofollow，默認是 all。

content	描述
all	文件將被檢索，且網頁上的鏈接可以被查詢。
none	文件將不被檢索，且網頁上的鏈接不可以被查詢。
index	文件將被檢索。
noindex	文件將不被檢索，但網頁上的鏈接可以被查詢。
follow	網頁上的鏈接可以被查詢。
nofollow	文件將被檢索，但網頁上的鏈接不可以被查詢。

revisit-after

示例：<meta name="revisit-after" content="7 days" />。

說明：如果頁面不是經常更新，為了減輕搜索引擎對服務器帶來的壓力，可以設置一個搜索引擎的重訪時間。

網頁解析模式

charset（字符集）

示例：<meta charset="utf-8" />。

說明：聲明網頁使用的字符編碼。

charset	描述
utf-8	世界通用的字符編碼。
GB2312	簡體中文字符編碼。
BIG5	繁體中文字符編碼。
iso-2022-jp	日文字符編碼。
ks_c_5601	韓文字符編碼。
ISO-8859-1	英文字符編碼。

X-UA-Compatible

示例：<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />。

說明：這是 IE8 的一個專有 meta 屬性，用來兼容其它低版本 IE 瀏覽器。如果當前 IE 瀏覽器安裝了 Google Chrome Frame 插件，則以 chrome 內核渲染頁面，否則就以當前 IE 瀏覽器支持的最高版本模式來渲染。

遵循 <!DOCTYPE> 指令文檔聲明的兼容設置：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<!-- 在標準模式指令下以IE7標準模式渲染頁面，在Quirks混雜模式指令下以IE5模式渲染頁面。 -->

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<!-- 在標準模式指令下以IE8標準模式渲染頁面，在Quirks混雜模式指令下以IE5模式渲染頁面。 -->

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<!-- 在標準模式指令下以IE9標準模式渲染頁面，在Quirks混雜模式指令下以IE5模式渲染頁面。 -->

忽略 <!DOCTYPE> 指令文檔聲明的兼容設置：

<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標準模式渲染頁面 -->

renderer

示例：<meta name="renderer" content="webkit | ie-comp | ie-stand" />。

說明：renderer 是為雙核瀏覽器（比如 360 瀏覽器）準備的，用於指定雙核瀏覽器默認以何種方式渲染頁面。webkit | ie-comp | ie-stand 這種寫法表示瀏覽器將會按照從左到右的先後順序選擇其具備的渲染內核來渲染當前網頁。

content	描述
webkit	以 webkit 內核（chrome 內核）渲染頁面（360 瀏覽器的極速模式）。網站打開速度快，可能出現兼容性問題。
ie-comp	以 IE 兼容模式渲染頁面。網站打開速度略低，但網頁兼容性問題較少。
ie-stand	以 IE 標準模式渲染頁面。支持硬件加速及 IE9/IE10 全新的腳本渲染引擎。

國內的主流瀏覽器基本都是雙核（webkit 和 Trident）瀏覽器。基於 webkit 內核常用於網站的高速瀏覽，基於 IE 內核常用於兼容網銀、舊版網站。

http-equiv

expires（期限）

示例：<meta http-equiv="expires" content="Fri, 12Jan200118:18:18GMT" />。

說明：expires 用於設定網頁的到期時間。一旦網頁過期，必須到服務器上重新請求。

註意：必須使用 GMT 時間格式。

pragma（緩存）

示例：<meta http-equiv="pragma" content="no-cache" />。

說明：pragma 用於禁止瀏覽器從本地計算機的緩存中訪問頁面內容。

註意：這樣設定，用戶將無法離線瀏覽。

refresh

示例：<meta http-equiv="refresh" content="5; url=網址" />。

說明：refresh 用於頁面刷新和重定向。

cache-control

示例：

<meta http-equiv="cache-control" content="no-siteapp" />
<!-- 禁止百度轉碼 -->

<meta http-equiv="cache-control" content="no-cache" />
<!-- 設置頁面不緩存 -->

說明：指定請求和響應遵循的緩存機製。

http-equiv	描述
no-cache	先發送請求，與服務器確認該資源是否被更改，如果未被更改，則使用緩存。
no-store	不允許緩存，每次都要去服務器上下載完整的響應（安全措施）。

webapp

viewport（視區）

示例：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />。

說明：viewport 指的是用戶網頁的可視區域。這裏只作粗略介紹，日後會單獨詳細介紹。

key	value
width	整數或 device-width（設備的寬度），用於定義 viewport 的像素寬度。
initial-scale	初始縮放比例，頁面第一次加載時的縮放比例。
maximum-scale	允許用戶縮放到的最大比例。
minimum-scale	允許用戶縮放到的最小比例。
user-scalable	用戶是否可以手動縮放。

apple-mobile-web-app-title

示例：<meta name="apple-mobile-web-app-title" content="標題名" />。

說明：蘋果手機把網頁添加到主屏後的標題（iOS6 新增）。

apple-touch-icon

示例：

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76×76" href="touch-icon-ipad.png" />
<link
  rel="apple-touch-icon"
  sizes="120×120"
  href="touch-icon-iphone-retina.png"
/>
<link
  rel="apple-touch-icon"
  sizes="152×152"
  href="touch-icon-ipad-retina.png"
/>
<!-- 以上是針對不同蘋果設備選擇一個最優圖標。 -->

說明：蘋果手機把網頁添加到主屏後的圖標（圖片自動處理成圓角和高光等效果）。如果更換為 apple-touch-icon-precomposed 則禁止系統自動添加效果，直接顯示設計原圖。

apple-touch-startup-image

示例：

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />
<!-- iPhone/iPod Touch 豎屏 320x480（標準分辨率）-->

<link
  rel="apple-touch-startup-image"
  sizes="768x1004"
  href="/splash-screen-768x1004.png"
/>
<!-- iPad 豎屏 768 x 1004（標準分辨率）-->

<link
  rel="apple-touch-startup-image"
  sizes="1536x2008"
  href="/splash-screen-1536x2008.png"
/>
<!-- iPad 豎屏 1536x2008（Retina）-->

<link
  rel="apple-touch-startup-image"
  sizes="1024x748"
  href="/Default-Portrait-1024x748.png"
/>
<!-- iPad 橫屏 1024x748（標準分辨率）-->

<link
  rel="apple-touch-startup-image"
  sizes="2048x1496"
  href="/splash-screen-2048x1496.png"
/>
<!-- iPad 橫屏 2048x1496（Retina）-->

說明：用於設置軟件（webApp）啟動動畫。

apple-mobile-web-app-capable

示例：<meta name="apple-mobile-web-app-capable" content="yes" />。

說明：用於啟用 webApp 全屏，刪除蘋果默認的工具欄和菜單欄。

apple-touch-fullscreen

示例：<meta name="apple-touch-fullscreen" content="yes" />。

說明：網頁添加到主屏幕後全屏顯示。

shortcut icon

示例：<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />。

說明：用於添加 favicon icon。

Chrome

theme-color

示例：<meta name="theme-color" content="#db5945" />。

說明：Chrome39 增加的標簽，用來設置選項卡顏色。

google

示例：<meta name="google" value="notranslate" />。

說明：禁止 Chrome 瀏覽器中自動提示翻譯。

format-detection

示例：

<meta name="format-detection" content="telephone=no" />
<!-- 忽略將頁面中的數字識別為電話號碼 -->

<meta name="format-detection" content="email=no" />
<!-- 不識別頁面中的郵箱 -->

說明：format-detection 是用來檢測 html 裏的一些特殊內容。

（到此結束，如有問題請留言。）