33. 中繼資料 (Meta Information)

By /

中繼資料描述文件，而不是構成文件的主要可見內容。

HTML 中的中繼資料通常位於 <head>。它可以識別字元編碼、描述網頁、提供瀏覽器處理指示，以及向搜尋引擎或分享服務提供資訊。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="介紹無障礙 HTML 的入門內容。">
  <title>無障礙 HTML：入門介紹</title>
</head>

<meta> 只是 HTML 中繼資料系統的一部分。相關元素包括 <title>、<link>、<style> 和 <base>。

使用準確描述網頁的中繼資料。並非所有欄位都必須提供，不同工具及服務也不一定以相同方式解讀它們。

33.1 <meta> 元素

<meta> 是空元素，沒有子內容，也沒有結束標籤：

<meta name="author" content="課程開發團隊">

不要寫成：

<!-- 錯誤：meta 是空元素。 -->
<meta name="author">課程開發團隊</meta>

主要屬性支援不同形式的中繼資料：

屬性用途
charset宣告文件的字元編碼
name識別中繼資料名稱
content提供具名中繼資料或處理指示的值
http-equiv指定受支援的瀏覽器處理指示

應選擇適當形式，而不是混合不相關的屬性。

33.2 字元編碼

使用 UTF-8：

<meta charset="utf-8">

將宣告放在 <head> 的開頭附近。完整宣告必須位於文件最初的 1,024 個位元組內。

<!doctype html>
<html lang="zh-Hant-HK">
<head>
  <meta charset="utf-8">
  <title>HTML 課程</title>
</head>
<body>
  <h1>歡迎</h1>
</body>
</html>

另外也應：

  • 使用 UTF-8 儲存檔案。
  • 以適當的 HTTP Content-Type 傳送文件。
  • 避免互相衝突的編碼宣告。

HTML 回應可以使用以下 HTTP 標頭：

Content-Type: text/html; charset=utf-8

字元編碼與自然語言不同：

宣告意思
<meta charset="utf-8">如何將位元組解讀為字元
<html lang="zh-Hant-HK">文件的主要自然語言

兩者不能互相取代。

33.3 網頁標題

雖然 <title> 不是 <meta> 元素，但它是重要的文件中繼資料：

<title>HTML 表單：標籤與控制元素 | 網頁學習</title>

標題通常出現在：

  • 瀏覽器分頁。
  • 書籤。
  • 瀏覽記錄。
  • 搜尋結果，但搜尋引擎可能改寫它。

應使用能識別特定網頁的標題。

避免為所有網頁使用「首頁」或「網站」等籠統標題。

文件標題與可見標題具有不同用途：

<head>
  <title>HTML 表單：標籤與控制元素 | 網頁學習</title>
</head>
<body>
  <h1>標籤與控制元素</h1>
</body>

兩者可以相似，但不必完全相同。

33.4 網頁描述

描述用來概括網頁內容：

<meta
  name="description"
  content="學習如何將標籤與表單控制元素關聯，以及組織相關輸入欄位。"
>

搜尋引擎可能使用這些文字作為搜尋結果摘要，也可能改用網頁內的文字。

有用的描述應：

  • 準確描述內容。
  • 針對特定網頁。
  • 使用清晰、自然的語言。
  • 避免誇張聲稱及堆砌關鍵字。

沒有通用的字元上限能保證完整顯示。摘要長度取決於服務、裝置及搜尋情境。

描述不能取代清晰的可見內容。

33.5 檢視區中繼資料

響應式網頁應使用：

<meta name="viewport" content="width=device-width, initial-scale=1">

這會要求支援的瀏覽器，以裝置寬度作為版面檢視區寬度，並設定初始縮放比例為 1。

它有助響應式 CSS 在流動裝置上按預期運作，但本身不會令網頁變成響應式。

你仍然需要彈性版面、適當尺寸及可閱讀內容。

不要不必要地限制縮放。

避免以下設定：

<!-- 避免限制使用者放大網頁。 -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, user-scalable=no"
>

使用者可能需要放大內容，才能閱讀或操作介面。

33.6 作者與產生工具資訊

非必要的中繼資料可以識別作者或產生網頁的軟件：

