【2026年最新】Twitter/XのOGP画像の設定方法｜サイズと表示されないときの対処法

「ブログ記事をTwitterでシェアしたのに、画像が表示されない...」

せっかく記事を書いてシェアしても、画像が出ないとタイムラインで完全にスルーされてしまう。私も最初は設定方法がわからず、何度もテキストだけの寂しいツイートになっていました。

でも安心してください。OGP画像の設定は、仕組みさえ理解すれば簡単です。

この記事では、Twitter/XのOGP画像の基本から、正しいサイズ設定、表示されないときの対処法、クリック率を上げるデザインのコツまで、すべて解説します。

OGP画像とは？

まず、OGPについて理解しておきましょう。

OGP（Open Graph Protocol） とは、SNSでURLがシェアされたときに表示される画像やタイトル、説明文を指定するための仕組みです。

Facebookが開発した規格ですが、Twitter/X、LINE、Slackなど多くのプラットフォームで採用されています。

OGPを正しく設定すると:

• シェアしたときに画像が表示される
• タイトルと説明文が適切に表示される
• クリック率が大幅に上がる

設定しないと、画像なしのリンクか、意図しない画像が表示されてしまいます。

Twitter/XのOGP画像の推奨サイズ

サイズを間違えると、画像が切れたり、ぼやけて表示されたりします。

推奨サイズは1200×630px

Twitter/XのOGP画像は1200×630ピクセルが推奨です。

アスペクト比は1.91:1（横長）。この比率で作れば、大きなカード形式できれいに表示されます。

Summary Card と Summary Card with Large Image

Twitter/Xには2種類のカード形式があります。

Summary Card（小さいカード）

• 画像サイズ: 144×144px以上（1:1推奨）
• 画像が左側に小さく表示される
• テキスト中心のコンテンツ向け

Summary Card with Large Image（大きいカード）

• 画像サイズ: 300×157px以上（1.91:1推奨）
• 画像が上部に大きく表示される
• こちらが主流でおすすめ

ほとんどの場合、Summary Card with Large Imageを使います。画像が大きく表示されるので、タイムラインで目立ちやすいからです。

OGP画像の設定方法

OGP画像を設定する方法を、サイトの種類別に解説します。

WordPressの場合

WordPressなら、プラグインを使うのが簡単です。

おすすめプラグイン:

• All in One SEO
• Yoast SEO
• SEO SIMPLE PACK（日本製で使いやすい）

設定手順（SEO SIMPLE PACKの場合）:

1. プラグインをインストール・有効化

2. 記事編集画面の下部にある「OGP設定」を開く

3. 「og:image」に画像をアップロード

4. 保存して完了

HTMLで直接設定する場合

静的サイトや自作サイトの場合は、HTMLの``タグ内に以下を記述します。

<!-- 基本のOGP設定 -->
<meta property="og:title" content="記事のタイトル">
<meta property="og:description" content="記事の説明文">
<meta property="og:image" content="https://example.com/ogp-image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">

<!-- Twitter専用の設定 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@あなたのアカウント">

ポイント:

• `og:image`は絶対URLで指定（https://から始まる完全なURL）
• `twitter:card`は`summary_large_image`を指定すると大きいカードになる

Next.js / Reactの場合

Next.jsなら、`metadata`で設定できます。

export const metadata = {
  openGraph: {
    title: '記事のタイトル',
    description: '記事の説明文',
    images: ['https://example.com/ogp-image.jpg'],
  },
  twitter: {
    card: 'summary_large_image',
  },
}

OGP画像が表示されないときの対処法

「設定したのに画像が表示されない！」という場合、いくつかの原因が考えられます。

原因1：キャッシュが残っている

Twitter/Xは一度取得したOGP情報をキャッシュしています。画像を変更しても、すぐには反映されません。

対処法:

1. Card Validatorにアクセス

2. URLを入力して「Preview card」をクリック

3. キャッシュがクリアされ、新しい画像が取得される

※ 2023年以降、Card Validatorのプレビュー機能は制限されていますが、URLを入力するだけでキャッシュクリアの効果はあります。

原因2：画像URLが相対パスになっている

