什麼是 Open Graph？一文讀懂 OG 標籤完全指南

作者：Rico的設計漫想

日期：2026年1月16日上午3:17

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

Open Graph 協議係社交分享卡片嘅標準，配置 OG 標籤可以令你嘅連結喺各平台顯示靚仔預覽圖。

整理版摘要

呢篇文章係 Rico 計劃更新喺 ricoog 網站嘅系列第一篇，專門講 Open Graph（OG）協議嘅所有知識。作者係一個出海開發/設計/產品嘅從業者，佢想解決嘅問題係：當你分享網頁連結時，點樣先可以令佢自動變成一張有圖有標題嘅社交卡片，而唔係一條乾爭爭嘅藍色連結。整體結論係：OG 協議由 Facebook 喺 2010 年提出，而家已經成為國際標準，只要喺網頁 HTML 嘅 <head> 加返對應嘅 meta 標籤，就可以控制分享卡片嘅標題、描述同圖片。

文章詳細解釋咗核心 OG 標籤（og:title、og:description、og:image、og:url、og:type、og:site_name），並提供咗一個簡單代碼示例。之後佢分別講解咗 Facebook、X（Twitter）、Instagram、LinkedIn 呢啲主流平台嘅專屬配置要求同注意事項，例如 Facebook 推薦 1200×630px 圖片、Twitter 要用 twitter:card 標籤。最後佢提到 OG 雖然唔直接影響 SEO，但可以透過提升點擊率同社交分享間接幫到手。

文章用語貼近香港讀者，將內地書面語轉成口語，例如「咩」「呢個」「佢」，令內容更易入口。整體資訊密度高，適合需要優化網站社交分享效果嘅開發者同設計師。

OG 協議係 Facebook 提出嘅標準，用嚟規範社交平台點樣生成分享卡片。
只要喺 HTML <head> 加 meta 標籤（如 og:title、og:image）就可以控制卡片內容。
唔同平台有專屬配置：Facebook 要求 1200×630px 圖片；Twitter 要用 twitter:card 標籤；LinkedIn 限制描述 156 字符。
OG 圖片係最重要嘅元素，一張好嘅封面可以直接提升點擊率。
配置完要用各平台調試工具（如 Facebook Sharing Debugger）刷新緩存。

整理重點

OG 協議嘅背景同作用

Open Graph 協議（簡稱 OG 協議）最初由 Facebook 喺 2010 年提出，為咗解決社交平台爬蟲唔識揀重點嘅問題。以前分享連結，爬蟲可能會亂咁抓側邊欄廣告做圖片，或者攞頁腳版權做描述，結果預覽卡片好肉酸。OG 協議就係俾網站開發者一個標準方法，話畀平台知：請用我指定嘅標題、描述同圖片嚟生成卡片。

OG 協議係 Facebook 制定嘅規則，令網頁變成「富媒體對象」（Rich Object）

OG 唔需要安裝複雜軟件，只係一組寫喺 <head> 區嘅 meta 標籤。呢啲標籤對普通用戶唔可見，但社交平台爬蟲一嚟就會讀取。

整理重點

核心 OG 標籤同基本配置

核心 OG 標籤包括：og:title、og:description、og:image、og:url、og:type、og:site_name

og:title 定義卡片大標題，可以同網頁 <title> 唔一樣，專為社交媒體設計。og:description 係標題下面嘅簡短介紹，目的係勾起好奇心。og:image 係最重要嘅標籤，決定咗最吸睛嘅封面圖，冇呢個嘅話平台會隨機抓圖，效果通常好差。

og:url 設定規範連結，防止參數版本影響統計。og:type 定義內容類型（如 article/website），og:site_name 顯示站點名稱。以下是基本配置代碼：

程式內容 html

<head>
 <meta property="og:title" content="Open Graph 協議入門指南" />
 <meta property="og:description" content="一文看懂 OG 標籤係咩，同埋點樣令你嘅網站連結喺社交媒體上更靚" />
 <meta property="og:image" content="https://example.com/images/og-cover.jpg" />
 <meta property="og:url" content="https://example.com/blog/what-is-open-graph" />
 <meta property="og:type" content="article" />
</head>

小提示：og:image 要盡量用絕對地址，圖片要公網可訪問，唔好有登錄態或者反爬。唔同平台會緩存預覽結果，改咗 OG 之後要用調試工具刷新。

整理重點

各主流平台嘅專屬配置

雖然 OG 係 Facebook 發明，但而家已經係全球標準。國際平台（Facebook、LinkedIn、Discord、Slack）完美支援，Twitter 雖然有自己嘅 twitter:card 標籤，但亦會回退用 OG。中文平台方面，微博、知乎、釘釘、飛書支援較好，微信就比較特殊，通常需要配合 JS-SDK 先做到完美自訂卡片。

