og-preview --render
Open Graph 預覽器
即時預覽你的網頁在 Facebook、LINE、Twitter/X、Discord 四大平台的分享卡片效果。
輸入 OG 標籤內容,即時對比不同平台的顯示差異。
$ og-tags --edit
Facebook News Feed
EXAMPLE.COM
網頁標題將顯示在這裡
網頁描述將顯示在這裡,Facebook 通常只顯示一到兩行
LINE Chat
網頁標題將顯示在這裡
描述文字顯示在這裡
example.com
Twitter / X
Theme:
網頁標題將顯示在這裡
網頁描述將顯示在這裡
example.com
Discord Embed
AK
Someone Today at 12:00
https://example.com
我的網站
網頁標題將顯示在這裡
網頁描述將顯示在這裡,Discord 通常會顯示比較多行描述
常見問題
og:image 的最佳尺寸是多少?
建議使用 1200 x 630 像素,比例為 1.91:1。這個尺寸在 Facebook、Twitter、LINE 和 Discord 上都能有最佳顯示效果。檔案大小建議控制在 1MB 以內。
為什麼我的 OG 圖片在 LINE 上不顯示?
LINE 對 OG 圖片有較嚴格的快取機制。更新 OG 標籤後,LINE 可能需要數小時到數天才會重新抓取。可以嘗試在 LINE 的 Page Poker 工具中清除快取。確保 og:image URL 是完整的絕對路徑。
Twitter Card 和 Open Graph 有什麼不同?
Open Graph 是 Facebook 制定的協議,Twitter Card 是 Twitter 的版本。兩者很相似,但 Twitter 會優先使用 twitter: 開頭的標籤。如果沒有 twitter: 標籤,Twitter 會 fallback 使用 og: 標籤。建議兩者都設定。