Open Graph 標籤怎麼設？社群分享預覽的完整寫法
Open Graph 是 Facebook 提出的協定，現在被幾乎所有社群平台採用（Facebook、LINE、Slack、Discord、Threads），用來決定連結被分享時的 預覽卡片 長什麼樣。
搜尋引擎不看這一組
Open Graph 完全不影響 搜尋排名 。做它的理由是 社群流量與品牌一致性，一則有圖有標題的貼文，點擊率遠高於一行光禿禿的網址。
四個必備屬性
<meta property="og:title" content="頁面標題">
<meta property="og:description" content="這一頁的重點摘要。">
<meta property="og:image" content="https://example.com/images/og.png">
<meta property="og:url" content="https://example.com/path">注意是 property 不是 name
Open Graph 用 property，Twitter Card 用 name。寫錯屬性名稱的標籤會被忽略，而且不會有任何錯誤提示。
完整屬性表
| 屬性 | 說明 | 必要性 |
|---|---|---|
og:title | 卡片標題 | 必備 |
og:description | 卡片描述 | 必備 |
og:image | 卡片縮圖（絕對網址） | 必備 |
og:url | 這一頁的正規網址（絕對網址） | 必備 |
og:type | 內容類型 | 建議 |
og:locale | 語言與地區 | 建議 |
og:site_name | 網站名稱 | 建議 |
og:image:width | 圖片寬度 | 建議 |
og:image:height | 圖片高度 | 建議 |
og:image:alt | 圖片替代文字 | 建議 |
og:type
常用的值：
| 值 | 用在 |
|---|---|
website | 首頁、一般頁面 |
article | 文章、部落格貼文 |
product | 商品頁 |
video.other | 影片頁 |
article 還可以補上額外屬性：
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-09-07T10:00:00+08:00">
<meta property="article:author" content="Away">og:locale
繁體中文用 zh_TW。注意是 底線 而不是連字號，這和 hreflang 用的 zh-Hant-TW 格式不同，兩者不要混用。
圖片規格
| 項目 | 建議值 |
|---|---|
| 尺寸 | 1200 × 630 像素 |
| 比例 | 約 1.91 : 1 |
| 最小尺寸 | 600 × 315（低於此會降級成小圖版型） |
| 檔案大小 | 8MB 以內，實務上壓在 300KB 內較保險 |
| 格式 | PNG 或 JPEG（部分平台不支援 SVG 與 WebP） |
og:image 必須是絕對網址
<!-- 抓不到圖，卡片會沒有縮圖 -->
<meta property="og:image" content="/images/og.png">
<!-- 正確 -->
<meta property="og:image" content="https://example.com/images/og.png">社群平台的爬蟲 不會替相對路徑補上網域。這是最常見的設定錯誤，而且在本機開發時完全看不出來。
同樣要留意的是 格式：部分平台不支援 SVG 與 WebP。若站內的橫幅是 SVG，要另外轉一份 PNG 給社群用，這也是為什麼這個站的橫幅是 -banner.svg、og 圖是 -og.png 兩份檔案。
補上寬高可以讓平台在還沒抓到圖時就預留正確版位：
<meta property="og:image" content="https://example.com/images/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="圖片內容的文字說明">用建置流程產生 og 圖
每篇文章手工做一張 1200×630 的圖不現實。可行的做法是 從既有的橫幅自動轉檔：
// 掃過所有 *-banner.svg，包成 1200×630 的 og 圖
const banners = (await readdir(imagesDir, { recursive: true })).filter((file) =>
file.endsWith('-banner.svg'),
);
for (const src of banners) {
const outPath = src.replace(/-banner\.svg$/, '-og.png');
// 以 1200×630 的畫布重新排版，再輸出 PNG
}這樣新增文章時只要產生橫幅，og 圖就自動跟上，不會出現「有文章沒有 og 圖」的漏洞。
環境變數與絕對網址
絕對網址帶來一個麻煩：本機、測試機、正式機的網域不同。解法是在標記裡放 token，建置時再換掉：
<meta property="og:image" content="%SITE%/images/seo/meta-open-graph-og.png">// 建置時把 %SITE% 換成當前環境的網域
const SITE_TOKEN = /%SITE%/g;
const domain = process.env.SITE_HOST;
head = head.map((tag) => replaceToken(tag, SITE_TOKEN, domain));og:url 更適合直接由框架自動產生，不要逐頁手寫，手寫的最大風險是複製貼上後忘了改，導致十個頁面的 og:url 都指向同一個網址。
快取與除錯
改了標籤不會立刻生效
社群平台會 快取抓取結果，通常數天到數週。單純重新分享一次不會觸發更新。
要立即更新必須用各平台的除錯工具主動重新抓取：
| 平台 | 工具 |
|---|---|
| Facebook、Threads | 分享偵錯工具 |
| Post Inspector | |
| X | 已無公開驗證工具 |
前兩者會顯示它 實際抓到的標籤，是排查「為什麼卡片是空的」最快的方式。
X 的 Card Validator 已經停止服務
以前的 cards-dev.twitter.com/validator 已經收掉，X 目前沒有對外的卡片驗證或強制重新抓取的工具。
替代的確認方式只有兩個：用 curl 直接看伺服器回傳的標籤（見 純 CSR 的 SEO 問題 的做法），以及實際發一則貼文看預覽。因為 X 會退回讀取 Open Graph，用 Facebook 的偵錯工具確認 og 標籤正常，通常也就足夠了。
單頁應用程式的陷阱
社群爬蟲完全不執行 JavaScript
Google 至少會排隊渲染，但 Facebook、X、LINE 的預覽爬蟲 只讀伺服器回傳的原始 HTML。
所以靠 JavaScript 注入的 Open Graph 標籤 一律無效，卡片會完全空白。這類標籤必須在伺服器端渲染或建置階段就寫進 HTML。
驗證方式：用瀏覽器的「檢視網頁原始碼」（不是開發者工具），在裡面搜尋 og:image。找不到就是有問題。解法見 渲染模式怎麼選 。
檢查清單
| 項目 | 標準 |
|---|---|
| 四個必備屬性齊全 | 建議 |
og:image 與 og:url 是絕對網址 | 必備 |
| 圖片為 1200 × 630 的 PNG 或 JPEG | 建議 |
用的是 property 而非 name | 必備 |
og:locale 為 zh_TW（底線） | 建議 |
| 原始碼裡看得到這些標籤（非程式碼注入） | 必備 |
每頁的 og:url 各不相同 | 必備 |
常見問題
Open Graph 會影響搜尋排名嗎？
不會，搜尋引擎不使用這組標籤。它影響的是連結被分享到社群平台時的預覽卡片。做它的理由是社群流量與品牌一致性，不是排名。
og:image 一定要用絕對網址嗎？
一定要。社群平台的爬蟲不會替相對路徑補上網域，寫成斜線開頭的路徑會直接抓不到圖，預覽卡片就變成沒有圖的版本。這是最常見的設定錯誤。
圖片尺寸該用多少？
建議 1200 × 630 像素，比例接近 1.91 : 1，這是大圖卡片的標準尺寸。低於 600 × 315 的圖會被降級成小圖版型。同時補上寬高屬性可以讓平台在還沒抓到圖時就預留正確的版位。
改了標籤為什麼預覽沒有更新？
社群平台會快取抓取結果，通常數天到數週。要立即更新必須用各平台的除錯工具主動重新抓取。單純重新分享一次不會觸發更新。
單頁應用程式的 Open Graph 有效嗎？
如果標籤是靠 JavaScript 注入的，就無效。社群平台的爬蟲完全不執行 JavaScript，只讀伺服器回傳的原始 HTML。這類標籤必須在伺服器端渲染或建置階段就寫進 HTML，做法見 渲染模式怎麼選 。