Facebook 配置建議補充 og:locale、og:image:width/height，圖片推薦 1200×630px

對於 X（Twitter），一定要加 twitter:card 標籤，可選 summary_large_image 大圖卡片。twitter:title 同 twitter:image 優先級高過 OG 版本，可以單獨定製。Instagram 因為屬於 Facebook 生態，直接用 OG 配置就得，但圖片最好用方形（1080×1080px）以免被裁剪。LinkedIn 要求嚴格，必須齊全 og:title/description/image/url，描述限 156 字符，圖片 1200×630px，而且會緩存 7 日，改完要用 Post Inspector 刷新。

1 Facebook：加 og:locale、og:image:width/height，圖片 1200×630px，用 Sharing Debugger 調試。
2 X (Twitter)：加 twitter:card="summary_large_image"，可選 twitter:site 同自訂標題描述，用 Card Validator 驗證。
3 Instagram：複用 Facebook OG 配置，圖片建議 1080×1080px 方形。
4 LinkedIn：嚴格控制描述 156 字符內，圖片 1200×630px，修改後用 Post Inspector 刷新。

整理重點

OG 同 SEO 嘅關係及常見問題

好多新手問：「加咗 OG 標籤會唔會提高 Google 排名？」答案係唔會直接提高，但可以間接助攻。因為 OG 令連結喺社交媒體上更靚仔，自然會提高點擊率（CTR）同分享次數，呢啲流量同社交信號最終會對網站權重有正面影響。

OG 唔直接影響 SEO，但透過提高 CTR 同社交分享間接幫到手

常見問題包括緩存：各平台會緩存 OG 信息，修改後要用對應調試工具（Facebook Sharing Debugger、Twitter Card Validator、LinkedIn Post Inspector）刷新。若未能刷新，可以暫時改 og:url 加隨機參數再改返嚟。另外要留意合規性，加入 og:image:alt 提升無障礙體驗，避免標題描述有違規詞語。

最難搞嘅係 og:image——要為每個頁面設計一張 1200×630px 封面圖

總括嚟講，Open Graph 協議唔係高深技術，只係為社交分享而創造嘅用戶體驗標準。冇佢，你嘅連結係「裸奔」；有佢，就可以完全控制分享卡片。

呢篇係我計劃更新喺 ricoog 網站上面嘅系列文章嘅第一篇，寫關於 OG 標籤嘅所有知識同內容，完成 OG Image 呢個專題嘅閉環。——收錄喺《出海開發/設計/產品》專題。

當你將一個網頁連結複製貼上到 X（Twitter）、Slack、Facebook 或者微信嘅時候，有時佢只係一行標準嘅藍色連結（甚至係一串亂碼嘅 URL）；而有時，佢就會變成一張精心設計嘅社交分享圖，帶有封面圖、標題同一段簡短嘅介紹。

呢個就係用咗 Open Graph 協議進行優化之後帶嚟嘅社交體驗。

今日我哋就嚟傾下 Open Graph 係乜嘢，同埋佢點樣決定你個網站喺社交媒體上面嘅體驗。

點解分享連結會顯示圖文 Banner？

當你將網頁連結貼上到 Facebook、X（Twitter）、LinkedIn、微信羣組或者 Slack 嘅時候，平台通常會派一個「抓取機械人」（爬蟲）去訪問呢個頁面，讀取一啲「俾機器睇嘅信息」，然後生成一個連結預覽卡片（又叫分享卡片、link preview）。

呢張卡片通常包括：

• 標題（等人知道你在講乜）
• 描述（兩三行摘要）
• 圖片（最搶眼嘅封面）
• 來源域名/作者等補充信息（視乎平台而定）

而 OG 協議，就係用嚟標準化呢份「卡片說明書」嘅。

Open Graph 嘅起源：Facebook 提出，為瞭解決咩問題？

Open Graph 協議（簡稱 OG 協議），最初由 Facebook 喺 2010 年提出。

為瞭解決呢個問題，Facebook 制定咗一套規則：等網頁開發者自己話俾社交平台知，我想展示啲乜。

透過呢套協議，普通嘅網頁喺社交圖譜入面變成一個「富媒體對象」（Rich Object）。簡單嚟講，OG 協議等站長/開發者可以清楚話俾平台知：請按我指定嘅標題、描述、圖片嚟生成分享卡片。

Open Graph 嘅基本原理

Open Graph 並唔需要你安裝複雜嘅軟件，佢只係一組寫喺網頁 HTML 代碼 <head> 區域的 Meta 標籤（og 標籤）。

