2026-03-28

X（Twitter）カードの画像サイズ、メタデータ、プレビューチェックリスト：最適な設定ガイド

共有リンクがXや他のソーシャルフィードで綺麗に表示されるよう、適切なTwitter card image size、metadata、WebP export、およびトラブルシューティングチェックポイントを網羅的に解説します。

X（Twitter）カードの画像サイズ、メタデータ、プレビューチェックリスト：最適な設定ガイド

最終更新日: June 28, 2026

Twitterカード画像とは、XでURLが共有された際に表示されるプレビュー画像です。この画像は、鮮明に見えるのに十分な大きさでありながら、クローラーが迅速に取得できる適切なサイズである必要があり、さらにプラットフォームがOpen Graphタグにフォールバックする場合でも機能するメタデータによって宣言されている必要があります。

本ガイドでは、実用的な公開チェックリスト（寸法、タグ、ファイル形式、CDNの確認、更新を拒否するカードへの修正方法など）を提供します。

迅速な回答：どのようなTwitterカード画像を使用すべきですか？

ほとんどの共有リンク、特に大きな画像カードを希望する場合は、1200 by 630 pixelのWebPまたはJPEGを使用してください。重要な被写体は端から離し、サムネイルサイズでもテキストが読みやすいようにし、twitter:imageとog:imageの両方で絶対HTTPS URLを使用します。

Xの場合、画像がメインの魅力である場合は、twitter:cardをsummary_large_imageに設定してください。ファイルは文書化されたカード画像の制限を下回る快適な範囲に保ち、公開前に最終的なCDN URLがHTTP 200を返すことを確認してください。

信頼性の高いセットアップはシンプルです：

  • プレビュー用に1200 by 630の画像をエクスポートします。
  • 相対パスではなく、最終的なCDN URLを使用します。
  • twitter:title、twitter:description、およびtwitter:imageを追加します。
  • フォールバックとして対応するog:title、og:description、およびog:imageを追加します。
  • デプロイ後にライブURLをテストし、古い画像が表示され続ける場合はプラットフォームのキャッシュを更新します。

Twitterカード画像とは何ですか？

Twitterカード画像とは、Xがリッチなプレビューを構築するためにページメタデータに宣言される画像URLです。これは記事内の最初の画像と同じものではありません。クローラーはHTMLのheadを読み取り、カードタグを見つけ、画像をフェッチし、共有されたURLのキャッシュされたプレビューを保存します。

X自身のカードマークアップの例では、開発者ドキュメントや例で引き続きsummaryおよびsummary_large_imageのカードタイプが説明されています。実用的な違いはプレビューサイズです：summary_large_imageは、ブログ記事、製品、ツール、またはキャンペーンへのリンクを掲載するのに十分なスペースを提供します。

Open Graphは重要です。なぜなら、多くのソーシャルプラットフォーム、チャットアプリ、およびリンクプレビューシステムがog:imageを読み取るからです。Open Graph protocol は、og:title、og:type、og:image、およびog:urlをコアメタデータとして定義しています。Twitter/XタグとOpen Graphタグの両方を使用することで、パース（解析）が一つ欠けていてもすべてのプレビューが壊れるのを防ぎます。

メタデータフィールド 用途 実用的な注意点
twitter:card サマリーまたはラージイメージレイアウトの選択 ほとんどの記事やランディングページでの共有にはsummary_large_imageを使用します
twitter:image プライマリなXプレビュー画像 絶対HTTPSの画像URLを使用します
og:image ソーシャルおよびメッセージングアプリ用のフォールバックプレビュー画像 プラットフォームが異なるクロップを必要ない限り、通常はtwitter:imageと一致させます
og:url 共有されたページのカノニカルURL 公開されているカノニカルページURLと一致させます
titleおよびdescriptionタグ ブラウザおよび検索コンテキスト ソーシャルメタデータと一貫性を保ちます

関連する画像メタデータの作業を行うには、Image Optimization for SEOガイドとComplete Image Optimization Checklistを参照してください。

Twitterカード画像のサイズはどのくらいであるべきですか？

1200 by 630 pixelsから始めるのが最適です。これは一般的な1.91:1のソーシャルプレビュークロップに一致し、プラットフォームがクリーンにダウンスケールするための十分なピクセルを提供し、同じ画像がog:imageとして再利用される場合にもうまく機能します。

フルサイズでのみ動作するカードをデザインすることは避けてください。フィードは画像をクロップしたり、リサイズしたりし、画像の周りにテキストを配置したりします。小さなラベル、薄いUIスクリーンショット、複雑な背景は、デザインツール上では問題なく見えることがありますが、実際の共有カードでは読み取り不可能になることがよくあります。

Graphic showing a 1200 by 630 Twitter card image with WebP, file size, HTTPS, and edge-safe design notes

