目錄
一、meta標籤的含義
<meta>是HTML中很常用的標籤之一，通常用於描述一些與當前HTML頁面有關的元信息。
這裏我們先要理解一下什麼是元信息。所謂元信息，就是用來描述信息的信息。比如我們通過http發送了一個請求，那麼請求主體就是我們的主體信息。而用於描述該信息的那些狀態參數，如編碼格式、超時時間、消息長度等，就是描述信息用的信息，它們就被稱爲元信息。
對於一個HTML文檔而言也是一樣的。用於描述文檔的編碼格式、關鍵字、作者等內容的信息，就被稱爲該文檔的元信息，它們由meta標籤所定義。元信息不參與渲染，只是一些描述信息。
與元信息對應的是流信息（也就流數據），它是實際需要渲染的網頁元素，如body、div、p等元素。在HTML5中，meta標籤還可以添加itemprop屬性，用於描述用戶的某些流內容，此時，它與所描述的流內容一樣，也成了流內容。如：
<p itemscope>
<span>
馬雲<meta itemprop content="阿里巴巴前董事長">
</span>
</p>
這裏的meta標籤現在是文檔內容的一部分了（這樣的數據在HTML5中稱爲微數據），它不再是元數據，而是流數據。
關於這類用法，本文不會詳解，感興趣的可自行查閱。下面我們就看一下作爲元數據使用的<meta>標籤支持哪些屬性。
二、meta使用說明
meta標籤總共支持4個全局屬性：charset、http-equiv、name和content。
1. charset
charset用於定義文檔的編碼格式，常見的格式有utf-8、gbk等，如：
<meta charset="utf-8">
中文網頁一般多使用utf-8的編碼格式。網頁的編碼格式還有另一種寫法：
<meta http-equiv="content-type" content="text/html; charset=utf-8">
這是HTTP4.01常見的寫法，在HTML5中仍然被支持。
2. http-equiv
在HTML4中，http-equiv支持很多值，它們每個值都對應http響應頭的一個字段。服務端會用http-equiv的值來設置響應頭（equiv全寫是equivalent，含義爲“等價”，意指該參數可以等價轉化爲http響應頭字段）。
http-equiv需要結合content屬性來使用，以定義一個響應頭字段的值。不過在HTML5中，已經不再用這個字段來描述響應頭，它所支持的值也縮減爲5個（鑑於目前瀏覽器仍然支持HTML4，因此像expires、cache-control這樣被HTML5捨棄的值仍然是有效的）。它的基本語法如下：
<meta http-equiv="" content="">
HTML5的http-equiv包含以下幾個值：
- content-security-policy，定義文檔的內容安全策略。
- content-type，定義文檔類型，其值必須是"text/html; charset=utf-8"。
- default-style，設置默認CSS樣式表組的名稱。
- x-ua-compatible，兼容性聲明，指定所用瀏覽器的內核，規範要求此時content的值必須包含"IE=edge"。
- refresh，定義文檔的自動刷新策略。
(1). content-security-policy
定義文檔的的內容安全策略，主要目的是抵禦XSS（cross-site scripting attacks，跨站點腳本攻擊）。
此時content的值是用分號隔開的一組需要啓用的安全策略及對應的值，如：
<meta http-equiv="content-security-policy"
content="frame-src https://xxx.xxx.xxx; script-src https://xxx.xxx.xxx">
這裏的content定義了兩個安全策略：frame-src和script-src，它們分別定義的是iframe（frame）和script的域地址，如果對應的資源不是來自指定的域，瀏覽器就會拋出錯誤，禁止加載這些資源，這樣可以有效防止跨站點攻擊。
標準定義了約三十個安全策略選項，這裏不再一一詳述，感興趣的請參閱mdn開發者文檔：Content-Security-Policy。
(2). content-type
在HTML5中被<meta charset='utf-8'>所取代，並且mdn開發者文檔中指出，在使用該屬性時，對應的值必須是"text/html; charset=utf-8"。
(3). default-style
規定要使用的預定義的樣式表。它的值必須與某個link或style標籤的title一致，以指定該樣式表作爲當前文檔的默認樣式表。如：
<meta http-equiv="default-style" content="preferred stylesheet">
<link href='' rel='stylesheet' title='preferred stylesheet'>
(4). x-ua-compatible
指定瀏覽器所要啓用的內核版本。
國內很多瀏覽器都有多個內核，比如360瀏覽器的極速模式使用的是谷歌內核，而兼容模式則使用IE內核，另外在兼容模式下，也可以設定不同的IE版本。
下面的標籤要求在兩種模式下分別啓用谷歌和IE的最新版本：
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
(5). refresh
定義頁面的刷新策略。
如果對應的content是一個整數，那麼頁面會在指定的時間間隔（秒）後重新加載；如果content的值是整數後面跟了;url=xxx，並且這個url是個合法的值，那麼瀏覽器會在指定的秒數後跳轉到該地址。如：
<!--頁面會在20秒後刷新-->
<meta http-equiv="refresh" content="20">
<!--頁面會在20秒後跳轉到百度-->
<meta http-equiv="refresh" content="20;url=https://www.baidu.com">
3. name
同http-equiv一樣，name也需要配合content屬性一起使用。與http-equiv不同的是，由name描述的屬性與響應頭的字段沒有對應關係，它們更多的是描述文檔本身。
name的常見取值包括：
- application-name，定義正運行在該網頁上的網絡應用名稱。
- author，文檔的作者，可以用自由的格式去定義。
- description，定義頁面內容的簡短和精確的描述，某些瀏覽器（如Firefox和Opera）會將其作爲書籤頁的默認描述。
- generator，生成頁面的軟件的標識符。
- keywords，由逗號分隔的頁面內容相關的關鍵詞。
- referrer ，控制所有從該文檔發出的 HTTP 請求中HTTP Referer 首部的內容。
- creator，文檔的創建人。
- googlebot，谷歌專用的爬蟲字段。
- publisher，文檔的發佈人。
- robots ，定義搜索引擎或抓取工具的行爲。
- slurp，雅虎專用的抓取工具行爲定義。
- viewport，定義移動端的初始視口大小。
注意，標準沒有嚴格限制name必須取上述值，你可以用它來描述任何你想描述的元信息，比如：
<!-- 一下引自百度 -->
<meta name="theme-color" content="#2932e1">
<meta name="baidu-site-verification" content="15CGsqM7Xb">
<!-- 以下引自淘寶官網 -->
<meta name="spm-id" content="a21bo">
<meta name="aplus-xplug" content="NONE">
(1). application-name
定義的是當前應用的名稱，一般用於幫助瀏覽器區分不同的網絡應用。不同於title，這個屬性的值對用戶不可見。簡單的應用不應該使用這個屬性。
(2). author、creator、publisher
分別是當前文檔的作者、創建人和發佈人，在使用這三個值時，你可以定義多個meta，如：
<meta creator="張三">
<meta creator="李四">
(3). generator
指明瞭生成當前頁面的軟件的標識符，目前暫未用到過，不做詳述。
(4). keywords
定義一組與當前網頁相關的關鍵詞，主要用於SEO（搜索引擎優化）。它的格式如下：
<meta name="keywords" content="關鍵詞1, 關鍵詞2">
(5). referrer
控制所有從該文檔發出的 HTTP 請求中HTTP Referer 首部的內容。它對應的content值應該是下表中的一個，用於定義不同的行爲（表格來自mdn）：
| content值 | 作用 |
|---|---|
| no-referrer | 不要發送 HTTP Referer 首部 |
| origin | 發送當前文檔的 origin |
| no-referrer-when-downgrade | 當目的地是安全的（https->https），則發送origin作爲referrer；如果目的地不安全（https->http），則不發送referrer。這是默認行爲。 |
| origin-when-crossorigin | 在同源請求下，發送完整的URL (不含查詢參數) 作爲referrer；否則僅發送當前文檔的 origin作爲referrer |
| unsafe-URL | 在同源請求下，發送完整的URL (不含查詢參數)作爲referrer；跨域時不發送 |
(6). robots
該參數定義的是搜索引擎或抓取工具的行爲，此時content的應是下列的值（多個值用逗號隔開）：
| 值 | 說明 | 瀏覽器支持性 |
|---|---|---|
| index | 允許搜索引擎對當前頁面建立索引 | ALL |
| noindex | 禁止搜索引擎對當前頁面建立索引 | ALL |
| follow | 允許搜索引擎爬取當前頁面的鏈接對應的其他頁面。比如某個站點的首頁包含多個鏈接，可以鏈接到站點內的其他頁面，這時引擎在爬取首頁時，會繼續爬取首頁指向的那些頁面 | ALL |
| nofollow | 禁止搜索引擎爬取頁面內的鏈接頁面 | ALL |
| noodp | 禁止使用開放式目錄（Open Directory Project，詳見百度百科 - 開放式目錄） | Google, Yahoo, Bing |
| noarchive | 禁止搜索引擎緩存當前頁面的內容 | Google, Yahoo |
| nosnippet | 禁止搜索引擎在搜索結果頁面中保留任何描述 | |
| noimageindex | 禁止搜索引擎將當前頁面作爲索引圖像的引用頁 | |
| noydir | 禁止使用雅虎目錄，雅虎目錄是開放式目錄的前驅 | Yahoo |
| nocache | 等價於noarchive，僅用於Bing | Bing |
如希望搜索引擎爬取當前頁內包含的鏈接頁面，但不對當前頁建立索引：
<meta name="robots" content="noindex, follow">
slurp與robots含義是相同的，但僅用於Slurp – Yahoo Search的抓取工具。
(7). viewport
它提供有關視口初始大小的提示，僅供移動設備使用。此時content的可選值包括：
| 選項 | 值 | 描述 |
|---|---|---|
| width | 一個正整數或特殊的字符串‘device-width’ | 值爲正整數時，是以像素(px)爲單位的頁面初始寬度；當爲’device-width’時，表示頁面初始寬度爲設備寬度 |
| height | 一個正整數或者字符串 device-height | 同上，定義頁面初始高度 |
| initial-scale | 一個介於0.0到1.0的正數 | 定義設備寬度與視口寬度的百分比，即視口的縮放比例 |
| maximum-scale | 一個0.0到10.0的正數 | 定義縮放的最大值，當達到這個比值時，用戶無法繼續放大 |
| minimum-scale | 一個0.0到10.0的正數 | 定義縮放的最小值，當達到這個比值時，用戶無法繼續縮小。minimum-scale必須小於maximum-scale，否則可能造成無法預知的異常 |
| user-scalable | yes或no | 是否允許用戶縮放頁面，默認爲yes |
以下是一個移動設備常用的值：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
表示初始等於設備寬度，不縮放。
viewport的規範程度雖然不高，但大多數移動瀏覽器都尊重這一聲明，因此具有實際上的統治地位。
4. content
content需要結合http-equiv或name屬性使用，上面已經介紹了其用法，這裏不再贅述。
總結
meta標籤設計的主要目的是讓機器（如搜索引擎）更好地理解網頁。隨着SEO（搜索引擎優化）的盛行，meta的使用也變得越來越重要。此外，HTML5也使用meta描述頁面的微數據，meta的價值進一步提高。