この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:4
ページ更新者:T
更新日時:2026-06-11 07:07:02

タイトル: 画像一体型のリンクをツイートする方法
SEOタイトル: Twitterカード（X カード）の設定方法 - twitter:card / og:image メタタグ実装と Card Validator 検証

この記事の要点
  • ツイート（X 投稿）に URL を貼ると画像付きカードで表示されるのは、Twitter カード（X カード）の仕組み
  • リンク先ページの に 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）

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

各メタタグの意味

タグ意味備考
twitter:cardカード種別必須。summary / summary_large_image など
twitter:site掲載サイトの X アカウント@ 始まり
twitter:creator記事著者の X アカウント@ 始まり
og:url正規 URL必須相当
og:titleタイトル必須相当
og:description説明120 字前後推奨
og:imageカード画像 URLhttps の絶対 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 推奨

検証手順

  1. X Card Validator（cards-dev.twitter.com/validator）に URL を貼る
  2. カードプレビューが表示されれば OK
  3. 画像差し替え後はキャッシュが残るため、Card Validator で再フェッチして反映
  4. 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 でリッチプレビューが出ます。

まとめ

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

関連

  • OGP（Open Graph Protocol）— SNS 共通のメタタグ仕様
  • meta要素 — HTML のメタ情報
  • SEO — 検索エンジン最適化
  • SNS シェアボタン — 投稿フォームへのリンク