在您學習的文件結構一節中，幾乎永遠可以在 HTML 文件的 <head> 中找到這些元件。雖然 <head> 中的所有內容 (包括 <title>、<link>、<script>、<style> 和較少使用的 <base>) 其實是「中繼資料」，但中繼資料的 <meta> 標記不能以這些其他元素表示。
這個規格包含數種中繼類型，還有許多其他許多應用程式支援的中繼類型，但未包含於任何官方規格。本節將探討規格中包含的屬性和值、常見的中繼名稱和內容值，以及幾個對 WHATWG 或 W3C 未正式定義的使用者體驗極為實用的中繼類型。
重新造訪的必要 <meta> 標記
讓我們複習先前涵蓋的兩個必要的 <meta> 標記 (字元集宣告和可視區域中繼標記)，並進一步瞭解過程中的 <meta> 標記。
<meta> 元素的 charset 屬性是以獨特的方式呈現。字元集中繼資料原本是以 <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" /> 寫入，但許多開發人員將 content 屬性誤植為 content="text/html" charset="<characterset>"，導致瀏覽器開始支援字元集做為屬性。目前已經以 <meta charset="<charset>" /> 形式標準化，其中針對 HTML，<charset> 是不區分大小寫的字串「utf-8」。
您可能已經注意到用於包含 http-equiv 屬性的原始字元集中繼宣告。此為「http-evalent」的縮寫，因為中繼標記基本上會複製 HTTP 標頭中可設定的內容。除了 charset 例外狀況以外，凡是 WHATWG HTML 規格定義的其他中繼標記，都會包含 http-equiv 或 name 屬性。
官方定義的中繼標記
中繼標記主要分為兩種類型：pragma 指令、http-equiv 屬性 (例如使用的字元集中繼標記) 和命名的中繼類型，例如含有 name 屬性的可視區域中繼標記，以及我們在「文件結構」一節中提及的 name 屬性。name 和 http-equiv 中繼資料類型都必須包含 content 屬性，用於定義所列中繼資料類型的內容。
Pragma 指令
http-equiv 屬性的值是 pragma 指令。這些指令會說明如何剖析網頁。當您無法直接設定 HTTP 標頭時，可以使用支援的 http-equiv 值來設定指令。
規格定義了七個 pragma 指令，其中大多數的指令都可以設定。舉例來說，雖然您可以使用 <meta http-equiv="content-language" content="en-us" /> 加入語言指令，但我們先前已改為使用 HTML 元素上的 lang 屬性進行討論，如下所示。
最常見的 pragma 指令為 refresh 指令。
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
雖然您可以將指令設為以 content 屬性中設定的秒數為單位重新整理，甚至可以重新導向至不同網址。在使用者未明確提出要求的情況下，重新整理及重新導向內容不僅容易使用，也會對無障礙體驗造成負面影響。不覺得文章標題到正中央時，網頁重設了嗎？想像中發生認知或視力問題。如果您要透過重新導向設定重新整理，請確認使用者有足夠的時間可閱讀網頁，並提供一個可完成程序的連結，並視需要提供「停止時鐘」及防止重新導向作業的按鈕。
我們不會將這類內容加入網站，因為除了乾擾訪客以外，沒有理由暫停使用者工作階段。
最實用的 pragma 指令為 content-security-policy，可讓您為目前的文件定義內容政策。內容政策主要會指定允許的伺服器來源和指令碼端點，有助於防範跨網站指令碼攻擊。
<meta http-equiv="content-security-policy" content="default-src https:" />
如果您無權變更 HTTP 標頭 (或無法變更)，請參閱這裡的 content-security-policy 指令以空格分隔的內容值清單。
已命名的中繼標記
通常應加入具名中繼資料。加入 name 屬性，並將屬性值做為中繼資料的名稱。與 pragma 指令相同，content 屬性為必要屬性。
name 屬性是中繼資料的名稱。除了 viewport 以外，您可能還要加入 description 和 theme-color，但不要加入 keywords。
關鍵字
搜尋引擎最佳化銷售員專用於濫用關鍵字中繼標記，在它們中加入逗號分隔的垃圾字詞清單，而不是相關關鍵字清單，因此搜尋引擎不再需要將此中繼資料視為實用。不必浪費時間、精力或位元組。
說明
不過，description 值對搜尋引擎最佳化很有用：說明內容值經常是搜尋引擎在搜尋結果中顯示的網頁標題下方顯示的值。部分瀏覽器 (例如 Firefox 和 Opera) 會使用此名稱做為已加入書籤網頁的預設說明。說明必須為網頁內容的簡短正確摘要。
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
如果說明的後半部對您沒有意義，表示您可能沒看過電影《Zoolander》這部電影。
機器人
如果你不希望搜尋引擎為網站建立索引，可以請搜尋引擎檢索。<meta name="robots" content="noindex, nofollow" /> 會通知漫遊器不要為網站建立索引，也不會追蹤任何連結。機器人應該會傾聽這項要求，但不需要依法提出要求。如要要求為網站和追蹤連結建立索引，則不需加入 <meta name="robots" content="index, follow" />，因為 HTTP 標頭另有指示。
<meta name="robots" content="index, follow" />
主題色彩
theme-color 值可用來定義顏色，以便自訂瀏覽器介面。支援瀏覽器和作業系統會使用 content 屬性的顏色值，讓您為標題列、分頁列或其他 Chrome 元件上色的使用者代理程式提供建議顏色。這個中繼標記特別適合漸進式網頁應用程式。不過，如果您加入的是 PWA 所需的資訊清單檔案，則可改為在該檔案中加入主題顏色。不過，在 HTML 中加以定義，可確保在算繪前立即找到顏色，這可能會比等待資訊清單更快發生。
如要將主題顏色設為網站背景顏色的藍色，請加入：
<meta name="theme-color" content="#226DAA" />
主題顏色中繼標記可以包含 media 屬性，以便根據媒體查詢設定不同主題色彩。media 屬性只能放在這個中繼標記中，所有其他中繼標記會忽略該屬性。
還有數個其他 name 中繼值，不過我們討論的是最常見的值。除了為不同的媒體查詢宣告不同的 theme-color 值以外，每個中繼標記只能擇一使用。如果您需要加入多種類型的中繼標記來支援舊版瀏覽器，這些舊值應置於較新的值之後，因為使用者代理程式會讀取連續規則，直到找到相符的項目為止。
開啟圖表
Open Graph 和類似的中繼標記通訊協定可用來控管社群媒體網站 (例如 Twitter、LinkedIn 和 Facebook) 顯示內容連結的方式。如果未加入這個參數，社群媒體網站會正確擷取網頁標題和說明中繼標記中的說明，顯示的資訊會與搜尋引擎呈現的相同，不過您可以刻意設定要將連結張貼至網站時，使用者要看到的內容。
在 Facebook 或 Twitter 上張貼 MachineLearningWorkshop.com 或 web.dev 的連結後，將會出現圖片、網站標題及網站說明的資訊卡。整張資訊卡都是你所提供網址的超連結。
Open Graph 中繼標記各有兩種屬性：property 屬性 (而非 name 屬性)，以及該屬性的內容或值。property 屬性並未在官方規格中定義，但支援 Open Graph 通訊協定的應用程式廣泛支援這類屬性。建立 property 這類「新」屬性可確保為通訊協定屬性建立的屬性值不會與 name 或 http-equiv 屬性的值日後發生衝突。
建立 Facebook 媒體資訊卡：
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
包含貼文標題。這個標題通常會顯示在圖片下方和說明上方。說明最多可以使用三句簡述您的貼文。這會顯示在 og:title 中定義的標題後方。為要顯示的橫幅圖片提供絕對網址，包括 https:// 通訊協定。在 HTML 中加入圖片時，請務必為圖片加上替代文字說明，即使圖片會顯示在其他位置也沒關係。如果是 Open Graph 社群媒體資訊卡，請將 alt 定義為 og:image:alt 資源的內容值。您也可以使用 og:url 加入標準網址。
這些中繼標記都是在 Open Graph 通訊協定中定義。這個值應為您希望第三方網頁應用程式顯示的內容。
其他社群媒體也有類似自己的語法，例如 Twitter 資訊卡標記。這樣就能根據連結的顯示位置提供不同的體驗，或是在網址結尾加入參數來啟用連結追蹤功能。
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
在 Twitter 的案例中，確保 name 屬性的值不會與日後規格相衝突，特別是在 Twitter 卡片資料中使用新屬性 (例如 Open Graph 中的 property 屬性) 時，所有名稱值的前面都會加上 twitter:。
你可以在 Twitter 和 Facebook 上查看社群媒體資訊卡的外觀。
您可以為不同的社群媒體網站指定不同的資訊卡圖片、名稱和說明，也可設定不同的連結參數。例如，https://perfmattersconf.com 會根據網址的參數，為 og:image、og:title 和 og:description 設定不同的值。
如果你在 Twitter 的卡片驗證工具中輸入 https://perfmattersconf.com?name=erica 和 https://perfmattersconf.com?name=melanie，就會看到這兩張不同的卡片，即使這兩個卡片都連結至同一個會議首頁也一樣。
其他實用的中繼資訊
如果有人將您的網站加入書籤、將網站加到主畫面，或是您的網站為漸進式網頁應用程式，或是可在離線或未顯示瀏覽器 Chrome 功能的情況下運作，您可以為行動裝置的主畫面提供應用程式圖示。
您可以使用 <link> 標記連結至要使用的啟動映像檔。以下範例說明如何透過媒體查詢加入幾張圖片：
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
如果您的網站或應用程式支援網頁應用程式，表示該網站可以在極少數的使用者介面 (例如沒有返回按鈕) 的情況下獨立運作，您也可以使用中繼標記告知瀏覽器以下事項：
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
請僅在應用程式確實提供相關功能的情況下，才納入這類內容。如果您的網站不存在，那麼您就是為最一開始的支持者 (也就是將您的網站加入主畫面的使用者) 設定，帶來更負面的使用者體驗。你一定會失去他們的愛！
如果有人將您的應用程式圖示儲存到小型裝置的主畫面，建議您為作業系統提供一個簡短名稱，後者不會佔用小型裝置的主畫面。您可以透過加入中繼標記或使用網頁資訊清單檔案來執行這項操作。以下示範中繼標記方法：
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
您探索了幾種能延長標頭的中繼標記。如果確實建構網頁應用程式支援離線的漸進式漸進式網頁應用程式，而不用加入這兩個額外中繼標記，那麼可以更簡潔且簡潔的方式，在網頁資訊清單檔案中加入 short_name: MLW。
資訊清單檔案可以避免含有完整 <link> 和 <meta> 標記的標頭。我們可以建立資訊清單檔案，一般稱為 manifest.webmanifest 或 manifest.json。接著，我們會使用便利的 <link> 標記，將 rel 屬性設為 manifest，並將 href 屬性設為資訊清單檔案網址：
<link rel="manifest" href="/mlw.webmanifest" />
本系列主要討論 HTML，但建議您查看 web.dev 的漸進式網頁應用程式課程或 MDN 網頁應用程式資訊清單說明文件。
現在您的 HTML 看起來會像這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
標題很長，但也完成了
<head> 已大致上完成，因此您可以進一步探索語意 HTML。
隨堂測驗
測驗您對中繼資料的相關知識
重新整理 pragma 指令。
Open Graph 中繼標記。