什麼是Twitter 卡片預覽？
Twitter 卡片預覽工具可讓您查看連結在 Twitter/X 上分享時的呈現方式。輸入 URL 或手動填寫標題、說明和圖片，即可在發佈前預覽摘要卡片和大圖摘要卡片兩種類型。
預覽按 Twitter/X 網頁版的實際比例渲染:Summary with Large Image 用 2:1 大圖(部落格和新品發表的推薦選擇),Summary 用 1:1 小縮圖(更適合分類頁和參考連結)。同時產生對應的 meta 標籤,可以直接貼進網站 <head>,不用手寫。
使用方法
- 步驟一 — 填寫標題、說明和圖片 URL，或貼上頁面的 HTML，一次匯入其中現有的 twitter: 與 og: 標籤。
- 步驟二 — 選擇卡片類型：摘要卡片（小縮圖）或大圖摘要卡片（橫幅式預覽）。
- 步驟三 — 檢視即時預覽，確認連結在 Twitter/X 時間軸中的實際顯示效果，可選擇嵌入完整推文中預覽，以及在 LinkedIn、Facebook、Slack 和 Discord 上的樣子，然後依需求調整各項內容。
何時使用
- 在把部落格或文章連結發到 Twitter/X 之前,先看分享卡片長什麼樣。
- 稽核舊登陸頁的分享卡片,看看是不是被裁、預設顯示 logo 之類的問題。
- 在加 meta 標籤前,先決定某個頁面用 Summary 還是 Large Image 卡片。
結果
您即將在 Twitter/X 上分享一篇部落格文章。貼上頁面 HTML 載入其標籤後，預覽顯示卡片缺少說明且圖片被裁切。修正這兩項並確認大圖卡片效果理想後再發佈推文。
常見問題
- Summary 和 Summary with Large Image 有什麼差別?
- Summary 卡片左邊是正方形小縮圖,右邊是標題和描述。Summary with Large Image 是頂端一張寬幅大圖,標題在下方。大圖卡片在時間軸上占的位置更大,點擊率幾乎總是更高。
- Twitter/X 實際顯示的圖片尺寸是多少?
- Summary with Large Image 顯示區大約是 2:1(例如 1200×600 像素)。Twitter 接受 300×157 到 4096×4096 之間的尺寸,但會裁成 2:1,重要文字或人臉要放在中間的 2:1 區域內。
- 用這些 meta 標籤需要 Twitter 開發者審核嗎?
- 不需要。Twitter Card 的 meta 標籤對任何公開網站都有效,不用審核。以前需要核准的 validator 已經下線。把標籤加到 <head>、公開部署,下次有人分享這個 URL,卡片就會出現。
- Meta 標籤明明正確,為何 Twitter 上沒顯示新卡片?
- Twitter 對卡片回應快取很激進。改完 meta 標籤後,舊卡片可能掛幾個小時。在 URL 後面加個追蹤參數(?v=2 或 UTM)能強制重新抓取。另外檢查 robots.txt 是否擋了 Twitterbot。
- 應該用 Open Graph 還是 Twitter 標籤?
- Twitter 在缺少 twitter:* 標籤時會 fallback 到 Open Graph(og:title、og:description、og:image),所以只用 OG 通常也夠。想完全控制圖片和版型,就再加 twitter:card 與 twitter:image。