技術文件目前產品線：Slim SEO 搜尋優化

Slim SEO：Facebook Open Graph 標籤設定教學

更新日期
閱讀時間
約 5 分鐘
來源狀態
generated-draft

本篇說明

說明 Slim SEO 外掛如何自動產生 Facebook 分享用的 Open Graph 標籤，包含圖片選擇邏輯、如何修改分享縮圖、解決圖片不顯示問題，以及進階自訂標籤的程式碼片段用法。

適合誰使用

使用 Slim SEO 外掛管理網站社群分享效果的 WordPress 後台管理者

開始前準備

  • 已安裝並啟用 Slim SEO 外掛，且文章/頁面編輯畫面下方有 Search Engine Optimization 選單區塊
  • 若需自訂標籤程式碼，需能編輯佈景主題 functions.php 或使用 Code Snippets 外掛

教學內容

Open Graph 標籤是什麼、如何自動產生

Open Graph 標籤會為社群平台爬蟲提供結構化資訊，例如標題、描述與縮圖圖片

Slim SEO 會自動產生所有 Open Graph 標籤，其中 og:title 繼承自 meta title，og:description 繼承自 meta description

og:type 在單篇文章/頁面會是 article，其他頁面則是 website

如何變更 Facebook 分享時的圖片

預設情況下，Slim SEO 使用精選圖片作為分享單篇文章、頁面或分類的縮圖

建議的 Facebook 分享圖片尺寸為 1200×630 像素，比例為 1.91:1

  1. 若精選圖片不適合 Facebook（例如尺寸不正確），可在文章內容下方的 Search Engine Optimization 選單區塊中選擇另一張圖片

    Change the image when sharing on Facebook
    官方文件介面截圖：Change the image when sharing on Facebook

外掛如何決定使用哪張圖片

若首頁設為靜態頁面，該頁面會被當作一般頁面處理，其 SEO 設定會顯示在編輯器下方，而非 Settings > Slim SEO 設定頁面

若上述來源都找不到圖片，外掛會改用 Settings > Slim SEO > Social 中設定的預設社群分享圖片

Default social sharing image
官方文件介面截圖：Default social sharing image

  1. 外掛依序尋找圖片：優先使用該篇文章 Search Engine Optimization 選單區塊中設定的圖片
  2. 其次使用 Settings > Slim SEO > Meta Tags 中該文章類型的全站設定圖片
  3. 接著使用該篇文章的精選圖片
  4. 最後使用文章內容中的第一張圖片

圖片沒有出現在 Facebook 分享中怎麼辦

Facebook 只支援 jpeg、gif 或 png 格式的圖片，若使用外掛自動將圖片轉為 WebP，該格式將無法正常顯示

  1. 前往 Facebook 的 Sharing Debugger 工具，輸入網頁網址，點擊 Debug 按鈕

    Debugging social image on Facebook
    官方文件介面截圖：Debugging social image on Facebook

  2. 檢查工具顯示的 Open Graph 標籤與圖片是否正確
  3. 若資訊不正確，點擊 Scrape Again 按鈕要求 Facebook 重新抓取頁面資訊並更新快取

進階：新增／移除／修改 Open Graph 標籤

可使用 slim_seo_open_graph_tags 篩選器移除指定的 Open Graph 標籤，例如 article:published_time 與 article:modified_time

篩選器名稱格式為 slim_seo_open_graph_{標籤名}，去除 og: 前綴並將冒號改為底線，用來修改特定標籤的值

也可透過 wp_head 動作掛勾自行輸出自訂的 meta 標籤內容

介面名稱對照

  • Search Engine Optimization meta box：文章與頁面編輯畫面下方的 SEO 設定區塊，可在此手動選擇分享用圖片
  • Settings > Slim SEO > Social：設定全站預設社群分享圖片的後台頁面
  • Settings > Slim SEO > Meta Tags：設定各文章類型全站 Meta 標籤與圖片的後台頁面
  • Facebook Sharing Debugger：Facebook 官方工具，用於檢查與刷新網頁的 Open Graph 標籤快取
  • Scrape Again：Sharing Debugger 工具中用來要求 Facebook 重新抓取頁面資訊的按鈕

注意事項

注意

若圖片格式為 WebP，Facebook 無法正常顯示該圖片

注意

更換社群分享圖片後，Facebook 可能仍顯示舊圖片快取，需手動清除

常見問題

為什麼我換了圖片，Facebook 分享時還是顯示舊圖？

這是因為 Facebook 快取了舊的資訊。請前往 Facebook 的 Sharing Debugger 工具，輸入網址並點擊 Debug，再點擊 Scrape Again 按鈕，要求 Facebook 重新抓取並更新快取後即可顯示新圖片。

分享圖片建議用什麼尺寸？

建議使用 1200x630 像素、比例為 1.91:1 的圖片作為 Facebook 分享縮圖。

可以移除某些 Open Graph 標籤嗎？

可以，透過在 functions.php 或 Code Snippets 外掛中加入 slim_seo_open_graph_tags 篩選器程式碼，即可移除不需要的標籤，例如文章發佈或修改時間標籤。

官方來源

還是卡住了？

先把問題問清楚，通常比直接開工單更快。複製下面的結構，補上你的情況後送出。

用 AI 先釐清問題

/ai 我正在閱讀「Slim SEO：Facebook Open Graph 標籤設定教學」，目前卡在：

我已嘗試：

我看到的畫面／錯誤訊息：

請用一步一步的方式告訴我下一步。

需要我們實際進入網站調整設定、修改佈景主題或處理資料時，再建立 /task 工單。