當你在 Facebook、LINE 或 Twitter 上分享一篇文章時，社群平台怎麼知道該顯示哪個標題、哪張圖、哪段摘要？答案藏在網頁原始碼的後設資料裡——準確地說，是一套叫 Open Graph 的協議在背後決定著你分享出去的樣子。了解 WordPress 中如何設定 Open Graph，是避免分享時圖文錯亂、讓內容在社群上有最佳曝光的必學功課。
Open Graph 協議的核心原理
Open Graph 是 Facebook 在 2010 年推出的開放標準，讓網頁的重點資訊能以結構化的方式告訴社群平台「我是什麼、我長什麼樣、我要講什麼」。當 Facebook、LINE、Twitter 等平台爬取你的網頁時，會尋找網頁 <head> 裡名叫 og:* 的 Meta 標籤，從中提取頁面的標題、圖片、描述、網址等核心要素。
比方說，一篇關於 WordPress 最佳化的文章在網頁原始碼中會包含這樣的標籤：
<meta property="og:title" content="WordPress 效能最佳化完整指南">
<meta property="og:image" content="https://example.com/images/wordpress-optimization.jpg">
<meta property="og:description" content="學會如何優化 WordPress 網站的速度與效能，涵蓋快取、CDN、資料庫優化與圖片壓縮。">
<meta property="og:url" content="https://example.com/wordpress-optimization/">
<meta property="og:type" content="article">
當有人在 Facebook 貼上這篇文章的連結時，Facebook 就會發送爬蟲來抓取你網頁的原始碼，讀出這些 Meta 標籤，然後在分享預覽中展示 title、image、description。如果沒有設定這些標籤，社群平台就只能亂猜，有時會抓到導覽列的圖片、有時顯示頁面第一段話，甚至連標題都錯誤。這就是為什麼掌握 Open Graph 的設定方法，已成為每個站長的基礎技能。
主要 Open Graph 標籤及其作用
Open Graph 標籤看似複雜，其實只有幾個最常用的。頁面標題（og:title）是社群分享預覽的主要吸睛點，必須簡潔有力、能在一行內完整顯示。開圖（og:image）決定分享時要秀哪張圖，Facebook 會用 1200 × 630 像素作為推薦尺寸，確保在桌機、平板、手機上都能清晰顯示；太小或比例不對會被壓縮或截角。描述（og:description）通常取前 160 字左右的摘要，讓看到分享的人快速了解內容。
除了這三個必備項目外，還有 og:url（頁面正式網址）、og:type（內容類型，通常是 article）、og:site_name（網站名稱）、og:published_time 與 og:modified_time（發布與修改時間）等補充欄位。Twitter 用自己的 twitter:card、twitter:title、twitter:image 標籤系統，雖然格式不同，但許多設定工具（如 Yoast SEO、Rank Math）會自動把 Open Graph 資訊轉換成 Twitter 的格式，所以不用分別設定。
用 Yoast SEO 設定 Open Graph
Yoast SEO 是 WordPress 站長最常用的 SEO 外掛，它整合了 Open Graph 設定，讓不用碰原始碼也能快速部署。首先在外掛設定頁面找到「整合」或「社群媒體」分頁，確認 Open Graph 和 Twitter 卡片都已啟用，然後進入文章編輯頁面。
在文章編輯器右側會看到 Yoast 的側邊欄，往下滑到「社群分享預覽」區塊，你會看到三個平台的預覽縮圖：Google Search、Facebook 與 Twitter。點選 Facebook 分享預覽，可以看到當人們在 Facebook 分享這篇文章時會出現什麼樣子。在這裡可以修改 SEO 標題（通常就是 og:title）、meta 描述（轉換成 og:description），或點擊鉛筆圖示上傳自訂開圖，替換掉預設的第一張圖片。
Yoast 的便利之處在於它會自動從文章特色圖片提取開圖，如果沒設特色圖片就抓內文第一張圖。但如果想要某張圖獨家用於社群分享（而不改動文章本身），就要在預覽裡手動上傳。設定完後，Yoast 會自動把這些資訊寫進網頁原始碼的 Meta 標籤，無須手動編輯 HTML。
用 Rank Math 設定 Open Graph 的另一個選擇
Rank Math 是近年快速竄起的 SEO 外掛，同樣整合了 Open Graph 設定，有些站長覺得它的介面比 Yoast 更直觀。在文章編輯頁面，Rank Math 的側邊欄會在「SEO」分頁裡顯示「社群媒體」區塊，可以預覽 Facebook、Twitter、Pinterest 等平台的分享樣式。點進 Facebook 預覽，可以修改標題、描述，並上傳或選擇自訂開圖。
Rank Math 還有個實用功能是一次預覽多個平台，讓你在發布前確認各平台顯示都沒問題。如果同一篇文章想針對不同平台用不同標題或圖片，Rank Math 也允許分別設定 Facebook 與 Twitter 的 og:title，或者用 Rank Math Pro 版本的更進階功能。設定完成後儲存草稿或發布，Rank Math 就會自動將標籤寫入頁面原始碼。
圖片尺寸要求與優化準則
Open Graph 圖片是社群分享預覽裡最吸引目光的元素，尺寸規格必須講究。Facebook 官方建議圖片尺寸為 1200 × 630 像素，長寬比 1.91:1，這樣在 Facebook 動態消息、Messenger、Instagram 等 Meta 系列平台上都能完整顯示。如果用更小的圖（如 800 × 420），Facebook 會自動縮放，可能造成文字或細節模糊；如果比例不對，會被裁切成方形或其他不預期的尺寸。
實務上，最保險的做法是準備一張 1200 × 630 的圖片，確保無論怎麼被不同平台裁切都不會偏離主題。圖片檔案大小儘量壓在 200KB 以下，幾大社群平台對圖片大小沒有硬性限制，但網頁載入速度會影響 SEO，所以還是要最佳化。PNG、JPG、WebP 都支援，但 JPG 檔案通常更小。一些站長會用 Elementor 或 Photoshop 製作統一風格的分享圖，在圖上放上文章標題縮寫或視覺代表，這樣即使分享時不顯示 meta 描述，光看圖片也能識別內容。
用 Facebook Debugger 驗證設定
設定完 Open Graph 後，最重要的是驗證設定是否真的生效。Facebook 官方提供的「共享偵錯工具」（Facebook Sharing Debugger）是最直接的驗證方式。進入 facebook.com/developers/tools/debug/sharing，在輸入框貼上你的文章網址，按「偵錯」，Facebook 就會立刻爬取該頁面，顯示它抓到的所有 Open Graph 標籤與預覽樣式。
如果看到預覽裡的標題、描述、圖片都正確，代表設定沒問題。反之，如果出現意外的內容（如舊的標題、或者圖片是廣告區塊的圖），有幾個排查方向。首先確認 WordPress 的 Yoast 或 Rank Math 外掛有沒有啟用；再來檢查文章的特色圖片有沒有設定；最後看看是不是有其他 SEO 外掛裝太多、互相衝突，導致標籤被重複或覆蓋。
一個容易被忽略的細節是，Facebook Debugger 會快取頁面資料，如果你修改後重新測試，有時會看到舊的結果。此時點擊「再次抓取」（Scrape Again）強制 Facebook 重新爬取最新內容，等 10 秒左右就會更新預覽。
常見問題與排查方法
快取導致的舊圖問題是最常見的困擾。站長改了特色圖片或手動上傳新開圖後，分享出去仍看到舊圖，這通常是因為 WordPress 快取外掛（如 WP Rocket、LiteSpeed Cache）或 CDN（如 Cloudflare）的頁面快取還在服務舊內容。解決方式是進入快取外掛設定清除該頁面的快取，或到 CDN 控制板清除該 URL 的快取。有些站台甚至需要手動清 WordPress 的資料庫快取（WP-Optimize 類工具）。
另一個常見問題是多個 SEO 外掛同時設定 Open Graph，導致標籤重複或衝突。如果你同時裝了 Yoast SEO 和 Rank Math，要確保其中一個的 Open Graph 設定已關閉，不然網頁會有兩組 og:title、og:image 等標籤，社群平台通常只讀第一個，可能造成顯示錯亂。進入每個外掛設定，檢查「整合」或「社群媒體」分頁，關閉其中一個就能解決。
還有一種情況是網站用了 Multisite（多站網路）架構，子站的 WordPress 首頁或分類頁可能還沒設定特色圖片，導致分享時沒有圖。此時可以在 WordPress 設定或主題的 theme.json 中設定全站預設開圖，作為各頁面的備用圖片。
檢查並優化 Meta Description
Open Graph 的 og:description 與 SEO 的 meta description 通常指同一個欄位，所以在 Yoast 或 Rank Math 寫 meta description 時，要記得這段文字既要優化搜尋結果的點擊率，也要在分享時能吸引目光。好的 meta description 應該在 160 字以內、涵蓋頁面的核心價值、包含焦點關鍵字但不堆砌。寫得太長會在 Facebook 被截斷，寫得太模糊讀者看了不知道點進去會看到什麼。
實務上可以先用 Yoast 或 Rank Math 的 meta description 建議機制，它們會檢查字數、關鍵字密度、可讀性，給出改善建議。完成後在預覽裡看一次分享樣式，確認文字在分享卡片上的視覺效果。如果覺得描述不夠吸睛，可以改寫成更具體的承諾或問句，讓看到分享的人更有點進去的動機。
Schema.org 與 Open Graph 的互補關係
有些站長搞混 Open Graph 與結構化資料（Schema.org）的用途，其實兩者互補。Open Graph 主要是讓社群平台讀懂頁面資訊，而 Schema（JSON-LD 格式）是讓搜尋引擎更精準理解頁面內容，進而產生更豐富的搜尋結果（如文章摘要、星評、常見問題等）。Yoast SEO 與 Rank Math 都會同時產生 Open Graph 與 Schema 標籤，所以不用擔心衝突。如果你想確認 Schema 有沒有正確設定，可以用 Google 的「結構化資料測試工具」檢查。
發布前的社群分享檢查清單
在 WordPress 發布文章前，養成驗證設定的習慣能避免很多後悔的時刻。重點包括：特色圖片是否設定且尺寸至少 1200 × 630；meta description 是否完整且 160 字以內；SEO 標題（og:title）是否簡潔有力、涵蓋焦點關鍵字；文章的永久連結是否正確、沒有拼音錯誤；如果有多個 SEO 外掛要確認只有一個啟用 Open Graph；發布後用 Facebook Debugger 驗證一次。完成這份檢查只需 3 分鐘，卻能確保分享到社群時呈現最佳樣貌，讓內容有更高的點擊與互動機會。
Open Graph 看似細節瑣碎，但它是內容行銷與 SEO 策略的最後一哩路。當讀者在 Facebook、LINE、Twitter 上看到你的文章分享時，一個清晰的標題、吸睛的圖片、精煉的描述，能大幅增加點進來的動機。透過 Yoast SEO 或 Rank Math 的圖形介面，再用 Facebook Debugger 驗證，就能輕鬆確保每篇文章的社群分享都是最佳狀態。