如何使用 meta 標籤
theme: nico highlight: default
攜手創作，共同成長！這是我參與「掘金日新計劃 · 8 月更文挑戰」的第6天，點選檢視活動詳情
介紹
<meta> 元素用來表示不能由其它 HTML 元相關（meta-related）元素（(<base>、<link>、<script>、<style> 或 <title>）之一表示的資料資訊，元素標籤內不包含任何內容。
具有不同屬性的多個 <meta> 元素可以在同一頁面上使用。<meta> 元素內容不會顯示在頁面上，但是對於機器是可讀的，可用於模擬 HTTP 響應頭欄位的使用，頁面描述、關鍵字用於搜尋引擎優化，或其他 web 服務。
屬性
<meta> 標籤的屬性定義了與文件相關聯的名稱/值對，元資料總是以名稱/值的形式被成對傳遞的。
對於 HTML 4.01 和 XHTML 1.0，有四個有效的屬性：content、http-equiv、name 和 scheme。在 HTML 5 下，現在有五個有效的屬性，添加了 charset。http-equiv 用於模擬 HTTP 標題，並用 name 來嵌入元資料。無論哪種情況，語句的值都包含在 content 屬性中，除非給出 charset，否則這是唯一必需的屬性。
<meta> 標籤通常位於 <head> 區域內，但在 HTML5 中不再需要 <head> 標籤。
屬性 | 值 | 描述
-- | -- | --
charset| character_set| 規定 HTML 文件的字元編碼。
content| text| 定義與 http-equiv 或 name 屬性相關的元資訊。
http-equiv| content-security-policy
content-type
default-style
refresh| 把 content 屬性關聯到 HTTP 頭部。
name| application-name
author
description
generator
keywords
viewport| 把 content 屬性關聯到一個名稱。
scheme| format/URI| 定義用於翻譯 content 屬性值的格式。
name 屬性
name 屬性提供了名稱/值對中的名稱。HTML 和 XHTML 標籤都沒有指定任何預先定義的 <meta> 名稱。通常情況下，您可以自由使用對自己和源文件的讀者來說富有意義的名稱。
keywords 是一個經常被用到的名稱。它為文件定義了一組關鍵字。某些搜尋引擎在遇到這些關鍵字時，會用這些關鍵字對文件進行分類。
類似這樣的 meta 標籤可能對於進入搜尋引擎的索引有幫助：
html
<meta name="keywords" content="HTML,ASP,PHP,SQL">
如果沒有提供 name 屬性，那麼名稱/值對中的名稱會採用 http-equiv 屬性的值。
http-equiv 屬性
http-equiv 屬性為名稱/值對提供了名稱。並指示伺服器在傳送實際的文件之前先在要傳送給瀏覽器的 MIME 文件頭部包含名稱/值對。
當伺服器向瀏覽器傳送文件時，會先發送許多名稱/值對。雖然有些伺服器會發送許多這種名稱/值對，但是所有伺服器都至少要傳送一個：content-type:text/html。這將告訴瀏覽器準備接受一個 HTML 文件。
使用帶有 http-equiv 屬性的 <meta> 標籤時，伺服器將把名稱/值對新增到傳送給瀏覽器的內容頭部。例如，新增：
html
<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 屬性一起使用。
scheme 屬性
scheme 屬性用於指定要用來翻譯屬性值的方案。此方案應該在由 <head> 標籤的 profile 屬性指定的概況檔案中進行了定義。
HTML 4.01 與 HTML5之間的差異
在 HTML5 中，有一個新的 charset 屬性，它使字符集的定義更加容易：
- HTML 4.01：<meta http-equiv="content-type" content="text/html; charset=UTF-8">
- HTML5：<meta charset="UTF-8">
示例
- 定義創作者和修改資訊： ```html
2. 定義文件關鍵詞和頁面描述，用於搜尋引擎：html
3. 下面示例演示 3 秒後，重定向到另外一個地址，如果 `url` 為空則會重新整理當前網頁：html
4. 在文件級別上設定淺色模式與深色模式的工作方式與 CSS `color-scheme` 屬性允許單個元素指定其首選和接受的配色方案相同：html
5. 為當前頁面定義內容策略，例如，已經存在的一個網站，用了太多內聯程式碼修復問題，而且想確保資源（如圖片、字型、指令碼等）只從 `https` 載入，並且禁止外掛：html
6. 微前端需要按功能拆分多個子應用，主應用在載入的過程中經常出現載入失敗的問題。因為 `https` 地址中，如果載入了 `http` 資源，瀏覽器將認為這是不安全的資源，將會預設阻止。後來在文件中添加了以下 `<meta>` 標籤完美解決：html
7. 禁止瀏覽器從本地機的快取中調閱頁面內容，設定後，一旦離開網頁就無法從 Cache 中再調出：html
8. 定義搜尋引擎機器人(不包括惡意爬蟲)對此頁面的處理行為：html
```
index：允許機器人索引此頁面（預設）。follow：允許機器人跟隨此頁面上的連結（預設）。noindex：要求機器人不索引此頁面。nofollow：要求機器人不跟隨此頁面上的連結。all：與 index, follow 相同。none：與 noindex, nofollow 相同。noarchive：要求搜尋引擎不快取頁面內容。nocache：noarchive 的替代名稱。nosnippet：防止在搜尋引擎結果中顯示頁面的任何描述。noimageindex：要求此頁面不顯示為圖片索引的引用頁面。- 典型的移動優化網站會設定
<meta>標籤視口寬度等於螢幕寬度，這樣可以避免當視口寬度大於螢幕寬度時，出現橫向滾動條：html <meta name="viewport" content="width=device-width, initial-scale=1"><meta>標籤的viewport的屬性包括：width：視口的寬度，可以設定為特殊值device-width，數字（1-10000），或100vw,100%這樣的有效值。負值：忽略。height：視口的高度，可以設定為特殊值device-height，數字（1-10000），或100vh,100%這樣的有效值。負值：忽略。initial-scale：控制第一次載入頁面時的縮放級別。最小值：0.1。最大值：10。預設值：1。負值：忽略。minimum-scale：控制頁面上允許的縮小程度。最小值：0.1。最大值：10。預設值：0.1。負值：忽略。maximum-scale：控制頁面上允許的放大程度。最小值：0.1。最大值：10。預設值：10。負值：忽略。user-scalable：控制頁面上是否允許放大和縮小操作。有效值：0、1、yes 或 no。預設值：1，與 yes 相同。將該值設定為 0（與否相同），將違反 Web 內容可訪問性指南 (WCAG)。