什麼是Open Graph 預覽？

Open Graph 預覽工具可以精確呈現您的連結在 Facebook、Twitter、LinkedIn 等社群平台上的分享效果。輸入 OG meta 標籤值，即可在發布前查看社群分享卡片的即時模擬圖。

工具會讀取你的 og:title、og:description、og:image、og:site_name 和 og:url,依各平台真實樣式重現分享卡片。Facebook 標題約 88 個字元就會被截斷;Twitter 大圖卡需 2:1 比例;LinkedIn 描述超過 200 個字元會出現省略號。

使用方法

1. 輸入您的 Open Graph 標籤：標題、描述、圖片 URL、網站名稱和網址。
2. 即時並排檢視 Google 搜尋、Facebook、Twitter、LinkedIn、WhatsApp、Slack、Discord 與 Pinterest 八種卡片格式的預覽。
3. 調整標題長度、描述文字和圖片尺寸，直到預覽在所有平台上都呈現完美效果。

何時使用

• 部落格或行銷頁面發佈前,先確認在社群平台上的分享樣貌。
• 排查老站,分享出去後圖片空白或標題錯位的問題。
• 設計新的 OG 模板時,確保標題不會壓到視覺重點。

結果

在 LinkedIn 上分享新部落格文章之前，確認 OG 圖片是否被裁切得不自然，以及描述文字在 Twitter 200 字元卡片限制內是否通順。

常見問題

OG 圖片應該用多大尺寸?

1200x630 像素是通用的安全值。Facebook 與 LinkedIn 都以 1.91:1 顯示,Twitter 的 summary_large_image 比例相同。檔案壓在 5 MB 以下,使用 JPEG 或 PNG。

改完標籤,Facebook 怎麼還是顯示舊預覽?

Facebook 會把 OG 資料快取約 24 小時。把網址貼進 Meta 的 Sharing Debugger,點「Scrape Again」即可強制重抓。LinkedIn 也提供 Post Inspector 做同樣的事。

已有 og:* 標籤,還需要另外寫 twitter:* 標籤嗎?

Twitter 預設會回退讀取 og:title、og:description 和 og:image,一般頁面不寫也能正常顯示。只有想替 Twitter 換標題或換圖時,才補上 twitter:card 與 twitter:image。

Twitter 的 summary 和 summary_large_image 差在哪?

summary 顯示小方圖加文字,適合新聞、文章類連結;summary_large_image 把寬幅大圖放在文字上方,適合落地頁或影片這種視覺主導的內容。

可以拿動態 GIF 當 og:image 嗎?

各平台只會擷取 GIF 的第一張影格,後面的動效不會播放。建議改用靜態 PNG 或 JPEG,把關鍵資訊放在那一張;或把動效轉成短 MP4,經由 og:video 引用。

相關工具