使用 API 產生 Twitter 卡片圖片
Twitter(X)卡片圖片是在 X 上分享連結時顯示的大型預覽圖。FastOG 會以 1200×630 的尺寸動態產生,並透過 summary_large_image 發出訊號,因此每個頁面都能獲得正確的 X 卡片,無需手動建立圖片。
Twitter 卡片圖片的需求
X 會讀取 Open Graph 標籤,並在頁面連結 twitter:card = summary_large_image 時呈現 summary_large_image 卡片。圖片會以 1200×630 的尺寸呈現。FastOG 會精確產生此規格的圖片,您可將 twitter:image 指向與 og:image 相同的動態 URL。
如何設定動態 Twitter 卡片
只需產生一次 FastOG URL,然後將 OG 與 Twitter 的 meta 標籤都指向該 URL。
html
<meta property="og:image" content="https://fastog.com/api/v1/og?template=default&title=My+Post&key=sk_...&s=...">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Post">
<meta name="twitter:image" content="https://fastog.com/api/v1/og?template=default&title=My+Post&key=sk_...&s=...">
同一個 URL 可同時用於兩個標籤。若缺少
twitter:image,X 會回退使用og:image,但同時設定兩者並無妨礙,且更為明確。
X 卡片驗證器小技巧
| 檢查項目 | 詳細說明 |
|---|---|
| 公開 URL | 圖片必須能讓 X 在無需驗證的情況下取得 |
| 檔案大小 / 格式 | 保持在 5 MB 以下;文字卡片最適合使用 PNG |
| 快取 | X 會積極快取——請使用卡片驗證器強制重新整理 |
| 簽署 URL | FastOG 的內容簽署 URL 僅限制首次渲染;已快取的卡片仍會保持有效 |
常見問題
我需要為 X 和 Open Graph 分別準備圖片嗎?
不需要。X 會讀取同一張 1200×630 的圖片。這個頁面之所以存在,是因為正確的 twitter:card 標籤很容易弄錯。
為什麼我修改標題後,X 的卡片沒有更新?
X 會快取舊的卡片。開啟 X Card Validator,貼上網址,然後重新抓取。
FastOG 也會處理 twitter 的 meta 標籤嗎?
FastOG 會產生圖片;你仍然需要在你的頁面上加入 twitter:card 和 twitter:image 的 meta 標籤(如上所示)。我們免費的 Open Graph Meta Tag Generator 會幫你寫好所有標籤。