呢啲標籤對普通瀏覽網頁嘅用戶係不可見嘅，只有當社交平台嘅爬蟲訪問你個網頁嗰陣，佢哋先會起作用。

核心 OG 標籤詳解

雖然 Open Graph 協議包含好多屬性，但對於大多數網站嚟講，只要掌握以下幾個核心標籤就夠曬：

1. `og:title`（標題）

• 作用：定義分享卡片上面顯示嘅大標題。
• 注意：佢唔一定同網頁原本嘅 <title> 一樣。你可以專門為社交媒體改一個更吸引、更「標題黨」啲嘅名，而唔會影響 SEO 裏面嘅網頁原標題。

2. `og:description`（描述）

• 作用：標題下面嘅一兩句簡短介紹。
• 技巧：就好似電影嘅劇情簡介，目的係引人好奇，吸引點擊。通常建議控制在 2-4 句以內。

3. `og:image`（圖片）

• 作用：呢個係最重要嘅標籤！ 佢定義咗分享卡片上面嗰張大圖。
• 地位：喺視覺時代，一張靚嘅 OG 圖片可以令點擊率翻倍。如果冇呢個標籤，平台可能會隨機抓取網頁裏面嘅圖片，效果通常好慘烈。

4. `og:url`（連結）

• 作用：定義該頁面嘅規範連結（Canonical URL）。
• 用途：確保無論用戶分享係帶參數嘅連結（如 example.com/?source=wechat），最終統計同指向都係原本乾淨嘅連結。

5. `og:type`（類型）

• 作用：定義內容類型（例如 article/website/video/product）。
• 用途：平台根據呢個渲染卡片樣式。

6. `og:site_name`（名稱）

• 作用：顯示卡片底部嘅站點名稱

簡單代碼示例：點樣配置 Open Graph

要喺你嘅網站上面配置 OG，只需要將以下代碼加到 HTML 嘅 <head> 和 </head> 之間：

複製
<head>
<!-- 告訴平台這是文章標題 -->
<metaproperty="og:title"content="Open Graph 協議入門指南" />

<!-- 告訴平台這是文章摘要 -->
<metaproperty="og:description"content="一文看懂 OG 標籤是什麼，以及如何讓你的網站連結在社交媒體上更漂亮。" />

<!-- 告訴平台顯示這張圖片 (關鍵！) -->
<metaproperty="og:image"content="https://example.com/images/og-cover.jpg" />

<!-- 告訴平台這是網頁的標準連結 -->
<metaproperty="og:url"content="https://example.com/blog/what-is-open-graph" />

<!-- 補充：定義內容類型，如 website 或 article -->
<metaproperty="og:type"content="article" />
</head>

小提示：

• og:image 儘量用 絕對地址（帶 https:// 嘅完整 URL）
• 圖片要可以被公網訪問，避免登入狀態、反爬、403 等問題導致抓取失敗
• 唔同平台會快取預覽結果，改咗 OG 之後可能要等一段時間或者用平台嘅除錯工具刷新快取

常見平台對 Open Graph 嘅支援情況

雖然 OG 係 Facebook 發明嘅，但佢已經成為全球通用嘅行業標準。

• 國際平台（Facebook, LinkedIn, Discord, Slack 等）：完美支援。只要配置咗上述標籤，連結就會自動展開成靚靚嘅大卡片。註：Twitter (X) 雖然有自己嘅 twitter:card 標籤，但如果檢測唔到，都會自動回退使用 og 標籤，所以配置 OG 性價比最高。
• 中文互聯網環境（微信、微博、釘釘等）：

• 微博、知乎、釘釘、飛書：對 Open Graph 支援較好，通常可以直接抓取並顯示卡片。
• 微信（WeChat）：情況有啲特別。微信早期支援 OG 協議，但而家為咗防止濫用，對直接分享連結嘅抓取有限制。通常要配合微信 JS-SDK 先可以做到完美嘅自訂分享卡片。不過，配置 OG 標籤依然係基礎，因為喺微信電腦版、QQ 或者其他瀏覽器打開嘅時候，依然會讀取呢啲信息。

各主流平台 OG 專屬配置

唔同平台對 OG 標籤嘅解析規則、特殊要求都有差異，以下係 Facebook、X（Twitter）、Instagram、LinkedIn 嘅針對性配置方案：

1. Facebook（OG 協議發源地）

Facebook 對 OG 標籤支援最完整，除咗核心標籤之外，建議補充以下專屬配置：

• 圖片尺寸要求：推薦 1200×630px（1.91:1 比例），最小 600×315px，最大文件大小 8MB；
• 特殊標籤：

