tomai
登入
免費 · SEO工具

社群分享預覽產生器

Open Graph + Twitter Card 標籤,附即時 Facebook/Twitter 風格預覽卡片

即時預覽
尚未設定圖片
輸出結果

四個平台,一次看清分享卡的真實樣貌

Facebook、X、LinkedIn 與 WhatsApp 對 OG 標籤的呈現各不相同 — 同時檢視四張模擬圖,發佈前先把最弱的修好。

一個表單兩組標籤

面向 Facebook、LinkedIn 和 Slack 的 Open Graph 標籤與面向 X 的 Twitter Card 標籤,從同一個標題、描述、圖片和 URL 一起產生。

🔒

發布前的卡片預覽

預覽卡以 1.91:1 比例渲染圖片,連同網域、標題和描述——使用者分享連結時看到的真實版式,上線前即可確認。

🎯

兩種卡片變體可選

選擇 summary_large_image 全寬圖片卡或精簡的 summary 卡,產生器會輸出與之匹配的 twitter:card 值和標籤。

常見問題

為什麼要同時產生 Open Graph 和 Twitter Card 標籤?

當頁面缺少專屬的 twitter:* 標籤時,Twitter/X 會自動回退使用 Open Graph 標籤,所以實際的分享卡片其實共用同一組欄位——分開填寫只會重複輸入相同的標題/描述/圖片。

圖片應該用多大尺寸?

1200×630px(約 1.91:1 的比例)是 Facebook、Twitter/X、LinkedIn 及 Slack 上「summary_large_image」卡片的安全建議尺寸——尺寸太小或裁切比例不合適的圖片,在各平台上可能會被不可預期地裁切。

我的內容會被上傳到別處嗎?

不會——一切都以純 JavaScript 在你的瀏覽器端執行,你輸入的內容不會傳送到任何伺服器。

各平台讀取哪些資訊

平台主要來源影像比例
Facebook / LinkedInog:title、og:description、og:image1.91:1(最小 200×200)
X / Twittertwitter:card,否則退回 OG2:1 large、1:1 summary
WhatsAppog:title/image(說明常被隱藏)近方形裁切

會標示尺寸過小的影像、缺少尺寸標籤(會迫使重新抓取),以及超出各平台截斷點的標題。

相關工具

什麼是社群分享預覽產生器?

當有人把連結分享到 Facebook、X、LinkedIn 或 Slack 時,平台會讀取 meta 標籤——多數社群網路讀 Open Graph,X 讀 Twitter Card——拼出一張帶圖片、標題和描述的卡片。沒有這些標籤,卡片就會變形,甚至只顯示一條光禿禿的 URL,點擊率大受影響。這個工具用一張表單同時產生兩套標籤,並即時渲染預覽卡片,讓你在分享之前就看清連結在任何平台上的樣子。行銷人員、內容團隊和站長每次上線前都會用到它。

它能產生什麼

  • 🖼️ 一組欄位同時產生 Open Graph 和 Twitter Card 標籤
  • 📱 輸入時即時顯示 Facebook/Twitter 風格的預覽卡片
  • 🗂️ 為 X 選擇 summary 或大圖卡片類型
  • 🔗 支援 og:url 和 og:site_name
  • 📋 合併好的、可直接貼上的標籤區塊

分享前什麼時候該檢查

  • 上線會被大量分享的產品頁或落地頁
  • 活動發布前確認文章連結的展示效果
  • 檢查所選圖片依 1.91:1 比例裁切後好不好看
  • 排查分享卡片壞了好幾個月的網站

一切都在瀏覽器本機產生,不上傳任何內容。一個平台特性需要了解:社群網路會快取 URL 的詮釋資料,加入標籤後,可能需要用該平台的除錯工具重新整理快取,新卡片才會顯示。

最後更新 · 2026-09-01

相關工具