當你在社群平台上分享一個連結時，通常會看到一張圖片、標題和描述，這些元素就是透過 Open Graph（OG）協議來定義的。想讓你的網站在社群平台上看起來更專業、更吸睛，就需要好好利用 OG 標籤來自訂分享預覽的資訊。下面就讓我們來告訴你 OG 的詳細設定方法，幫助你打造更具吸引力的社群分享預覽！
Open Graph 是什麼？為什麼你的連結需要它？
Open Graph 是一套由 Facebook 推出的協議，透過在網頁的 HTML 原始碼中加入特定標籤，讓社群平台在用戶分享連結時，可以正確抓取並顯示網頁的標題、描述、縮圖等資訊，進而呈現出更吸引人的分享預覽畫面。如下圖展示有無設定 Open Graph 的差異：
| 無 Open Graph | 有 Open Graph |
|---|---|
從上圖可以看出，若未設定 OG 標籤，可能會出現圖片錯誤、標題不對、描述重複等問題，導致分享預覽看起來不夠吸引人，甚至讓用戶無法清楚了解連結內容。而設定 OG 標籤則可幫助網站：
➡️ 提升品牌形象：統一且專業的分享預覽，能讓用戶對網站留下更好的印象。
➡️ 增加點擊率：吸引人的圖片和標題，能提高用戶點擊連結的意願。
➡️ 強化 SEO：雖然 OG 標籤本身不直接影響搜尋引擎排名，但更高的點擊率和分享量，仍有助於網站的整體表現。
Open Graph 必備標籤及優化方法
那 OG 標籤該怎麼設定？有哪些欄位必填？下面就讓我們一一為你解說！
Open Graph 標籤必填欄位
| OG 屬性 | 說明 | 建議字數/尺寸 | 常見錯誤 |
|---|---|---|---|
| og:title | 網頁標題 | 建議 60 字以內 | 使用與網頁標題不同的文字，導致用戶混淆 |
| og:description | 網頁描述 | 建議 100 字以內 | 過長導致被截斷，或過短無法清楚說明內容 |
| og:image | 分享縮圖 | 建議 1200 x 630 px（1.91:1 比例），至少 600 x 315 px | 圖片尺寸過小或比例不符 |
| og:image:alt | 分享縮圖的替代文字 | 建議 60 字以內 | 未提供替代文字 |
| og:url | 網頁網址 | 須為絕對網址 | 使用相對網址 |
| og:type | 網頁類型（如：website、article、video.movie 等） | 根據網頁內容設定 | 設定錯誤，導致平台抓取資訊不正確 |
Open Graph 標籤 HTML 範例
以下為一個簡單的範例，將 OG 標籤加入 HTML head 區塊：
<head>
<meta property=”og:title” content=”Open Graph 是什麼？如何設定 OG 標籤？”/>
<meta property=”og:description” content=”加入 Open Graph（OG） 標籤，幫助你的網站在社群平台上看起來更專業、更吸睛！”/>
<meta property=”og:image” content=”https://example.com/images/og-image.jpg”/>
<meta property=”og:image:alt” content=”Open Graph 標籤設定教學”/>
<meta property=”og:url” content=”https://example.com/open-graph”/>
<meta property=”og:type” content=”article”/>
</head>
Open Graph 實作到檢查 3 步驟
步驟 1：加上標籤並排除常見錯誤
在 HTML head 區塊加入 OG 標籤後，可先自行檢查是否有以下常見錯誤：
✅ og:url 為絕對網址且已正規化
✅ og:image 圖片解析度符合建議尺寸
✅ og:description 描述長度適中
✅ 未重複設定 og 標籤
步驟 2：使用工具檢查
若發現社群平台抓取的分享預覽資訊不正確，或出現錯誤訊息，建議使用下列工具來檢查 OG 標籤設定是否正確。
Facebook Sharing Debugger
在 Sharing Debugger 工具中輸入網址，並點選「Debug」，即可看到 Facebook 抓取的 OG 標籤資訊。若出現警告訊息，需根據提示修正設定，並點選「Scrape Again」重新擷取資訊。
步驟 3：更新快取
若發現 OG 標籤已修正，但社群平台仍顯示舊的分享預覽資訊，可能是因為平台快取未更新。此時可使用 Sharing Debugger 工具重新抓取，或稍待一段時間後再次檢查。
Open Graph縮圖設定重點
根據Facebook連結分享中的圖像，建議遵照以下規則：
- 圖片格式：JPG 或 PNG
- 檔案大小：不超過 5MB
- 最小尺寸：600 x 315 px
- 縮圖比例：1.91:1
WordPress Open Graph 標籤設定方法
若你的網站是使用 WordPress 架設，可透過以下方式設定 OG 標籤：
安裝 Open Graph 外掛
可透過安裝 Open Graph 專用外掛，快速新增 OG 標籤。
使用 SEO 外掛
許多常見的 SEO 外掛（如：Yoast SEO、All in One SEO Pack 等）皆內建 OG 標籤設定功能。
自訂主題 head
若熟悉 HTML，可直接在主題的 header.php 檔案中加入 OG 標籤。
Open Graph 標籤設定 FAQ
Open Graph 與 Twitter Cards 有什麼差別？可以同時設定嗎？
Open Graph 是由 Facebook 推出的協議，主要用於定義社群平台上的分享預覽資訊；而 Twitter Cards 則是由 X 推出的類似協議，用於定義 X 平台上的分享預覽資訊。
兩者的屬性名稱和必填欄位略有不同，建議同時設定，以確保在各大社群平台上的分享預覽皆能正確顯示。
| OG 屬性 | Twitter Cards 屬性 |
|---|---|
| og:title | twitter:title |
| og:description | twitter:description |
| og:image | twitter:image |
| og:url | 無對應屬性 |
| og:type | 無對應屬性 |
可以為同一頁面設定多張 og:image 嗎？平台會怎麼選？
可，Open Graph 支援以陣列方式設定多張圖片，社群平台通常會選擇第一張圖片或尺寸最符合要求的圖片來顯示。建議放置 1～3 張圖片，並確保主圖符合各平台的尺寸建議。
動態渲染網站，如何讓社群平台正確抓取 OG？
建議使用伺服器端渲染（SSR）或預渲染（Prerender）的方式，確保社群平台在抓取網頁時，可以正確讀取到 OG 標籤。常見的前端框架（如：React、Vue 等）皆有對應的 SSR 或 Prerender 解決方案。
關於頁面動態渲染，你可以閱讀網頁原始碼是什麼？學會看懂網站架構，SEO優化細節就在這裡
想了解更多關於網站架設、SEO 或數位行銷的相關知識，歡迎到己見室部落格，讓我們與你分享更多實用資訊！
Last Updated on 7 2 月, 2026 by 己見室