• og:locale：內容語言（例如 zh_CN/en_US）；
• og:image:width/og:image:height：指定圖片尺寸，避免平台重新裁剪；
• og:video（可選）：如果頁面有視頻，指定視頻 URL（支援 MP4、WebM）。

Facebook 配置代碼示例

<head>
<!-- 核心OG標籤 -->
<metaproperty="og:title"content="Open Graph 協議全平台配置指南" />
<metaproperty="og:description"content="從基礎到進階，搞定Facebook、Twitter、LinkedIn全平台分享卡片配置" />
<metaproperty="og:image"content="https://example.com/images/og-facebook.jpg" />
<metaproperty="og:image:width"content="1200" />
<metaproperty="og:image:height"content="630" />
<metaproperty="og:url"content="https://example.com/blog/og-complete-guide" />
<metaproperty="og:type"content="article" />
<metaproperty="og:site_name"content="XX 技術博客" />

<!-- Facebook專屬補充 -->
<metaproperty="og:locale"content="zh_CN" />
<!-- 若有視頻可添加 -->
<!-- <meta property="og:video" content="https://example.com/videos/og-demo.mp4" /> -->
</head>

除錯工具

Facebook 提供官方除錯工具：Sharing Debugger，可以驗證標籤配置、刷新平台快取。

2. X（Twitter，前身 Twitter）

Twitter 有自己嘅 twitter:* 專屬標籤體系，如果冇配置就會回退到 OG 標籤，但自訂配置可以精準控制展示效果：

• 核心專屬標籤：

• summary：小卡片（左邊細圖 + 右邊文字，尺寸 144×144px）；
• summary_large_image：大圖卡片（推薦，1200×600px，同 OG 圖片尺寸兼容）；
• player：視頻/音頻卡片（適用於媒體類內容）；

• twitter:card：卡片類型（必加），可選值：
• twitter:site：關聯嘅 Twitter 帳號（例如 @your_account）；
• twitter:title/twitter:description：優先級高過 OG 標籤，可以單獨定製；
• twitter:image：指定卡片圖片（優先級高過 og:image）。

• 圖片要求：支援 JPG、PNG、WEBP，冇版權水印，避免敏感內容。

X（Twitter）配置代碼示例

<head>
<!-- 核心OG標籤（作為回退） -->
<metaproperty="og:title"content="Open Graph 協議全平台配置指南" />
<metaproperty="og:description"content="從基礎到進階，搞定全平台分享卡片配置" />
<metaproperty="og:image"content="https://example.com/images/og-twitter.jpg" />

<!-- Twitter專屬標籤 -->
<metaname="twitter:card"content="summary_large_image" />
<metaname="twitter:site"content="@your_twitter_account" />
<metaname="twitter:title"content="【超全】OG協議配置指南：覆蓋Twitter/Facebook/LinkedIn" />
<metaname="twitter:description"content="3分鐘搞定各平台分享卡片，點擊率翻倍！" />
<metaname="twitter:image"content="https://example.com/images/og-twitter.jpg" />
</head>

除錯工具

Twitter 官方除錯工具：Card Validator（需要登入帳號）。

3. Instagram（基於 Facebook 生態）

Instagram 冇專屬 OG 標籤，完全複用 Facebook 嘅 OG 配置，但有 2 個關鍵注意點：

• 圖片適配：推薦方形圖（1080×1080px）或者 1.91:1 比例圖（同 Facebook 兼容），避免圖片俾人裁剪；
• 內容限制：Instagram 對連結抓取好嚴格，只有「藍剔帳號」「推廣帖」可以直接跳轉，普通帳號要引導用戶點擊簡介連結，但 OG 卡片仍然會喺「私信分享」「Reels 連結掛載」度生效。

Instagram 適配建議

直接複用 Facebook 嘅 OG 配置，額外確保：

<!-- 補充Instagram友好的圖片尺寸（方形圖） -->
<metaproperty="og:image"content="https://example.com/images/og-instagram.jpg" />
<metaproperty="og:image:width"content="1080" />
<metaproperty="og:image:height"content="1080" />

4. LinkedIn（職場社交平台）

LinkedIn 對 OG 標籤嘅解析偏向「保守」，要嚴格遵守以下規則：

• 核心要求：

• 必須包含 og:title/og:description/og:image/og:url，缺一不可；
• 描述文本限制：最多 156 個字符，超出會俾人 cut 咗；
• 圖片尺寸：推薦 1200×630px（同 Facebook），最小 800×400px，文件大小 ≤ 5MB；

• 特殊規則：LinkedIn 會快取 OG 信息大約 7 日，修改之後要用除錯工具強制刷新。

LinkedIn 配置代碼示例