<meta name="author" content="課程開發團隊">
<meta name="generator" content="範例靜態網站產生工具">

這些欄位不會建立可見的署名資訊。

如果作者身分對讀者重要，也應提供可見資訊。

沒有必要時，不要公開個人資料或軟件版本資訊。任何能存取文件原始碼的人，都可以閱讀中繼資料。

過往使用的 keywords 欄位，通常對主要搜尋引擎排名沒有幫助：

<meta name="keywords" content="HTML, 表單, 無障礙功能">

不要將時間花在關鍵字清單上，而忽略改善實際網頁。

33.7 搜尋引擎指示

部分搜尋引擎識別 robots 中繼資料：

<meta name="robots" content="noindex">

常見指令包括：

指令一般意圖
noindex不將此頁加入搜尋結果
nofollow要求不跟隨網頁上的連結
nosnippet不顯示文字摘要
noimageindex不將此頁圖片加入索引

不同爬蟲的支援及解讀方式有所不同。

重要限制包括：

  • noindex 不是存取控制。
  • 爬蟲通常需要取得網頁，才能發現該指令。
  • 使用 robots.txt 阻止爬取，可能令爬蟲無法發現 noindex。
  • 不遵守規則的爬蟲可以忽略這些指示。

私人內容應使用身分驗證及授權保護，而不是依靠中繼資料。

非 HTML 資源可以透過伺服器的 X-Robots-Tag HTTP 回應標頭提供適用指示。

33.8 瀏覽器主題與配色方案

theme-color 為支援的瀏覽器介面元素建議顏色：

<meta name="theme-color" content="#005ea8">

它不會設定網頁背景顏色。

color-scheme 宣告文件支援的配色方案：

<meta name="color-scheme" content="light dark">

這可以影響瀏覽器提供的控制元素及其他預設呈現方式。

只宣告網頁實際支援的配色方案。使用 CSS 適當設定網頁樣式，並測試每個支援方案的對比度。

33.9 來源頁面資訊政策

來源頁面中繼資料控制請求所傳送的來源頁面資訊：

<meta name="referrer" content="strict-origin-when-cross-origin">

更嚴格的政策：

<meta name="referrer" content="no-referrer">

應放在 <head> 開頭附近，讓瀏覽器在相關請求之前讀取它。

政策也可以透過 HTTP 回應標頭提供：

Referrer-Policy: strict-origin-when-cross-origin

連結及 iframe 等個別元素，也可以支援自己的 referrerpolicy 屬性。

不傳送來源頁面資訊，不代表請求匿名。目的地仍然可以收到其他資訊，包括請求者的 IP 地址。

33.10 http-equiv 屬性

http-equiv 支援特定瀏覽器處理指示，有時稱為 pragma 指令：

<meta http-equiv="refresh" content="30">

這個例子要求在 30 秒後重新整理。

不過，http-equiv 不是設定任意 HTTP 回應標頭的通用方式。

例如，在 meta 元素中寫入 Set-Cookie 或 Cache-Control，不能可靠地取代伺服器設定。

快取、Cookie 及其他伺服器層級行為，應使用真正的 HTTP 回應標頭。

重新導向與重新整理

meta refresh 可以要求前往另一個頁面：

<meta http-equiv="refresh" content="5; url=course.html">

網頁已搬移時，應優先使用適當的 HTTP 重新導向。

定時重新整理及重新導向可能打斷閱讀、表單輸入及輔助技術操作。如果必須在 HTML 中提供導覽，應加入清晰可見的連結，並避免不必要的時間限制。

33.11 內容安全政策

網頁可以透過中繼資料提供部分內容安全政策（Content Security Policy，CSP）限制：

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; object-src 'none'"
>

不過，透過 meta 提供的政策具有重要限制：

  • 不會追溯保護在它之前已處理的內容。
  • 部分指令不支援這種形式。
  • frame-ancestors 不能透過 meta 元素提供。
  • 不支援透過這種方式提供僅報告模式的 CSP。

如果能控制伺服器，應優先透過 HTTP 回應標頭提供 CSP。

