meta 標籤 詳解
阿新 • • 發佈：2018-10-31
定義與用法
- <meta> 元素可提供有關頁面的元資訊（meta-information），通常用於指定網頁的描述，關鍵詞，檔案的最後修改時間，作者、搜尋引擎和更新頻度及其他元資料。
- 元資料可以被使用瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 Web 服務呼叫。
- <meta> 標籤位於文件的頭部，不包含任何內容。元資料不會顯示在客戶端，但是會被瀏覽器解析。
- <meta> 標籤的屬性定義了與文件相關聯的名稱/值對。
- <meta> 標籤永遠位於 head 元素內部。
- 元資料總是以名稱/值的形式被成對傳遞的。
- meta 標籤可以出現多次，如果沒有提供 name 屬性，那麼名稱/值對中的名稱會採用 http-equiv 屬性的值。
- 在 HTML 中 <meta> 標籤沒有結束標籤；在 XHTML 中 <meta> 標籤必須包含結束標籤。
- 如下所示：
<head> <meta name="description" content="免費線上教程"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="runoob"> <meta charset="UTF-8"> </head>
meta 標籤屬性
必需的屬性：
| 屬性 | 值 | 描述 | 版本支援 |
|---|---|---|---|
| content | some_text | 定義與 http-equiv 或 name 屬性相關的元資訊 | 4,5 |
可選的屬性：
| 屬性 | 值 | 描述 | 版本支援 |
|---|---|---|---|
| charset |
character encoding |
定義文件的字元編碼。 |
5 |
|
把 content 屬性關聯到 HTTP 頭部。 | 4,5 | |
| name |
|
把 content 屬性關聯到一個名稱。 | 4,5, |
| scheme | some_text | 定義用於翻譯 content 屬性值的格式。 | 4 |
name 屬性
- name 屬性提供了 content 中鍵值對的名稱。HTML 和 XHTML 標籤都沒有指定任何預先定義的 <meta> 名稱。通常情況下，您可以自由使用對自己和源文件的讀者來說富有意義的名稱。
- "keywords" 是一個經常被用到的名稱，它為文件定義了一組關鍵字，某些搜尋引擎在遇到這些關鍵字時，會用這些關鍵字對文件進行分類。
- 類似這樣的 meta 標籤可能對於進入搜尋引擎的索引有幫助：
<meta name="keywords" content="HTML,ASP,PHP,SQL">
- 如果沒有提供 name 屬性，那麼 content 中鍵值對的名稱會採用 http-equiv 屬性的值。
http-equiv 屬性
- 使用帶有 http-equiv 屬性的 <meta> 標籤時，伺服器將把名稱/值對新增到傳送給瀏覽器的內容頭部。
- 當伺服器向瀏覽器傳送文件時，會先發送許多名稱/值對，雖然有些伺服器會發送許多這種名稱/值對，但是所有伺服器都至少要傳送一個：content-type:text/html，這將告訴瀏覽器準備接受一個 HTML 文件。
如： <meta http-equiv="charset" content="iso-8859-1"> <meta http-equiv="expires" content="31 Dec 2008"> 這樣傳送到瀏覽器的頭部就應該包含： content-type: text/html charset:iso-8859-1 expires:31 Dec 2008
content 屬性
- content 屬性提供了名稱/值對中的值。該值可以是任何有效的字串。
- content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。
name viewport 移動端優化
- 可以參考：viewport 深入理解（https://www.runoob.com/w3cnote/viewport-deep-understanding.html）
- viewport 屬性用於移動端顯示優化，特別是手機等裝置上顯示時，加上此屬性和不加完全是兩回事，加上之後網頁看起來會更加像手機上的APP頁面。
- 常用 content 鍵值對如下：
| width | 設定layout viewport 的寬度，為一個正整數，或字串"width-device" |
| initial-scale | 設定頁面的初始縮放值，為一個數字，可以帶小數 |
| minimum-scale | 允許使用者的最小縮放值，為一個數字，可以帶小數 |
| maximum-scale | 允許使用者的最大縮放值，為一個數字，可以帶小數 |
| height | 設定layout viewport 的高度，這個屬性對我們並不重要，很少使用 |
| user-scalable | 是否允許使用者進行縮放，值為 "no" 或 "yes", no 代表不允許，yes 代表允許 |
-
使用示例如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
HTML 4 與 5 差異
- HTML5 不支援 scheme 屬性。
- 在 HTML5 中，有一個新的 charset 屬性，它使字符集的定義更加容易：
HTML 4.01： <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5： <meta charset="UTF-8">
常用例項
例項 1 - 定義文件關鍵詞，用於搜尋引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
例項 2 - 定義web頁面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">
例項 3 - 定義頁面作者：
<meta name="author" content="Hege Refsnes">
例項 4 - 每30秒重新整理頁面：
<meta http-equiv="refresh" content="30">
例項 5 - 10 秒後重定向到 http://www.w3school.com.cn 頁面：
<meta http-equiv="Refresh" content="10;url=http://www.w3school.com.cn" />
例項6 - 移動端頁面顯示優化
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">