<head>
<!-- LinkedIn核心OG配置（嚴格控制字符數） -->
<metaproperty="og:title"content="OG協議配置指南：提升職場內容分享轉化" />
<metaproperty="og:description"content="掌握LinkedIn分享卡片配置技巧，讓你的職場內容更吸睛（156字符內）" />
<metaproperty="og:image"content="https://example.com/images/og-linkedin.jpg" />
<metaproperty="og:image:width"content="1200" />
<metaproperty="og:image:height"content="630" />
<metaproperty="og:url"content="https://example.com/blog/og-linkedin-guide" />
<metaproperty="og:type"content="article" />
<metaproperty="og:site_name"content="XX 職場研究院" />
</head>

除錯工具

LinkedIn 官方除錯工具：Post Inspector。

Open Graph 同 SEO 嘅關係

好多新手會問：「加咗 OG 標籤可以令到 Google/Bing 排名提高嗎？」

答案係：唔可以直接提高，但係可以間接助攻。

搜索引擎（例如 Google）明確講過 OG 標籤唔係直接嘅排名因素。不過，配置咗 OG 標籤嘅網頁喺社交媒體上面更靚仔，呢個會帶嚟：

1. 更高嘅點擊率（CTR）：靚嘅圖文卡片比純文字連結更吸引人。
2. 更多嘅社交分享：睇落專業嘅連結，用戶更願意轉發。

呢啲增加咗嘅流量同社交信號，最後會對你嘅網站權重產生正面嘅積極影響。

常見問題

快取問題解決

各個平台都會快取 OG 信息，修改之後需要：

• 用對應平台嘅除錯工具（例如 Facebook Sharing Debugger）刷新快取；
• 如果冇得刷新，可以暫時修改 og:url 之後再改返（例如加隨機參數 ?v=2），觸發平台重新抓取。

合規性與可訪問性

• 加入 og:image:alt 標籤（圖片描述），提升視障用戶體驗；
• 避免標題/描述含有違規、誇大詞彙，否則平台可能會屏蔽卡片顯示。

最後

Open Graph 協議唔係啲乜嘢高深嘅技術，佢只係專為社交平台分享而創造嘅一份更完美嘅用戶體驗。

• 冇佢，你嘅連結係「裸跑」嘅，冇足夠嘅信息說明同視覺表達。
• 有咗佢，你嘅連結係完全可控嘅，通過自訂嚟獲得更好嘅體驗

喺瞭解咗 og:title 和 og:description 之後，你會發現最難搞嘅其實係 og:image。畢竟，寫標題容易，但要為網站嘅每個頁面都專門設計一張 1200x630 像素嘅封面圖，呢個就有啲複雜喇，當然之後我哋都會傾下呢方面。

我係Rico，

多謝閲讀！

這是我計劃更新在 ricoog 網站上的系列文章的第一篇，撰寫關於 OG 標籤相關的所有知識和內容，完成在 OG Image 這個專題上的閉環。——收錄於《出海開發/設計/產品》專題。

當你把一個網頁連結複製粘貼到X（Twitter）、Slack、Facebook 或者微信時，有時候它只是一行標準的藍色連結（甚至是一串亂碼般的 URL）；而有時候，它卻是轉化為一張精心設計的社交分享圖，帶有封面圖、標題和一段簡短的介紹。

這便是使用了 Open Graph 協議進行優化之後帶來的社交體驗。

今天我們就來聊聊 Open Graph 是什麼，以及它如何決定你的網站在社交媒體上的體驗。

為什麼分享連結會顯示圖文 Banner？

當你把網頁連結粘貼到 Facebook、X（Twitter）、LinkedIn、微信羣聊或 Slack 時，平台通常會派一個“抓取機器人”（爬蟲）訪問這個頁面，讀取一些“給機器看的信息”，然後生成一個連結預覽卡片（也叫分享卡片、link preview）。

這張卡片通常包含：

• 標題（讓人知道你在講什麼）
• 描述（兩三行摘要）
• 圖片（最吸睛的封面）
• 來源域名/作者等補充信息（視平台而定）

而 OG 協議，就是用來標準化這份“卡片信息說明書”的。

Open Graph 的起源：Facebook 提出，為了解決什麼問題？

Open Graph 協議（簡稱 OG 協議），最初由 Facebook 在 2010 年提出。

為了解決這個問題，Facebook 制定了一套規則：讓網頁開發者自己告訴社交平台，我想展示什麼。

通過這套協議，普通的網頁在社交圖譜中變成了一個“富媒體對象”（Rich Object）。簡單來說，OG 協議讓站長/開發者可以明確告訴平台：請按我指定的標題、描述、圖片來生成分享卡片。

Open Graph 的基本原理