ユースケース 推奨画像 機能する理由 注意点
ブログ記事またはガイド 1200 x 630 WebP 大きなプレビュークロップ、幅広いプラットフォーム互換性 小さすぎる見出しテキスト
製品ローンチ 1200 x 630 WebPまたはJPEG ダウンスケール後も製品が視認できる 製品のエッジのクロッピング
ツールページ 1200 x 630 スクリーンショットベースのグラフィック クリック前にツールが何をするかを示す UIテキストが小さすぎて読めない
ロゴのみのページ 1200 x 630で十分なパディングを設ける ロゴが窮屈に見えるのを防ぐ 空っぽに見えるプレビュー
スクエアフレンドリーなキャンペーン 必要に応じて別の1200 x 1200バリアントを用意する スクエアクロップを行うプラットフォームに有用 Xカードとして盲目的に再利用しないこと

複数のプラットフォームのクロップが必要な場合はBest Image Resizer for Social Media記事を使用し、同じクリエイティブが有料ソーシャルにも使用される場合はFacebook Ad Image Sizesを参照してください。

メタデータはどのように記述しますか？

タグはサーバーサイドレンダリングされたHTMLのページ<head>内に配置してください。ロード後にクライアントサイドJavaScriptにソーシャルタグを注入させることに依存しないでください。リンクプレビュークローラーは、ブラウザがアプリを実行する方法と同じ方法であなたのアプリを実行しない場合があります。

Three-row metadata diagram showing twitter card, twitter image, and open graph image tags for social previews

通常の記事やツールページには、このパターンを使用します：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">

<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">

これらのチェックをコードレビューに残してください：

  1. 画像URLが絶対であり、https://.
  2. 画像URLがローカルのビルドパスではなく、最終的なCDN URLであること。
  3. ページタイトルとソーシャルタイトルが同じページを説明していること。
  4. ソーシャルディスクリプションがプレビューでスキャンするのに十分短いこと。
  5. カノニカルURLとog:urlが同じ公開ページを指していること。
  6. カード画像がrobots.txt、認証、またはホットリンクルールによってブロックされていないこと。
  7. サーバーレスポンスに正しい画像コンテンツタイプが含まれていること。

Googleの画像SEOガイダンスでは、Google Images best practicesで説明されているように、記述的な画像コンテキスト、クロール可能な画像URL、およびサポートされるフォーマットも推奨されています。このアドバイスはTwitter固有のものではありませんが、同じ公開規律です。重要な画像をクローラーが発見し、フェッチし、理解しやすいようにすることが求められます。

Twitterカード画像にはWebP、JPEG、PNGのどれを使用すべきですか？

プラットフォームとプレビューターゲットがサポートしている場合は、特に記事グラフィック、製品プレビュー、および混合色のスクリーンショットにはWebPを使用してください。幅広い互換性や写真が多いカードにはJPEGを使用します。透明度または非可逆なエッジがファイルサイズを大きくするほどの重要性を持つ場合にのみPNGを使用してください。

MDNのimage file type guideでは、WebPがロッシー圧縮とロスレス圧縮の両方をサポートしていることが説明されています。この柔軟性はソーシャルカードにとって有用です。なぜなら、単一の画像に写真のテクスチャ、フラットなブランドカラー、およびテキストが含まれる可能性があるからです。

この記事のために、ImageMagickを使用してローカルで4つの1200 by 630 WebPグラフィックをエンコードし、公開前に出力サイズを確認しました。これらは限られたテクスチャを持つクリーンなグラフィックであったため、14 KBから28 KBの間に収まりました。実際の製品写真や詳細なスクリーンショットは通常、より大きくなります。

フォーマット 適している用途 一般的なリスク 実用的な出発点
WebP ほとんどのソーシャルプレビューグラフィックおよび混合画像カード 古いツールの中にはローカルドラフトをプレビューできないものがある場合がある 品質80〜85程度のロッシーWebPでエクスポートする
JPEG 写真が多いプレビューと保守的な互換性が必要な場合 透明度がない、テキストの周りにリング状のエフェクトが発生する可能性がある 品質82〜88程度でエクスポートする
PNG ロゴ、透明度、シャープなフラットグラフィック ファイルサイズが大きい ロスレスが必須の場合のみ使用する
AVIF 非常に小さいモダンな画像 プレビューエコシステムは予測しにくい場合がある カード画像として単独で使用する前に注意深くテストする

カード画像がページのヒーロー（メインビジュアル）でもある場合は、Image Compression Ratioガイドに従い、ページを重くすることなくプレビューがクリーンに見えるようにしてください。モダンなフォーマットを比較している場合は、AVIF vs WebP Comparisonを読んでください。

フィードで画像を読みやすくするにはどうすればよいですか？

カードは、エディタのアートボードではなく、最も小さく見える場所に向けてデザインしてください。フィードプレビューはオリジナルよりも狭くなる可能性があり、周囲のUIが注意を引き合います。

