WordPress OG 標籤：社群分享預覽設定

OG 標籤是什麼？為什麼你的 WordPress 網站需要它？

OG 標籤（Open Graph Meta Tag）是一組放在網頁 HTML <head> 區塊中的元標籤，用於控制網頁在社群媒體平台被分享時的預覽效果，包括顯示的標題、描述文字與縮圖圖片。如果你的 WordPress 網站沒有正確設定這些標籤，分享到 Facebook 或 LINE 時可能出現圖片缺失、標題亂碼或描述與頁面內容不符的情況。

這組標籤最初由 Facebook 於 2010 年提出，目的是讓網站主動提供結構化的頁面資訊給社群平台。目前 Facebook 與 LINE 是採用 Open Graph 協定最主要的兩個平台。當使用者將你的網址貼到這些平台的訊息框或貼文編輯器時，平台的爬蟲會抓取頁面中的 OG 標籤來生成預覽卡片。

沒有設定 OG 標籤時，社群平台會嘗試從頁面的 <title> 標籤與 <meta name="description"> 自行推斷內容，但結果往往不穩定。有時候圖片完全不出現，有時候標題被截斷成無意義的片段。對於依賴社群流量的網站來說，這等於在分享環節就流失了第一印象。

WordPress 設定 OG 標籤的兩種主要方式：外掛 vs. 手動

在 WordPress 中設定 OG 標籤有兩條路徑：安裝專門的外掛快速部署，或是手動在主題程式碼中加入 meta 標籤。選擇哪一種取決於你對技術細節的掌控需求以及網站的複雜度。如果你正在從零開始建站，建議先參考WordPress 教學：從主機選擇到網站上線的完整操作流程，確保基礎架構就緒後再進行 OG 設定。

方案一：安裝外掛

對於多數網站來說，使用外掛是最直接的做法。例如「OG」或「Open Graph and Twitter Card Tags」這類外掛，安裝啟用後會自動根據每篇文章或頁面的標題、摘要與特色圖片生成對應的 OG 標籤。部分進階外掛還允許你針對單篇文章自訂 OG 圖片與描述，不需要修改任何程式碼。

外掛方案的優勢在於部署速度快、維護成本低，主題更換時設定通常不會遺失。適合內容型網站、部落格以及不希望直接接觸程式碼的站長。

方案二：手動加入程式碼

如果你對網站的技術細節有精細控制的需求，可以直接在主題的 functions.php 或 header.php 中透過 WordPress 函數輸出 OG meta 標籤。典型做法是使用 wp_head hook 搭配 get_the_title()、get_the_excerpt() 等函數動態產生標籤內容。

手動方案適合需要與其他系統整合、或主題本身已有大量自訂邏輯的場景。缺點是更換主題時需要重新設定，且如果函數使用不當可能產生重複標籤的問題。

怎麼選？ 如果你的網站以內容發布為主、團隊沒有前端工程資源，外掛是合理選擇。如果你正在使用WordPress 主題怎麼選？2026 免費與付費主題差異分析與挑選要點中提到的付費主題且需要高度客製化，手動方案能提供更大的彈性。

5 個必備的 OG 屬性說明與範例

OG 標籤有多種屬性，但對於多數網站而言，以下五個是最核心且必須涵蓋的。每個屬性的功能、必要性與建議寫法整理如下。

og:title（必要）

定義分享預覽卡片中顯示的標題文字。建議長度控制在 60 字以內，避免被平台截斷。範例：<meta property="og:title" content="WordPress OG 標籤設定完整指南">

og:description（建議）

設定預覽卡片下方的描述文字。建議 100 至 160 字之間，清楚傳達頁面核心價值。範例：<meta property="og:description" content="學會在 WordPress 中正確設定 OG 標籤，讓你的文章分享到社群平台時顯示完整的標題與圖片。">

og:image（強烈建議）

指定分享時顯示的縮圖圖片。圖片尺寸建議至少 1200 x 630 像素，以確保在各平台都能清晰呈現。若未設定此標籤，社群平台通常不會自動抓取頁面中的圖片。範例：<meta property="og:image" content="https://example.com/images/og-cover.jpg">