Open Graph 並不需要你安裝複雜的軟件，它只是一組寫在網頁 HTML 代碼 <head> 區域的 Meta 標籤（og 標籤）。

這些標籤對普通瀏覽網頁的用戶是不可見的，只有當社交平台的爬蟲訪問你的網頁時，它們才會起作用。

核心 OG 標籤詳解

雖然 Open Graph 協議包含很多屬性，但對於大多數網站來說，只要掌握以下幾個核心標籤就足夠了：

1. `og:title`（標題）

• 作用：定義分享卡片上顯示的大標題。
• 注意：它不一定非要和網頁原本的 <title> 一樣。你可以專門為社交媒體起一個更具吸引力、更“標題黨”一點的名字，而不會影響 SEO 裏的網頁原標題。

2. `og:description`（描述）

• 作用：標題下方的一兩句簡短介紹。
• 技巧：就像電影的劇情梗概，目的是勾起好奇心，吸引點擊。通常建議控制在 2-4 句話以內。

3. `og:image`（圖片）

• 作用：這是最重要的標籤！ 它定義了分享卡片上的那張大圖。
• 地位：在視覺時代，一張好看的 OG 圖片能讓點擊率翻倍。如果沒有這個標籤，平台可能會隨機抓取網頁裏的圖片，效果通常很慘烈。

4. `og:url`（連結）

• 作用：定義該頁面的規範連結（Canonical URL）。
• 用途：確保無論用戶分享的是帶參數的連結（如 example.com/?source=wechat），最終統計和指向的都是原本乾淨的連結。

5. `og:type`（類型）

• 作用：定義內容類型（如 article/website/video/product）。
• 用途：平台據此渲染卡片樣式。

6. `og:site_name`（名稱）

• 作用：顯示卡片底部的站點名稱

簡單代碼示例：如何配置 Open Graph

要在你的網站上配置 OG，只需要將以下代碼添加到 HTML 的 <head> 和 </head> 之間：

複製
<head>
<!-- 告訴平台這是文章標題 -->
<metaproperty="og:title"content="Open Graph 協議入門指南" />

<!-- 告訴平台這是文章摘要 -->
<metaproperty="og:description"content="一文看懂 OG 標籤是什麼，以及如何讓你的網站連結在社交媒體上更漂亮。" />

<!-- 告訴平台顯示這張圖片 (關鍵！) -->
<metaproperty="og:image"content="https://example.com/images/og-cover.jpg" />

<!-- 告訴平台這是網頁的標準連結 -->
<metaproperty="og:url"content="https://example.com/blog/what-is-open-graph" />

<!-- 補充：定義內容類型，如 website 或 article -->
<metaproperty="og:type"content="article" />
</head>

小提示：

• og:image 儘量用 絕對地址（帶 https:// 的完整 URL）
• 圖片要能被公網訪問，避免登錄態、反爬、403 等問題導致抓取失敗
• 不同平台會緩存預覽結果，改了 OG 後可能要等一段時間或用平台的調試工具刷新緩存

常見平台對 Open Graph 的支持情況

雖然 OG 是 Facebook 發明的，但它已經成為了全球通用的行業標準。

• 國際平台（Facebook, LinkedIn, Discord, Slack 等）：完美支持。只要配置了上述標籤，連結就會自動展開為漂亮的大卡片。注：Twitter (X) 雖然有自己的 twitter:card 標籤，但如果沒檢測到，也會自動回退使用 og 標籤，所以配置 OG 性價比最高。
• 中文互聯網環境（微信、微博、釘釘等）：

• 微博、知乎、釘釘、飛書：對 Open Graph 支持較好，通常能直接抓取並顯示卡片。
• 微信（WeChat）：情況稍特殊。微信早期支持 OG 協議，但現在為了防止濫用，對直接分享連結的抓取有限制。通常需要配合微信 JS-SDK 才能實現完美的自定義分享卡片。不過，配置 OG 標籤依然是基礎，因為在微信電腦版、QQ 或者其他瀏覽器中打開時，依然會讀取這些信息。

各主流平台 OG 專屬配置

不同平台對 OG 標籤的解析規則、特殊要求存在差異，以下是 Facebook、X（Twitter）、Instagram、LinkedIn 的針對性配置方案：

1. Facebook（OG 協議發源地）

Facebook 對 OG 標籤支持最完整，除核心標籤外，建議補充以下專屬配置：

• 圖片尺寸要求：推薦 1200×630px（1.91:1 比例），最小 600×315px，最大文件大小 8MB；
• 特殊標籤：

• og:locale：內容語言（如 zh_CN/en_US）；
• og:image:width/og:image:height：指定圖片尺寸，避免平台重新裁剪；
• og:video（可選）：若頁面含視頻，指定視頻 URL（支持 MP4、WebM）。

