Twitterカードプレビューとは？
Twitter Card Previewは、リンクがTwitter/Xでシェアされた際にどう表示されるかを確認できるツールです。URLを入力するか、タイトル・説明文・画像を入力して、投稿前にSummaryカードとSummary with Large Imageカードの両方をプレビューできます。
プレビューは Twitter/X の Web クライアントと同じ比率で描画します。Summary with Large Image はブログ記事や製品発表に推奨される 2:1 のバナー、Summary はカテゴリーページや参考リンクに合う 1:1 のサムネイルです。対応する meta タグも生成されるので、サイトの <head> にそのまま貼れて手書きする必要がありません。
使い方
- ステップ1 — タイトル・説明文・画像URLを入力するか、ページの HTML を貼り付けて既存の twitter: と og: タグを一括で読み込みます。
- ステップ2 — カードタイプを選択します：Summary（小さなサムネイル）またはSummary with Large Image（バナースタイルのプレビュー）。
- ステップ3 — ライブプレビューで Twitter/X のタイムラインでの実際の表示を確認します。必要に応じて完全なツイート内や LinkedIn・Facebook・Slack・Discord での見え方も確認し、各フィールドを調整します。
使用するタイミング
- リンクをツイートする前にブログ記事や記事ページの見え方を確認するとき。
- シェアカードが崩れていたり、ロゴだけ切り抜かれて表示される既存ランディングページの監査。
- ページの種類に対して Summary と Large Image のどちらが合うかを meta タグ追加前に決めるとき。
結果
ブログ記事のリンクをTwitter/Xでシェアしようとしています。ページの HTML を貼り付けてタグを読み込むと、説明文が未設定で画像がトリミングされていることが分かります。両方を修正し、Large Imageカードがプロフェッショナルに見えることを確認してからツイートします。
よくある質問
- Summary と Summary with Large Image の違いは?
- Summary は左に正方形の小さなサムネイル、右にタイトルと説明を並べます。Summary with Large Image はタイトルの上に幅広のバナーが入ります。大判はタイムラインで占める面積が大きく、ほぼ常にクリック率も高くなります。
- Twitter/X が実際に表示する画像サイズは?
- Summary with Large Image の表示領域はおおむね 2:1(例: 1200×600 px)です。Twitter は 300×157 から 4096×4096 まで受け付けますが 2:1 にクロップするので、重要な文字や顔は中央の 2:1 エリア内に収めましょう。
- これらの meta タグを使うのに Twitter Developer の承認は必要ですか?
- 不要です。Twitter Card の meta タグは公開サイトであれば承認なしで動きます。承認を求めていた古い validator は廃止されました。<head> にタグを追加して公開デプロイすれば、次に URL がシェアされたときカードが表示されます。
- meta タグは合っているのに Twitter で新しいカードが出ないのはなぜ?
- Twitter はカード応答を強くキャッシュします。タグ修正後も古いカードが数時間残ることがあります。URL にトラッキング用サフィックス(?v=2 や UTM)を付けて共有すれば再取得を強制できます。robots.txt で Twitterbot をブロックしていないかも確認を。
- Open Graph と Twitter タグ、どちらを使うべき?
- twitter:* タグが無い場合、Twitter は Open Graph(og:title, og:description, og:image)にフォールバックします。OG だけでも大抵足ります。画像や見せ方まで完全に制御したいなら twitter:card と twitter:image も追加してください。