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メタタグの両方にその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が両方のタグで機能します。Xは
twitter:imageが存在しない場合にog:imageへフォールバックしますが、両方を設定しても問題なく、明示的です。
Xカードバリデータのヒント
| チェック項目 | 詳細 |
|---|---|
| 公開URL | 画像はXが認証なしで取得できる必要があります |
| ファイルサイズ／形式 | 5MB未満に抑えてください。テキストカードにはPNGが最適です |
| キャッシュ | Xは積極的にキャッシュするため、カードバリデータを使用して強制的に更新してください |
| 署名付きURL | FastOGのコンテンツ署名付きURLは最初のレンダリングのみを制限し、キャッシュされたカードは有効なままです |
FAQ
XとOpen Graphで別々の画像が必要ですか？
いいえ。Xは同じ1200×630の画像を読み取ります。このページが存在するのは、正しいtwitter:cardタグを設定するのが間違いやすいためです。
タイトルを変更してもXカードが更新されないのはなぜですか？
Xは以前のカードをキャッシュしています。X Card Validatorを開き、URLを貼り付けて再取得してください。
FastOGはtwitterメタタグも処理しますか？
FastOGは画像を生成します。twitter:cardとtwitter:imageのメタタグは、上記のようにページに追加する必要があります。無料のOpen Graph Meta Tag Generatorがすべてのタグを生成します。