Facebook 配置代碼示例

<head>
<!-- 核心OG標籤 -->
<metaproperty="og:title"content="Open Graph 協議全平台配置指南" />
<metaproperty="og:description"content="從基礎到進階，搞定Facebook、Twitter、LinkedIn全平台分享卡片配置" />
<metaproperty="og:image"content="https://example.com/images/og-facebook.jpg" />
<metaproperty="og:image:width"content="1200" />
<metaproperty="og:image:height"content="630" />
<metaproperty="og:url"content="https://example.com/blog/og-complete-guide" />
<metaproperty="og:type"content="article" />
<metaproperty="og:site_name"content="XX 技術博客" />

<!-- Facebook專屬補充 -->
<metaproperty="og:locale"content="zh_CN" />
<!-- 若有視頻可添加 -->
<!-- <meta property="og:video" content="https://example.com/videos/og-demo.mp4" /> -->
</head>

調試工具

Facebook 提供官方調試工具：Sharing Debugger，可驗證標籤配置、刷新平台緩存。

2. X（Twitter，原 Twitter）

Twitter 有自己的 twitter:* 專屬標籤體系，若未配置則回退到 OG 標籤，但自定義配置能精準控制展示效果：

• 核心專屬標籤：

• summary：小卡片（左側小圖 + 右側文字，尺寸 144×144px）；
• summary_large_image：大圖卡片（推薦，1200×600px，與 OG 圖片尺寸兼容）；
• player：視頻/音頻卡片（適用於媒體類內容）；

• twitter:card：卡片類型（必加），可選值：
• twitter:site：關聯的 Twitter 賬號（如 @your_account）；
• twitter:title/twitter:description：優先級高於 OG 標籤，可單獨定製；
• twitter:image：指定卡片圖片（優先級高於 og:image）。

• 圖片要求：支持 JPG、PNG、WEBP，無版權水印，避免敏感內容。

X（Twitter）配置代碼示例

<head>
<!-- 核心OG標籤（作為回退） -->
<metaproperty="og:title"content="Open Graph 協議全平台配置指南" />
<metaproperty="og:description"content="從基礎到進階，搞定全平台分享卡片配置" />
<metaproperty="og:image"content="https://example.com/images/og-twitter.jpg" />

<!-- Twitter專屬標籤 -->
<metaname="twitter:card"content="summary_large_image" />
<metaname="twitter:site"content="@your_twitter_account" />
<metaname="twitter:title"content="【超全】OG協議配置指南：覆蓋Twitter/Facebook/LinkedIn" />
<metaname="twitter:description"content="3分鐘搞定各平台分享卡片，點擊率翻倍！" />
<metaname="twitter:image"content="https://example.com/images/og-twitter.jpg" />
</head>

調試工具

Twitter 官方調試工具：Card Validator（需登錄賬號）。

3. Instagram（基於 Facebook 生態）

Instagram 無專屬 OG 標籤，完全複用 Facebook 的 OG 配置，但有 2 個關鍵注意點：

• 圖片適配：推薦方形圖（1080×1080px）或 1.91:1 比例圖（與 Facebook 兼容），避免圖片被裁剪；
• 內容限制：Instagram 對連結抓取嚴格，僅「藍 V 賬號」「推廣帖」可直接跳轉，普通賬號需引導用戶點擊簡介連結，但 OG 卡片仍會在「私信分享」「Reels 連結掛載」中生效。

Instagram 適配建議

直接複用 Facebook 的 OG 配置，額外確保：

<!-- 補充Instagram友好的圖片尺寸（方形圖） -->
<metaproperty="og:image"content="https://example.com/images/og-instagram.jpg" />
<metaproperty="og:image:width"content="1080" />
<metaproperty="og:image:height"content="1080" />

4. LinkedIn（職場社交平台）

LinkedIn 對 OG 標籤的解析偏「保守」，需嚴格遵循以下規則：

• 核心要求：

• 必須包含 og:title/og:description/og:image/og:url，缺一不可；
• 描述文本限制：最多 156 個字符，超出會被截斷；
• 圖片尺寸：推薦 1200×630px（同 Facebook），最小 800×400px，文件大小 ≤ 5MB；

• 特殊規則：LinkedIn 會緩存 OG 信息約 7 天，修改後需用調試工具強制刷新。

LinkedIn 配置代碼示例