og:url（建議）

指定該頁面的標準網址，有助於社群平台正確歸併分享次數與互動資料。範例：<meta property="og:url" content="https://example.com/posts/wordpress-og-tags">

og:type（建議）

定義內容類型，常見值為 article（文章）或 website（網站首頁）。範例：<meta property="og:type" content="article">

WooCommerce 電子商務的特殊 OG 設定

如果你的 WordPress 網站搭配 WooCommerce 架設線上商店，產品頁面的 OG 標籤設定會比一般文章更複雜。除了基本的標題與圖片之外，產品頁還需要傳遞價格與幣別資訊，讓社群平台在預覽中直接顯示售價，提升點擊意願。

WooCommerce 的產品頁需要的進階屬性包括 og:price:amount（產品價格數值）與 og:price:currency（幣別代碼，例如 TWD）。這些屬性並非 Open Graph 官方標準規格，而是 Facebook 針對電商場景擴充的標籤。要在 WooCommerce 中加入這些標籤，通常需要安裝支援電商 OG 的外掛，例如「YITH WooCommerce Share For Discount」或「Social Media Auto Publish」等具備產品 OG 支援功能的外掛。

設定流程大致如下：首先安裝並啟用支援的外掛；其次在 WooCommerce 的產品編輯頁面中確認特色圖片已上傳且描述欄位已填寫；最後透過外掛設定或自訂程式碼，將產品價格動態帶入 og:price:amount 標籤。完成後同樣使用 Facebook 分享偵錯工具驗證顯示效果。

OG 標籤與 SEO 排名的關係澄清

OG 標籤並非 Google 或其他搜尋引擎的排名因子。設定 OG 標籤不會直接提升你的網站在搜尋結果中的位置。兩者的運作機制完全不同：SEO 排名仰賴的是頁面內容品質、連結結構、技術架構等眾多信號，而 OG 標籤只在社群平台的分享場景中發揮作用。

但這不代表 OG 標籤與網站流量無關。正確設定 OG 標籤能讓分享到社群的預覽卡片更完整、更具吸引力，進而提高貼文或訊息的點擊率。更高的點擊率意味著更多流量回流到網站，而這些流量本身可能帶來自然的反向連結與使用者互動，間接對 SEO 產生正面影響。只是這層關係是間接的，不是直接的排名機制。

社群分享預覽異常？OG 標籤除錯與排查流程

設定完成後若分享預覽仍然異常，以下是一套可依序執行的排查流程。

第一步：使用 Facebook 分享偵錯工具檢查標籤

前往 Facebook 官方的 Sharing Debugger（developers.facebook.com/tools/debug），將你的網址貼入並點擊「偵錯」。工具會顯示 Facebook 爬蟲實際抓取到的所有 OG 標籤內容。逐一比對 og:title、og:description、og:image 是否正確。

第二步：執行「再次抓取」清除快取

Facebook 會快取先前抓取的 OG 標籤資料。如果你 recently 才修改了標籤內容，需要在偵錯工具中點擊「再次抓取」（Scrape Again）按鈕，強制平台重新讀取你的頁面。通常點擊一到兩次後，預覽就會更新為最新版本。

第三步：排除伺服器或快取外掛的阻擋

部分網站快取外掛（如 WP Super Cache、W3 Total Cache）或伺服器端的防火牆設定，可能會阻擋社群平台爬蟲的存取。檢查你的 .htaccess 或快取外掛設定，確認沒有針對 Facebook 或 LINE 爬蟲設下封鎖規則。如果使用 Cloudflare 等 CDN 服務，也需確認其 Bot Management 沒有誤擋 OG 爬蟲。

完成上述三個步驟後，重新執行偵錯工具確認所有標籤正確顯示。若問題仍未解決，檢查主題的 <head> 區塊是否存在重複的 OG 標籤（例如外掛與手動設定同時作用），這會導致爬蟲抓取到不一致的資料。