`og:image`の値が`/images/ogp.jpg`のような相対パスだと、正しく読み込めません。

対処法:

`https://example.com/images/ogp.jpg`のように絶対URLで指定する。

原因3：画像サイズが小さすぎる

Twitter/Xは、小さすぎる画像を無視することがあります。

対処法:

最低でも300×157px以上、推奨は1200×630pxで作成する。

原因4：HTTPSでない

画像URLが`http://`だと、セキュリティの問題で読み込まれないことがあります。

対処法:

画像は必ずHTTPSで配信する。

原因5：metaタグの記述ミス

`property`と`name`の使い分けを間違えると、正しく認識されません。

対処法:

• OGP（og:〜）は`property`属性を使う
• Twitter（twitter:〜）は`name`属性を使う

<!-- 正しい書き方 -->
<meta property="og:image" content="...">
<meta name="twitter:card" content="...">

<!-- 間違い -->
<meta name="og:image" content="...">

クリック率を上げるOGP画像のデザイン

設定ができたら、次はデザインの最適化です。

コツ1：文字は大きく、少なく

タイムラインでは画像は小さく表示されます。文字は15文字以内、できるだけ大きく配置しましょう。

記事タイトルをそのまま入れるのではなく、キーワードを絞ってインパクトのある言葉だけを入れるのがコツです。

コツ2：右下を避ける

Twitter/Xのカードでは、画像の右下に再生時間やドメイン名が表示されることがあります。

重要な情報は右下に置かないようにしましょう。

コツ3：ブランドカラーを使う

毎回同じ配色を使うと、「この人の記事だ」と認識されやすくなります。

ブランドカラーやロゴを入れて、統一感を出しましょう。

コツ4：顔写真は効果的

人の顔が入っている画像は、そうでない画像よりクリック率が高いと言われています。

顔写真を使う場合は、表情がはっきり見えるサイズで配置しましょう。

AIでOGP画像を効率的に作る

「毎回OGP画像を作るのが面倒...」という方には、AI生成ツールがおすすめです。

サムネAIなら、テキストを入力するだけでOGP画像を自動生成できます。

メリット:

• サイズ設定不要 → 1200×630pxで自動生成
• デザイン知識不要 → AIが配色やレイアウトを最適化
• 時短 → 1枚数分で完成
• 統一感 → テンプレートを使えばブランディングも簡単

ブログ記事を書くたびにOGP画像を作るのは大変ですよね。AIを活用すれば、記事を書くことに集中できます。

各SNSのOGPサイズ比較

Twitter/X以外のSNSでもOGPは使われます。参考までに、主要SNSの推奨サイズをまとめました。

Pinterest以外は1200×630pxで統一されています。この1枚を作っておけば、ほとんどのSNSに対応できます。

ブログのアイキャッチ画像も同じサイズで作っておくと、シェアされたときにそのまま使えて便利です。詳しくはブログのアイキャッチ画像の作り方もご覧ください。

OGP画像の確認ツール

設定したOGP画像が正しく表示されるか、事前に確認しておきましょう。

Twitter Card Validator

Twitter公式のチェックツール。URLを入力すると、カードのプレビューが見られます（機能制限あり）。

Card Validator

Facebook シェアデバッガー

Facebook向けですが、OGPの設定内容を詳しくチェックできます。

シェアデバッガー

OGP確認ツール

日本語で使えるOGPチェックツールもあります。「OGP確認」で検索すると見つかります。

まとめ

Twitter/XのOGP画像の設定方法について解説しました。

押さえておきたいポイント:

• 推奨サイズは1200×630px（アスペクト比1.91:1）
• twitter:cardは「summary_large_image」を指定
• og:imageは絶対URLで記述
• 表示されないときはキャッシュクリアを試す
• 文字は大きく、少なく（15文字以内）
• 右下には重要な情報を置かない
• 1200×630pxで作れば他のSNSにも対応

OGP画像が正しく設定されているかどうかで、記事のクリック率は大きく変わります。

サムネAIを使えば、デザインが苦手でも数分でOGP画像が作れます。ブログを書いたら、ぜひOGP画像も設定してシェアしてみてください。