Open Graph 預覽器
即時預覽你的網頁在 Facebook、LINE、Twitter/X、Discord 的分享卡片效果。
輸入 OG 標籤內容，查看不同平台的顯示差異。
這工具解決什麼
Open Graph 預覽器讓你在發布前就看到網頁分享到 Facebook、LINE、Twitter/X、Discord 時的實際卡片樣式，不用等貼文送出才發現標題被截斷或圖片沒有顯示。輸入 og:title、og:description、og:image 等標籤內容，四個平台的卡片會即時同步更新，並在文字超出各平台顯示上限時提出截斷提醒，讓你在貼上網站 head 之前就先修好問題。
結果怎麼判讀
每個平台顯示卡片的字數上限不同，超過就會被截斷並加上刪節號。標題大約在 Facebook 65 字元、LINE 55 字元、Twitter/X 70 字元、Discord 80 字元後開始截斷；描述大約在 Facebook 110 字元、LINE 80 字元、Twitter/X 125 字元、Discord 200 字元後截斷。og:image 建議使用 1200 x 630 像素、比例 1.91:1，這個比例在四個平台都能完整顯示。更新 OG 標籤後，LINE 有較嚴格的快取機制，可能需要數小時到數天才會重新抓取新內容。
常見錯誤
- og:image 填相對路徑而非絕對網址，導致部分平台的爬蟲抓不到圖片。
- 圖片比例不是 1.91:1，分享卡片顯示時被裁切變形。
- 改了 OG 標籤後沒意識到 LINE 快取需要時間更新，誤以為設定沒生效。
如何使用 Open Graph 預覽器
在輸入面板填入 og:title、og:description、og:image、og:url、og:site_name 等欄位內容。
即時查看 Facebook、LINE、Twitter/X、Discord 四張分享卡片的顯示效果，確認標題與描述沒有被截斷。
點擊「產生 OG 標籤」按鈕，複製產出的 meta 標籤，貼到網站頁面的 head 區塊中。
常見問題
og:image 的最佳尺寸是多少？
為什麼我的 OG 圖片在 LINE 上不顯示？
Twitter Card 和 Open Graph 有什麼不同？
og:title 和 <title> 標籤內容需要一樣嗎？
如何讓 Facebook 立即重新抓取更新後的 OG 資料？
延伸閱讀與相關工具
Open Graph 標籤負責社群分享預覽；搭配以下資源，可以一起檢查頁面結構與搜尋結果呈現。
想看案例、合作方式與價格範圍？
留下 Email，我會寄出案例（含 Ahrefs 資料）、合作方式與價格範圍；看完再決定是否回覆。
十年 SEO 實戰 · Threads 公開研究 · 隱私權政策