主題

使用 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 會幫你寫好所有標籤。

免費試用 — 無需註冊

在幾秒內預覽和測試動態 OG 圖片。

開啟免費 OG 圖片測試器

A BeCaSimulations site