很多工程師的 <head> 是「要用到什麼加什麼」慢慢長出來的——favicon 加了忘了加 manifest、OG 標籤加了忘了 canonical、preconnect 沒有但一堆用不到的 meta。
這篇把 <head> 裡該有的東西分成四層，逐一說清楚每個標籤是做什麼的，最後附可直接複製的模板。
第一層：瀏覽器運作必要項目
這四個少了任何一個，頁面就會出問題。
<!-- 1. 字元編碼：越早越好，必須在 <title> 前面 -->
<meta charset="UTF-8">
<!-- 2. 響應式必要：沒有這行，手機瀏覽器會縮放成桌面版 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 3. IE 相容模式（2024 仍建議保留，某些企業環境還在用 IE/Edge legacy）-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 4. 頁面標題：SEO 最重要的單一 meta，每頁不同，60 字以內 -->
<title>頁面標題 | 網站名稱</title>charset 一定要是頁面的第一個 meta，瀏覽器在解析到它之前如果遇到非 ASCII 字元會猜編碼，猜錯就亂碼。
第二層：SEO 與爬蟲
<!-- 頁面描述：搜尋結果的摘要文字，150 字以內，每頁不同 -->
<meta name="description" content="這頁的摘要說明，會出現在搜尋結果下方。">
<!-- 標準 URL：告訴爬蟲「這頁的正確 URL 是這個」，防止重複內容 -->
<link rel="canonical" href="https://example.com/this-page/">
<!-- 爬蟲指示：預設 index, follow，有需要才指定 noindex / nofollow -->
<meta name="robots" content="index, follow">canonical 是最常被遺漏的。同一篇文章如果有 ?utm_source=... 的變體 URL，沒有 canonical 爬蟲會把它們當不同頁面，分散權重。
第三層：社群分享與品牌識別
Open Graph（Facebook、LINE、大部分平台）
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/this-page/">
<meta property="og:title" content="頁面標題">
<meta property="og:description" content="分享時顯示的描述文字">
<meta property="og:image" content="https://example.com/og-image.jpg">
<!-- OG 圖片建議 1200×630px，< 1MB -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="網站名稱">
<meta property="og:locale" content="zh_TW">Twitter Card
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="頁面標題">
<meta name="twitter:description" content="分享描述">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<!-- 有 Twitter 帳號才加 -->
<meta name="twitter:site" content="@your_handle">OG 跟 Twitter Card 的 title / description / image 如果一樣可以共用，但 Twitter 不讀 og: 前綴，所以兩組都要寫。
Favicon 與 PWA manifest
<!-- 現代瀏覽器用 SVG favicon，檔案小、無限縮放 -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- 舊瀏覽器 fallback -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- iOS Safari 的 home screen icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest（有做 PWA 才加） -->
<link rel="manifest" href="/manifest.json">
<!-- Android Chrome 的 toolbar 顏色 -->
<meta name="theme-color" content="#ffffff">第四層：效能優化（根據需求選用）
<!-- preconnect：提早建立連線，適合第三方資源（字型、CDN） -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- preload：提早載入關鍵資源（hero image、字型檔） -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">
<!-- dns-prefetch：比 preconnect 更輕量，適合非關鍵第三方 -->
<link rel="dns-prefetch" href="https://analytics.example.com">注意：preload 用過頭反而會搶佔頻寬。只給「above the fold 一定用到的資源」加 preload，其餘讓瀏覽器自己排序。
完整模板
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<!-- 第一層：必要 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>頁面標題 | 網站名稱</title>
<!-- 第二層：SEO -->
<meta name="description" content="頁面摘要，150 字以內">
<link rel="canonical" href="https://example.com/this-page/">
<meta name="robots" content="index, follow">
<!-- 第三層：社群 & 品牌 -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/this-page/">
<meta property="og:title" content="頁面標題">
<meta property="og:description" content="分享描述">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="網站名稱">
<meta property="og:locale" content="zh_TW">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="頁面標題">
<meta name="twitter:description" content="分享描述">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#ffffff">
<!-- 第四層：效能（依需求加） -->
<!-- <link rel="preconnect" href="https://fonts.googleapis.com"> -->
<!-- <link rel="preload" href="/hero.webp" as="image"> -->
</head>每頁必須不同的三個東西
| 標籤 | 說明 |
|---|---|
<title> | 每頁獨立，反映頁面主題，60 字以內 |
<meta name="description"> | 每頁獨立，自然語言描述，150 字以內 |
<link rel="canonical"> | 每頁指向自己的正確 URL |
OG 的 title / description / image 也建議每頁不同，但沒有 title / description / canonical 這三個緊迫。
相關文章
- Social Sharing 深入 — og:image 規格、各平台預覽差異、debug 工具
- Schema.org + JSON-LD 實戰 — 結構化資料放在
<head>的<script type="application/ld+json">裡 - i18n 屬性 —
lang、hreflang、dir的正確用法 - Technical SEO — canonical、robots、sitemap 完整說明