Twitter Card 設定：四種卡片類型與 X 平台顯示規則
Twitter Card 是 X 平台（原 Twitter）的預覽卡片協定。它的設計比 Open Graph 晚，所以刻意做了 向後相容，這也是它最實用的一點。
最少只要寫一個標籤
X 會退回讀取 Open Graph
X 平台在找不到推文卡片專屬標籤時，會 退回讀取 Open Graph 的標題、描述與圖片。
所以如果您已經寫好 Open Graph，只需要再補這一行就能拿到大圖版型：
<meta name="twitter:card" content="summary_large_image">兩邊都寫齊的價值在於 可以針對不同平台調整文案，例如：X 上用更短、更口語的標題。
四種卡片類型
| 類型 | 版型 | 用在 |
|---|---|---|
summary | 小圖在左，文字在右 | 圖片素材不足時 |
summary_large_image | 大圖在上，文字在下 | 內容型網站的預設選擇 |
app | 應用程式安裝卡片 | 推廣行動應用 |
player | 內嵌播放器 | 影音內容 |
內容型網站一律用 summary_large_image
它的圖片版位最大，在時間軸上最醒目，點擊率也最好。除非真的沒有合適的橫向圖片，否則沒有理由選小圖版型。
完整屬性表
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="頁面標題">
<meta name="twitter:description" content="這一頁的重點摘要。">
<meta name="twitter:image" content="https://example.com/images/og.png">
<meta name="twitter:image:alt" content="圖片內容的文字說明">
<meta name="twitter:site" content="@帳號">
<meta name="twitter:creator" content="@作者帳號">| 屬性 | 說明 | 必要性 |
|---|---|---|
twitter:card | 卡片類型 | 必備 |
twitter:title | 卡片標題 | 可退回 og:title |
twitter:description | 卡片描述 | 可退回 og:description |
twitter:image | 卡片圖片（絕對網址） | 可退回 og:image |
twitter:image:alt | 圖片替代文字 | 建議 |
twitter:site | 網站的 X 帳號 | 選用 |
twitter:creator | 作者的 X 帳號 | 選用 |
注意是 name 不是 property
Open Graph 用 property，Twitter Card 用 name。雖然多數平台的解析器對這點寬容，但照規範寫才不會遇到「解析失敗卻沒有任何錯誤提示」的情況。
圖片規格
| 卡片類型 | 建議尺寸 | 比例 |
|---|---|---|
summary_large_image | 1200 × 630 | 約 1.91 : 1 |
summary | 至少 144 × 144 | 1 : 1 |
實務上 準備一張 1200 × 630 就夠了，和 Open Graph 共用同一張圖。這也是為什麼多數網站的 twitter:image 與 og:image 指向同一個檔案。
其他限制：
- 檔案大小 5MB 以內。
- 格式為 PNG、JPEG、WEBP 或 GIF。
- 必須是絕對網址：和 Open Graph 一樣，相對路徑會直接抓不到。
和 Open Graph 的完整搭配
實務上最省事的組合是：Open Graph 寫齊，Twitter Card 只補差異：
<!-- Open Graph：所有平台共用 -->
<meta property="og:title" content="頁面標題">
<meta property="og:description" content="這一頁的重點摘要。">
<meta property="og:image" content="https://example.com/images/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:type" content="article">
<meta property="og:locale" content="zh_TW">
<!-- Twitter Card：指定版型，其餘退回 Open Graph -->
<meta name="twitter:card" content="summary_large_image">如果要對 X 平台單獨調整文案，再補上 twitter:title 與 twitter:description 覆蓋即可。
標籤是覆蓋而非合併
twitter:title 存在時就用它，不存在才退回 og:title。所以「只寫 twitter:title 卻沒寫 twitter:description」是完全合法的組合，標題用自訂的，描述沿用 Open Graph。
排查卡片沒顯示
三個最常見的原因：
| 症狀 | 原因 | 怎麼修 |
|---|---|---|
| 完全沒有卡片 | 標籤是程式碼注入的 | 改成伺服器端渲染或 靜態產生 |
| 卡片有文字沒有圖 | 圖片用了相對路徑 | 改成絕對網址 |
| 卡片是舊內容 | 平台快取 | X 已無驗證工具，只能等快取過期 |
驗證方式和 Open Graph 相同：用瀏覽器的「檢視網頁原始碼」搜尋 twitter:card，找不到就是程式碼注入的問題。
X 平台的預覽爬蟲不執行 JavaScript
這一點和 Facebook、LINE 相同。靠 JavaScript 注入的社群標籤在所有社群平台上都無效。
檢查清單
| 項目 | 標準 |
|---|---|
有 twitter:card 且值為 summary_large_image | 建議 |
| 圖片是絕對網址 | 必備 |
用的是 name 而非 property | 必備 |
| 原始碼裡看得到這些標籤（非程式碼注入） | 必備 |
有 twitter:image:alt | 建議 |
常見問題
已經寫了 Open Graph，還需要 Twitter Card 嗎？
最少只需要寫卡片類型一項。X 平台在找不到推文卡片專屬標籤時會退回讀取 Open Graph 的標題、描述與圖片，所以指定卡片類型就能拿到大圖版型。兩邊都寫齊的價值在於可以針對不同平台調整文案。
四種類型該用哪一個？
內容型網站一律用大圖摘要卡片，它的圖片版位最大、點擊率最好。小圖摘要卡片適合圖片素材不足的情況，應用程式與播放器卡片則只有推廣行動應用與嵌入影音時才用得到。
Twitter Card 用 name 還是 property？
用 name。Open Graph 用的是 property，兩者不同。雖然多數平台的解析器對這點寬容，但照規範寫才不會遇到解析失敗卻無錯誤提示的情況。
圖片尺寸和 Open Graph 一樣嗎？
大圖卡片可以共用同一張 1200 × 630 的圖。小圖卡片用的是正方形版位，理想比例是 1 : 1。實務上準備一張 1200 × 630 就夠了，因為大圖卡片是主要用途。
為什麼卡片沒有顯示出來？
常見原因有三個：圖片用了相對路徑、標籤是靠 JavaScript 注入的、或平台仍在使用舊的快取。前兩者要修標記；第三者比較麻煩，X 已經收掉公開的卡片驗證工具，沒辦法強制它重新抓取，只能等快取過期。
延伸閱讀
參考資料：X 開發者文件：Cards markup