完整政策必須符合應用程式的資源需要。直接複製限制嚴格的範例，可能令程式碼、樣式、字型或嵌入內容失效。

33.12 社交分享中繼資料

分享服務可能使用額外中繼資料建立預覽。

Open Graph 使用 property 屬性作為其中繼資料詞彙的一部分：

<meta property="og:title" content="無障礙 HTML 課程">
<meta
  property="og:description"
  content="學習建立清晰、符合無障礙需要的網頁。"
>
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/course/">
<meta
  property="og:image"
  content="https://example.com/images/course-preview.png"
>
<meta
  property="og:image:alt"
  content="展示課程學習階段的示意圖"
>

這裏的 property 屬於擴充的中繼資料慣例，不是 <meta> 的核心 HTML 專用屬性。

部分服務也識別 Twitter Card 中繼資料：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="無障礙 HTML 課程">
<meta
  name="twitter:description"
  content="學習建立清晰、符合無障礙需要的網頁。"
>
<meta
  name="twitter:image"
  content="https://example.com/images/course-preview.png"
>

以上例子使用佔位 URL。

實際網頁應：

  • 使用公開可存取且適當的 URL。
  • 遵守目標服務的圖片要求。
  • 保持預覽文字與網頁內容一致。
  • 留意服務可能快取預覽或忽略欄位。

分享中繼資料不會在自己的網頁內建立可見預覽。

33.13 使用 <link> 提供相關中繼資料

部分文件關係使用 <link>，而不是 <meta>：

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<link rel="canonical" href="https://example.com/course/">

<link
  rel="alternate"
  hreflang="zh-Hant"
  href="https://example.com/zh/course/"
>
關係用途
icon識別網站或網頁圖示
canonical建議等同內容的首選 URL
配合 hreflang 的 alternate識別相關語言版本

canonical 連結是提示訊號，不是重新導向或存取限制。

同樣，替代語言連結不會翻譯網頁，也不會建立可見的語言選擇介面。

33.14 實用的 Head 區段

以下例子結合常見中繼資料。應將範例 URL 及描述替換為符合實際網頁的值。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>無障礙 HTML 課程 | 網頁學習</title>

  <meta
    name="description"
    content="透過實際例子學習 HTML 結構、表單、圖片及無障礙內容。"
  >

  <meta name="author" content="課程開發團隊">
  <meta name="theme-color" content="#005ea8">
  <meta name="referrer" content="strict-origin-when-cross-origin">

  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="canonical" href="https://example.com/course/">

  <meta property="og:type" content="website">
  <meta property="og:title" content="無障礙 HTML 課程">
  <meta
    property="og:description"
    content="透過實用課程學習建立清晰、符合無障礙需要的網頁。"
  >
  <meta property="og:url" content="https://example.com/course/">
  <meta
    property="og:image"
    content="https://example.com/images/course-preview.png"
  >
</head>

這只是起點，不是必須全部完成的清單。

應因應網頁需要加入中繼資料，而不是只因範本包含它們。

33.15 常見錯誤

錯誤較好的做法
太遲放置編碼宣告放在 <head> 開頭附近
混淆編碼與語言同時宣告 charset 及根元素 lang
所有網頁使用相同標題使用具描述性、針對特定網頁的標題
以為描述一定成為搜尋摘要將它視為建議
不必要地限制縮放保留使用者放大內容的能力
將 noindex 當成私隱保護使用身分驗證及授權
使用 http-equiv 設定任意回應標頭設定真正的伺服器標頭
依靠定時重新導向優先使用 HTTP 重新導向及清晰連結
以為 meta CSP 支援所有指令優先透過回應標頭提供 CSP
在中繼資料發布敏感資訊將中繼資料視為公開內容
沒有替換分享資料的佔位 URL使用真實、可存取的資源 URL
期望中繼資料修復薄弱的網頁內容改善可見內容及結構

本章總結： 中繼資料描述文件，並向瀏覽器及外部服務提供資訊。首先提供位於文件開頭附近的 UTF-8 宣告、有意義的標題及適當檢視區設定，再按需要加入描述、分享欄位及其他中繼資料。安全控制及伺服器層級行為仍應透過適當機制處理。

相關文章

Scroll to Top