社群分享預覽產生器
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 / LinkedIn | og:title、og:description、og:image | 1.91:1(最小 200×200) |
| X / Twitter | twitter:card,否則退回 OG | 2:1 large、1:1 summary |
| og: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