Twitterカード（Xカード）の設定方法｜twitter:cardとog:image

この記事の要点

ツイート（X 投稿）に URL を貼ると画像付きカードで表示されるのは、Twitter カード（X カード）の仕組み
リンク先ページの <head> に twitter:card / og:image 等のメタタグを設置するだけで自動で展開される
カードの種類は summary（小サイズ）と summary_large_image（大サイズ）の2 種が主流
X 側は Open Graph タグ（og:title / og:description / og:image）を fallback として読むため og:* 系も必須
実装後は X Card Validator（旧 Card Validator）でプレビュー検証＋キャッシュ更新が可能

Twitter カード（X カード）とは

ツイートに URL を貼ったときに、URL の下に画像 + タイトル + 説明が表示されるカード形式のリッチプレビューを Twitter カード（現 X カード）と呼びます。クリック率を大きく押し上げる重要な仕組みで、Web ページ側でメタタグを仕込むだけで自動的に展開されます。

カードの種類

card 値	サイズ	用途
`summary`	小（正方形サムネ）	記事 / 商品ページ。コンパクトに表示
`summary_large_image`	大（横長 16:9）	画像が主役のコンテンツ。クリック率が高い主流形式
`player`	動画埋込	音声 / 動画プレイヤー（要審査）
`app`	アプリ訴求	iOS / Android アプリへの誘導

最小実装（summary_large_image）

リンク先ページの <head> に以下のメタタグを書きます。twitter:* と og:* を両方用意するのが安全です。

<!-- カード種別 -->
<meta name="twitter:card" content="summary_large_image">

<!-- 自サイトの X アカウント (任意だが推奨) -->
<meta name="twitter:site" content="@your_account">

<!-- 記事執筆者の X アカウント (任意) -->
<meta name="twitter:creator" content="@author_account">

<!-- Open Graph 系 (X は og:* を fallback として読む) -->
<meta property="og:url"         content="https://example.com/article/123">
<meta property="og:title"       content="記事のタイトル">
<meta property="og:description" content="記事の説明（120字程度）">
<meta property="og:image"       content="https://example.com/img/og.jpg">
<meta property="og:type"        content="article">

各メタタグの意味

タグ	意味	備考
`twitter:card`	カード種別	必須。`summary` / `summary_large_image` など
`twitter:site`	掲載サイトの X アカウント	`@` 始まり
`twitter:creator`	記事著者の X アカウント	`@` 始まり
`og:url`	正規 URL	必須相当
`og:title`	タイトル	必須相当
`og:description`	説明	120 字前後推奨
`og:image`	カード画像 URL	https の絶対 URL / 1200x630 推奨
`og:type`	コンテンツ種別	`article` / `website` / `product`

og:image の推奨仕様

1200 x 630 px（summary_large_image 用）
5 MB 以下の JPG / PNG / WebP
HTTPS の絶対 URL（相対パス不可）
summary なら 144 x 144 〜 4096 x 4096、1:1 推奨

検証手順

X Card Validator（cards-dev.twitter.com/validator）に URL を貼る
カードプレビューが表示されれば OK
画像差し替え後はキャッシュが残るため、Card Validator で再フェッチして反映
X 公式アプリ / Web で実際にツイートして最終確認

つまずきやすいポイント

og:image が相対パスになっている → 必ず https://... の絶対 URL
画像が5 MB 超 / HTTPS 以外 → カードが表示されない
ページが noindex / 認証必須 / robots.txt で拒否 → クローラーが読めず表示されない
キャッシュが残って古い画像が出る → Card Validator で更新
SPA でクライアントレンダリングのみ → クローラーは JS を実行しないため、SSR / プリレンダリングが必要

表示確認できるツール

本番にデプロイする前に、メタタグが意図どおりに認識されているかをツールで確認します。X Card Validator はキャッシュをクリアできる唯一の手段なので、画像を差し替えたあとは必ず最後に通します。

X Card Validator — X 公式。カード種別とプレビューを確認、キャッシュ更新も可能
Facebook Sharing Debugger — OGP の検証。Facebook / Instagram 経由のリンクに必須
LinkedIn Post Inspector — LinkedIn 用の OGP プレビュー
OGP テスター — 各国の有志ツール。複数 SNS のプレビューを一括確認

カードのテキスト長

X 側で表示されるテキストには長さの上限があり、超過分は省略表示になります。設計時は以下を目安にメタタグを整えると、PC・モバイル両方で意図どおりに見せられます。

項目	推奨長さ	備考
`og:title`	全角 30 字程度	カードのタイトル行。50 字超は省略される
`og:description`	全角 60〜80 字	2 行表示が標準。詰め込み過ぎない
`twitter:site`	`@` 始まり 15 字以内	X のユーザ名規約に従う
`og:image` ファイル名	英数字推奨	日本語ファイル名はサーバ・キャッシュで化けることがある

OGP との関係

Twitter カードは X 専用の仕様ですが、Open Graph Protocol（og:*）は Facebook / LinkedIn / Slack / Discord など他の SNS でも共通で使われます。og:* を必ず設置 + twitter:card と twitter:site のみ追記すれば、ほぼすべての SNS でリッチプレビューが出ます。

まとめ

リンク先 <head> に twitter:card と og:* を仕込む
画像は 1200 x 630 / HTTPS 絶対 URL / 5 MB 以下
Card Validator で検証 + キャッシュ更新
あとは普段どおり URL を貼ってツイートするだけ

ページ一覧

その他