<head>
<!-- LinkedIn核心OG配置（嚴格控制字符數） -->
<metaproperty="og:title"content="OG協議配置指南：提升職場內容分享轉化" />
<metaproperty="og:description"content="掌握LinkedIn分享卡片配置技巧，讓你的職場內容更吸睛（156字符內）" />
<metaproperty="og:image"content="https://example.com/images/og-linkedin.jpg" />
<metaproperty="og:image:width"content="1200" />
<metaproperty="og:image:height"content="630" />
<metaproperty="og:url"content="https://example.com/blog/og-linkedin-guide" />
<metaproperty="og:type"content="article" />
<metaproperty="og:site_name"content="XX 職場研究院" />
</head>

調試工具

LinkedIn 官方調試工具：Post Inspector。

Open Graph 與 SEO 的關係

很多新手會問：“加了 OG 標籤能提高我的 Google/Bing 排名嗎？”

答案是：不能直接提高，但能間接助攻。

搜索引擎（如 Google）明確表示 OG 標籤不是直接的排名因素。但是，配置了 OG 標籤的網頁在社交媒體上更美觀，這會帶來：

1. 更高的點擊率（CTR）：好看的圖文卡片比純文字連結更吸引人。
2. 更多的社交分享：看起來專業的連結，用戶更願意轉發。

這些增加的流量和社交信號，最終會對你的網站權重產生積極的正面影響。

常見問題

緩存問題解決

各平台都會緩存 OG 信息，修改後需：

• 使用對應平台的調試工具（如 Facebook Sharing Debugger）刷新緩存；
• 若無法刷新，可臨時修改 og:url 後再改回（如添加隨機參數 ?v=2），觸發平台重新抓取。

合規性與可訪問性

• 添加 og:image:alt 標籤（圖片描述），提升視障用戶體驗；
• 避免標題/描述含違規、誇大詞彙，否則平台可能屏蔽卡片展示。

最後

Open Graph 協議不是什麼高深的技術，它只是專門為社交平台分享而創造的一份更完美的用戶體驗。

• 沒有它，你的連結是“裸奔”的，沒有足夠的信息說明和視覺表達。
• 有了它，你的連結是完全可控的，通過自定義來獲得更好的體驗

在瞭解了 og:title 和 og:description 後，你會發現最難搞定的其實是 og:image。畢竟，寫標題容易，但要為網站的每個頁面都專門設計一張 1200x630 像素的封面圖，這就有點複雜了，當然接下來我們也會來聊聊這一方面。

我是Rico，

感謝閲讀！

OG 協議嘅背景同作用

核心 OG 標籤同基本配置

各主流平台嘅專屬配置

OG 同 SEO 嘅關係及常見問題

點解分享連結會顯示圖文 Banner？

Open Graph 嘅起源：Facebook 提出，為瞭解決咩問題？

Open Graph 嘅基本原理

核心 OG 標籤詳解

1. og:title（標題）

2. og:description（描述）

3. og:image（圖片）

4. og:url（連結）

5. og:type（類型）

6. og:site_name（ 名稱）

簡單代碼示例：點樣配置 Open Graph

常見平台對 Open Graph 嘅支援情況

各主流平台 OG 專屬配置

1. Facebook（OG 協議發源地）

Facebook 配置代碼示例

除錯工具

2. X（Twitter，前身 Twitter）

X（Twitter）配置代碼示例

除錯工具

3. Instagram（基於 Facebook 生態）

Instagram 適配建議

4. LinkedIn（職場社交平台）

LinkedIn 配置代碼示例

除錯工具

Open Graph 同 SEO 嘅關係

常見問題

快取問題解決

合規性與可訪問性

最後

為什麼分享連結會顯示圖文 Banner？

Open Graph 的起源：Facebook 提出，為了解決什麼問題？

Open Graph 的基本原理

核心 OG 標籤詳解

1. og:title（標題）

2. og:description（描述）

3. og:image（圖片）

4. og:url（連結）

5. og:type（類型）

6. og:site_name（ 名稱）

簡單代碼示例：如何配置 Open Graph

常見平台對 Open Graph 的支持情況

各主流平台 OG 專屬配置

1. Facebook（OG 協議發源地）

Facebook 配置代碼示例

調試工具

2. X（Twitter，原 Twitter）

X（Twitter）配置代碼示例

調試工具

3. Instagram（基於 Facebook 生態）

Instagram 適配建議

4. LinkedIn（職場社交平台）

LinkedIn 配置代碼示例

調試工具

Open Graph 與 SEO 的關係

常見問題

緩存問題解決

合規性與可訪問性

最後

1. `og:title`（標題）

2. `og:description`（描述）

3. `og:image`（圖片）

4. `og:url`（連結）

5. `og:type`（類型）

6. `og:site_name`（名稱）

1. `og:title`（標題）

2. `og:description`（描述）

3. `og:image`（圖片）

4. `og:url`（連結）

5. `og:type`（類型）

6. `og:site_name`（名稱）