Twitterカードの画像サイズは1200×630px|OGP設定も解説

この記事は「リンクカードガイド」の一部です。この記事では、SNSでURLを画像つきカード表示する際の画像サイズを解説します。カード全体の作り方は「Twitterカードの作り方」で解説しています。

Twitterカードの画像サイズは、1200×630px(比率1.91:1)が推奨です。この1枚にしておけば、X(旧Twitter)・LINE・Facebookのどれでも大きく崩れません。この記事では、summary_large_imageとsummaryの違い、各SNSの表示仕様、文字が見切れない安全領域の考え方、サイズが合わず表示が崩れた時の直し方を解説します。

Twitterカードの推奨サイズは1200×630px(1.91:1)

結論から言うと、Twitterカード(OGP画像)に推奨されるサイズは1200×630px、縦横比は1.91:1です。これはX・LINE・Facebookで共通してきれいに表示される汎用サイズです。

なぜこのサイズなのか

OGPで大きなカード画像を表示する主要SNSが、いずれもこの比率を基準に表示を組み立てているためです。1枚作るなら、このサイズが最も崩れにくい選択になります。

小さい画像・比率違いだとどうなるか

• 小さい画像: 引き伸ばされてぼやけて表示されます
• 比率が違う画像: 上下または左右が切り取られます
• 規格外の画像: 小さなサムネイル表示に格下げされることがあります

画像の形式はPNGまたはJPEGが一般的です。容量が大きすぎると読み込まれない場合があるため、数MB以内に収めます。

summary_large_imageとsummaryの違い

XのTwitterカードには2つの種類があり、どちらを選ぶかで推奨サイズが変わります。

summary_large_image(大きな横長画像)

タイムラインで大きな横長画像が表示される形式です。推奨は1200×630px(1.91:1)。リンクの内容を視覚で伝えたい場合はこちらを選びます。

summary(小さな正方形サムネイル)

小さな正方形の画像が左に付く形式です。サイトのロゴやアイコンを見せる用途に向いています。

表: Twitterカード2種類の違い。

• 見てもらいたいリンクなら: summary_large_imageを選びます
• ブログ記事の一覧など: summaryでも十分な場面があります

og:imageでの指定方法

自分のサイトに設定する場合、画像はog:imageタグでURLを指定します。summary_large_imageならtwitter:cardタグもあわせて必要です。

<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="https://example.com/card.png">

og:imageは「https://」から始まるフルURLで指定します。相対パスでは画像を読み込めません。

X・LINE・Facebookの表示仕様の違い

サービス別の表示仕様

表: 主要SNSのカード表示の違い。いずれも1200×630pxで崩れにくい。

• Xでは画像だけが見せ場になるため、画像内の文字が重要です
• LINE・Facebookでも、比率1.91:1なら大きな切り取りは起きにくいです

1枚で兼用するなら1200×630px一択

SNSごとに別画像を用意する必要はありません。1200×630pxの1枚をog:imageに設定しておけば、どのサービスでも大きな崩れは起きません。

「リンクカード作成ツール」(link-card.online)は、Googleで「リンクカード」と検索すると1位に表示される無料ツールです。Twitterカード・画像つきリンク・OGPカードと呼ばれることもありますが、すべて同じ仕組みです。登録不要で30秒、中間ページ(LP)を挟まずアプリを直接起動させるカードを作れます。

このツールは推奨サイズ(1200×630px・1.91:1)のガイドつきで、アップロードした画像を自動でトリミングしてくれます。手順は「リンクカードの作り方【無料・登録不要】画像つきリンクを30秒で作成」で解説しています。

文字の入れ方と安全領域

カード画像は、表示環境によってわずかに切れたり縮んだりします。だから文字の配置には「安全領域」の考え方が必要です。

端は見切れることがある(安全領域)

SNSアプリや端末の表示幅によって、画像の外周がトリミングされたり、比率維持のために縮小されたりします。上下左右の端から10%程度の内側を「安全領域」と考え、重要な要素はその中に収めます。

文字入れのコツ

• 文字は大きめに。タイムラインでの縮小表示でも読める太さにします
• 上下左右の端は空け、文字・ロゴは中央の安全領域に集めます
• Xはタイトル文字が出ない仕様のため、見せたい文言は画像内に入れます
• 背景と文字色のコントラストを十分に取ります

Twitterカードのサイズ違いで表示が崩れた時の直し方

症状別の原因と直し方

• 画像がぼやける: 元画像が小さすぎます。1200×630pxで作り直します
• 上下が切れる: 比率が1.91:1ではありません。比率を合わせてトリミングします
• 端の文字が切れる: 安全領域の外に文字があります。中央に移動させます
• カード自体が出ない: サイズ以外の原因です。OGP設定やキャッシュを確認します

カード自体が出ない場合の切り分けは「Twitterカードが表示されない原因と対処法【画像が出ない時】」で解説しています。

作り直したらキャッシュを更新

画像を差し替えても、X側に古い画像のキャッシュが残っていると表示が変わりません。Card Validatorで再取得させると最新の画像に更新されます。手順は同じく表示されない時の記事で解説しています。

まとめ

Twitterカードの画像サイズの要点は、次のとおりです。

• 推奨は1200×630px(1.91:1)。この1枚でX・LINE・Facebookに対応できます
• summary_large_imageを選び、og:imageはフルURLで指定します
• 文字は中央の安全領域に収め、端は空けます
• 崩れた時は作り直しとCard Validatorでのキャッシュ更新を行います

難しい知識は要りません。サイズと安全領域の2つだけ押さえれば、カードの表示は安定します。

画像サイズとあわせて見た目に関わるのが、カード下部の「from: ドメイン名」表示です。画像を変えてもこのドメインが同じままだと、読者に同一リンクと認識されやすくなります。2026年8月3日追加の「ドメイン分散」機能で、表示ドメインを投稿ごとに変えられます。詳しくは「リンクカードのドメイン分散とは」を参照してください。