以下のデザインルールを使用してください：

  • メインの被写体または見出しを中央の安全エリアに配置します。
  • 顔、製品、ロゴ、テキストの周りにパディングを残します。
  • 「記事タイトル＋サブタイトル＋バッジ」のような長い文章ではなく、短いメッセージを一つ使用します。
  • 承認する前に、画像を600ピクセル幅で確認してください。
  • UI自体がストーリーである場合を除き、小さなラベルのスクリーンショットは避けてください。
  • 素早い視認性を保つために、コントラストを十分に高く保ってください。
  • ページがツール、製品、または技術的なワークフローに関するものである場合、汎用的なストック画像を使用しないでください。

役立つカード画像は、読者がタイトルを研究する前に「このリンクは何についてか？」に答える必要があります。ブログ記事の場合、それはシンプルな図かもしれません。eコマースガイドの場合、それは製品写真の例かもしれません。コンバーターやリサイザーの場合、それはクロップされたツールスクリーンショットかもしれません。

なぜ私のTwitterカード画像が表示されないのですか？

壊れたカード画像のほとんどは、以下の4つの原因のいずれかから生じます：クローラーがURLをフェッチできない、メタデータが間違った画像を指している、プラットフォームが古いバージョンをキャッシュしている、または画像自体は技術的に有効だがプレビュー候補として不適切である。

Troubleshooting checklist graphic showing relative image URLs, crawler blocks, stale cached cards, and oversized files

クリエイティブを変更する前に、このシーケンスを実行してください：

  1. 最終的なページソースを開き、twitter:imageタグが存在することを確認します。
  2. レンダリングされたHTMLから正確な画像URLをコピーします。
  3. 画像URLに対して curl -I を実行し、HTTP 200であることを確認します。
  4. レスポンスのコンテンツタイプが画像タイプであることを確認します。
  5. 画像URLが認証ウォールを経由してリダイレクトされていないことを確認します。
  6. 画像ファイルが巨大ではないことを確認します。
  7. robots.txtが画像またはページをブロックしていないことを確認します。
  8. 新しいキャッシュを強制する必要がある場合は、画像ファイル名を変更します。
  9. ローカルのプレビューURLではなく、デプロイされたページを再テストします。
  10. カードがアプリによっては機能するのに別のアプリで機能しない場合は、Open Graphタグを確認します。
症状 考えられる原因 対処法
画像が表示されない twitter:imageの欠落または相対パス指定 完全なHTTPS CDN URLを使用する
古い画像が表示される キャッシュされたプレビュー 新しいファイル名を公開し、共有URLを更新する
画像が不適切にクロップされて表示される 安全でない構成（アンセーフコンポジション） パディングを増やし、中央に被写体を配置して再エクスポートする
プレビュータイトルが間違っている メタデータの不一致 twitter:title、og:title、およびページタイトルを整合させる
ローカルでは機能するがライブでは機能しない ローカルパス、認証が必要なCDN、またはブロックされている curl -Iを使用して本番URLをテストする

Crop Image Online Guideは、被写体がより安全なクロップを必要とする場合に役立ち、Image Aspect Ratio Changerは、スクエアまたはポートレートからソーシャルプレビューフレームへのクリエイティブの変更方法を網羅しています。

公開前のチェックリスト

ソーシャル共有に依存するページを公開する前に、画像とメタデータを一緒にレビューしてください。完璧なWebPファイルであっても、タグが昨日のURLを指していれば失敗します。完璧なメタデータでも、画像がフィードで読み取れない場合は期待外れになります。

この最終チェックリストを使用してください：

  • フロントマターまたはCMSの画像が、ソーシャルメタデータに使用される画像と同じであること。
  • 画像がページ固有であるか、ページに関連していることが明確であること。
  • 画像URLがHTTPSであり、公開されていること。
  • ファイル拡張子が実際のレスポンス形式と一致していること。
  • 画像がCDNからHTTP 200を返すこと。
  • タイトルとディスクリプションにキーワードを詰め込みすぎていないこと（スタッフィングしていないこと）。
  • プレビュー画像が記事本文中で表示される場所に記述的なalt textを持っていること。
  • 画像がデスクトップおよびモバイルのプレビューサイズで視覚的に確認されていること。
  • ページが安定したカノニカルURLを持っていること。
  • デプロイ後にカードを再テストすること。

良いTwitterカード画像は、小さな公開システムです：明確なビジュアル、安定したメタデータ、高速なCDN URL、そして最終的なフェッチチェック。これらの要素がすべて整えば、ローンチ時やコンテンツ更新時にプレビューが壊れる可能性は大幅に低くなります。

ガイドを読みながら無料ツールをお使いください。

画像を圧縮する背景を削除する

続けて読む

ソーシャルメディアのワークフローに最適な画像リサイザー のカバー画像

Tue Mar 03 2026 19:00:00 GMT-0500 (北美东部标准时间)

ソーシャルメディアのワークフローに最適な画像リサイザー

適切な比率でのソーシャルメディア画像のサイズ変更はもちろん、安全領域のクロッピング、最適なエクスポートサイズや圧縮設定を適用し、各プラットフォームに対応した再現性の高いワークフローを実現します。