SEO 要放哪些 meta 標籤？網頁檔頭標籤完整清單
<head> 裡的標籤不會顯示在畫面上，卻決定了三件對外的事：搜尋結果那三行字長什麼樣、頁面在行動裝置上能不能正常閱讀，以及連結被分享到社群時的預覽卡片。
這一組是投入最少、回報最直接的 SEO 工作，通常只是十幾行標記，卻直接影響點擊率。本篇先盤點全部該放的標籤，各標籤的細節再往下讀。
三類標籤
| 分類 | 負責什麼 | 缺了會怎樣 |
|---|---|---|
| 搜尋結果呈現 | 搜尋結果的標題、摘要、要不要被收錄 | 搜尋引擎自己抓內文湊，或整頁不出現 |
| 行動裝置與編碼 | 手機版面、中文顯示 | 版面爆掉或整頁亂碼 |
| 社群分享預覽 | 分享連結時的卡片標題、描述、縮圖 | 卡片只有一行網址，沒有圖 |
搜尋結果相關標籤
這一組直接決定使用者在搜尋結果頁看到什麼。
| 標籤 | 用途 |
|---|---|
<title> | 搜尋結果的第一行藍字，也是瀏覽器頁籤名稱。 |
description | 搜尋結果標題底下的摘要文字。 |
robots | 控制這一頁要不要被收錄、連結要不要被追蹤。 |
keywords | 已被 Google 淘汰，保留在此說明原因。 |
| favicon | 搜尋結果中網址旁的小圖示。 |
網頁標題
<title> 是整組標籤裡最重要的一個。它同時是搜尋結果的第一行、瀏覽器頁籤的名稱與書籤的預設名稱，而且必須 每頁唯一。
<title>SEO 要放哪些 meta 標籤？網頁檔頭標籤完整清單｜前端工程文件</title>長度、品牌名擺放位置與被搜尋引擎改寫的原因，詳見 網頁標題的寫法 。
網頁描述
description 不是排名訊號，但它是使用者決定要不要點進來的依據，直接影響點擊率。
<meta name="description" content="盤點檔頭裡所有與 SEO 有關的標籤，分成搜尋結果、行動與編碼、社群分享三類。">建議長度與被改寫的判斷邏輯，詳見 網頁描述 meta description 。
索引控制
不希望被收錄的頁面（後台、站內搜尋結果、感謝頁）要主動標記，否則它們會跟正式內容競爭。
<meta name="robots" content="noindex, follow">各指令的組合規則，詳見 索引控制 meta robots 。
關鍵字
這個標籤已經沒有作用
Google 早在 2009 年就公開說明不再採用 keywords。它仍出現在許多網站上多半是慣性，留著不會有壞處，但也不必期待效果。理由與該做的替代見 關鍵字 meta keywords 。
網站圖示
favicon 會出現在搜尋結果的網址旁邊，是品牌識別的一部分。尺寸與格式要求見 搜尋結果的網站圖示 favicon 。
行動裝置與編碼
這兩個標籤缺了不是「效果變差」，而是「整頁壞掉」。
| 標籤 | 用途 |
|---|---|
charset | 宣告字元編碼，中文網站必須是 UTF-8。 |
viewport | 告訴瀏覽器以裝置寬度為基準排版。 |
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">charset 必須出現在檔頭的前 1024 個位元組內，所以慣例放第一行；viewport 則是行動裝置友善的前提。細節分別見 字元編碼 meta charset 與 可視範圍 meta viewport 。
社群分享標籤
搜尋引擎不看這一組，但它決定連結貼到社群時長什麼樣。少了它，一則貼文就只剩一行光禿禿的網址。
| 標籤 | 用途 |
|---|---|
og:title、og:description | 卡片的標題與描述。 |
og:image | 卡片縮圖，建議 1200×630。 |
og:type、og:locale、og:url | 內容類型、語言與正規網址。 |
twitter:card | X 平台的卡片版型。 |
<meta property="og:title" content="SEO 要放哪些 meta 標籤？">
<meta property="og:description" content="盤點檔頭裡所有與 SEO 有關的標籤。">
<meta property="og:image" content="https://example.com/images/seo/meta-og.png">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">完整屬性與快取更新方式見 開放社交關係圖 Open Graph 與 推文卡片 Twitter Card 。
可直接複製的檔頭範本
一般內容型網頁的最小完整組合：
<head>
<!-- 必須在前 1024 位元組內 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 搜尋結果呈現 -->
<title>頁面標題｜網站名稱</title>
<meta name="description" content="這一頁的重點摘要，約 80 字內。">
<link rel="canonical" href="https://example.com/path">
<!-- 社群分享預覽 -->
<meta property="og:title" content="頁面標題">
<meta property="og:description" content="這一頁的重點摘要。">
<meta property="og:type" content="article">
<meta property="og:locale" content="zh_TW">
<meta property="og:url" content="https://example.com/path">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<!-- 網站圖示 -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>一頁一組，不要共用
最常見的錯誤不是標籤寫錯，而是 整站共用同一份檔頭。全站標題與描述都一樣，搜尋引擎就分不出各頁的差異，等於自己把所有頁面壓成一頁。
用框架開發時，把標題與描述當成 頁面資料 而不是模板內容：在路由設定或頁面的前置資料中宣告，再由檔頭管理機制輸出。單頁應用程式還要處理路由切換時的更新，做法見 SPA 動態 title 與 meta 。
常見問題
標籤的順序有差嗎？
只有字元編碼有硬性要求，必須出現在檔頭前 1024 個位元組內，所以習慣放第一行。其餘標籤的順序不影響解析，但把同類的標籤放在一起比較好維護。
為什麼設定了描述，搜尋結果卻顯示別的文字？
搜尋引擎會判斷哪段文字更符合當次的搜尋字詞。當它認為頁面內文某一段比您寫的描述更貼切，就會改用那一段。這是正常行為，不是設定失效，判斷邏輯見 網頁描述 meta description 。
同一個資訊要在 Open Graph 和 Twitter Card 各寫一次嗎？
不一定。X 平台在缺少推文卡片專屬標籤時會退回讀取 Open Graph，所以最少只要寫卡片類型一項。但兩邊都寫齊可以讓標題與描述針對不同平台調整。
用框架開發時這些標籤怎麼管理？
重點是不要寫死在單一模板裡。把每頁的標題與描述當成頁面資料的一部分，在路由或頁面設定中宣告，再由框架的檔頭管理機制輸出，才能保證每頁都是唯一值。
