現在的 HTML meta 標籤怎麼寫
整理現在一個新頁面該有的 meta 標籤骨架——viewport 補上 viewport-fit=cover 因應瀏海與圓角螢幕、color-scheme 讓表單控制項跟著深色模式換色、theme-color 決定行動瀏覽器工具列顏色，以及基本的 SEO 與 Open Graph 標籤。
W
早期 HTML5 頁面骨架裡的 charset 跟 viewport 到現在都還適用，X-UA-Compatible 則已經沒有意義。現在一個正式頁面通常還會再多幾行。
基本骨架
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#000000">
<title>頁面標題</title>
<meta name="description" content="這個頁面在做什麼，一到兩句話">
<link rel="canonical" href="https://example.com/current-page">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>
lang 屬性：不要漏掉
<html lang="zh-Hant">
lang 不是新東西，但很常被漏掉。它告訴螢幕閱讀器該用哪種語言的發音規則朗讀內容，也讓瀏覽器的翻譯功能、拼字檢查抓對語言。中文頁面常見的寫法是 zh-Hant（繁體）或 zh-Hans（簡體），不要只寫籠統的 zh。
viewport：多了 viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
width=device-width, initial-scale=1.0 這兩個值跟以前一樣沒變。新加的 viewport-fit=cover 是因應瀏海、藥丸挖孔、圓角螢幕這類「不是傳統矩形」的手機螢幕——沒有這個設定，頁面內容會自動避開瀏海周圍的安全區域，畫面兩側或底部可能留下不必要的黑邊。加上 cover 之後，頁面可以延伸到整個螢幕，但你要自己用 CSS 的 env(safe-area-inset-*) 補回安全邊界：
.bottom-nav {
padding-bottom: env(safe-area-inset-bottom);
}
color-scheme：讓原生控制項跟著換色
<meta name="color-scheme" content="light dark">
沒有這行，就算你的 CSS 已經做好深色模式，捲軸、<select> 下拉選單、<input type="date"> 這類瀏覽器原生渲染的控制項，在深色頁面上還是可能保持刺眼的白色底。加上這行，等於告訴瀏覽器「這個頁面支援淺色跟深色兩種模式」，原生控制項會依系統或頁面目前的模式自動換色。
theme-color：行動瀏覽器工具列顏色
<meta name="theme-color" content="#000000">
決定手機瀏覽器網址列、狀態列背景的顏色，讓網頁跟系統介面融合在一起。深淺色模式想給不同顏色，可以放兩個標籤，用 media 屬性區分：
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
基本 SEO：description 與 canonical
<meta name="description" content="這個頁面在做什麼，一到兩句話">
<link rel="canonical" href="https://example.com/current-page">
description 常被搜尋引擎直接拿來當搜尋結果的摘要文字，寫清楚一點比讓 Google 自己從內文亂抓一段划算。canonical 在同一份內容有多個網址能存取時（例如帶不帶查詢字串、有沒有結尾斜線），告訴搜尋引擎哪一個才是「正式」的網址，避免內容被判定為重複而分散排名。
要分享到社群時再加：Open Graph
<meta property="og:title" content="頁面標題">
<meta property="og:description" content="頁面描述">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/current-page">
網址被貼到 Facebook、LINE、Slack 這類支援 Open Graph 的平台時，會依這幾個標籤產生預覽卡片（標題、描述、縮圖）。沒有設定時，平台通常會退而求其次亂抓頁面內容，效果不可控，正式上線的頁面值得把這幾行補齊。
對照表
| 2020 年常見寫法 | 現在 | |
|---|---|---|
| viewport | width=device-width, initial-scale=1.0 | 多了 viewport-fit=cover |
| IE 相容性 | X-UA-Compatible | 已無意義，可移除 |
| 深色模式 | 沒有標準做法 | color-scheme |
| 行動瀏覽器介面色 | 沒有 | theme-color |
| 社群分享預覽 | 沒有 | Open Graph 標籤 |