2026年最新のOGP画像推奨サイズをプラットフォーム別に解説。Twitter/X、Facebook、LINE、Discordの最適サイズ、テンプレート、作成ツール、よくあるミスと対処法を網羅します。

公開: Apr 14, 2026 by ToolCraft Lab 約12分で読めます

OGP画像サイズ完全ガイド【2026年版】— Twitter/X・Facebook・LINE・Discord推奨サイズ一覧

2026年最新のOGP画像推奨サイズをプラットフォーム別に解説。Twitter/X、Facebook、LINE、Discordの最適サイズ、テンプレート、作成ツール、よくあるミスと対処法を網羅します。

#OGP#SNS#Web制作

OGP画像とは？ — SNSシェア時の「顔」になる重要要素

「せっかく書いた記事がSNSでシェアされたのに、画像が切れていて台無し…」 そんな経験はありませんか？ OGP画像を正しく設定するだけで、クリック率は大きく変わります。

OGP（Open Graph Protocol）画像は、WebページがSNSやメッセージアプリでシェアされた際に表示されるサムネイル画像です。適切なサイズで作成しないと、画像が切れたり、意図しないトリミングが発生したりします。

OGP画像が重要な3つの理由

クリック率（CTR）に直結: 魅力的なOGP画像があると、クリック率が2〜3倍になるケースも
ブランド認知の向上: 統一されたデザインのOGP画像は、ブランドの一貫性を高める
情報の伝達: タイトルや要約をビジュアルで伝えることで、内容の理解が早まる

💡 Tips: OGP画像は「記事の看板」です。看板が汚かったり読めなかったりすると、お店に入ってもらえないのと同じです。

2026年版プラットフォーム別 OGP画像推奨サイズ一覧

各プラットフォームの推奨サイズは年々変化しています。2026年時点での最新情報をまとめました。

主要プラットフォーム比較表

プラットフォーム	推奨サイズ（px）	アスペクト比	最大ファイルサイズ	対応形式
Twitter/X	1200 × 630	1.91:1	5MB	JPG, PNG, GIF, WebP
Facebook	1200 × 630	1.91:1	8MB	JPG, PNG
LINE	1200 × 630	1.91:1	10MB	JPG, PNG
Discord	1200 × 630	1.91:1	8MB	JPG, PNG, GIF
LinkedIn	1200 × 627	1.91:1	5MB	JPG, PNG
はてなブックマーク	1200 × 630	1.91:1	—	JPG, PNG
Slack	1200 × 630	1.91:1	—	JPG, PNG

📌 ポイント: ほぼすべてのプラットフォームで 1200 × 630px が共通の推奨サイズです。迷ったらこのサイズで作れば問題ありません。

Twitter/X のOGP画像設定

Summary Card と Summary Card with Large Image の違い

Twitter/X では2種類のカード表示があります。

カードタイプ	表示サイズ	特徴
`summary`	144 × 144（正方形）	コンパクトな表示、テキスト重視
`summary_large_image`	1200 × 630（横長）	画像が大きく表示、ビジュアル重視

設定に必要なメタタグ

OGPタグを含むメタタグの設定全般については、SEOメタタグ完全ガイドでより詳しく解説しています。

<!-- 基本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/X 専用タグ -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@youraccount" />
<meta name="twitter:title" content="記事のタイトル" />
<meta name="twitter:description" content="記事の説明文" />
<meta name="twitter:image" content="https://example.com/ogp-image.jpg" />

Twitter/X でのセーフゾーン

大きな画像カードでは、上下左右の端が一部切れる場合があります。重要なテキストや要素は画像の中央80%以内に収めましょう。

┌─────────────────────────────┐
│         危険ゾーン           │
│   ┌─────────────────────┐   │
│   │                     │   │
│   │    セーフゾーン       │   │
│   │  （テキストはここに）  │   │
│   │                     │   │
│   └─────────────────────┘   │
│         危険ゾーン           │
└─────────────────────────────┘
上下左右 約10% のマージンを確保

Facebook のOGP画像設定

推奨設定とベストプラクティス

Facebook では og:image タグが最も重要です。以下の点に注意しましょう。

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="画像の説明" />

Facebook固有の注意点

最小サイズ: 200 × 200px 以上が必須（これ未満だと表示されない）
高解像度推奨: 実際には 1200 × 630px 以上を推奨
キャッシュ: OGP画像を変更した場合、Facebook Sharing Debugger でキャッシュをクリアする必要がある
テキスト量: 以前の「20%ルール」は廃止されましたが、テキスト少なめの方がエンゲージメントは高い

キャッシュクリアの手順

Facebook Sharing Debugger にアクセス
対象URLを入力
「Scrape Again」をクリック
新しいOGP画像が反映されたか確認

LINE のOGP画像設定

LINEでのシェア時の表示

LINEでURLをシェアすると、OGP画像がプレビューとして表示されます。LINE特有の注意点を押さえましょう。

推奨サイズ: 1200 × 630px（他プラットフォームと同じ）
正方形への切り抜き: トーク画面では正方形にトリミングされるケースがある
テキストの配置: 中央寄せにしておくと、どのトリミングでも主要情報が残る

LINEで見切れを防ぐコツ

重要な情報は中央の 630 × 630px 内に配置

┌──────────────────────────────┐
│ ← 切れる → ┌──────────┐ ← 切れる → │
│            │  重要な   │            │
│            │  情報は   │            │
│            │  ここに   │            │
│            └──────────┘            │
└──────────────────────────────┘
     1200 × 630px 全体

Discord のOGP画像設定

Discordの埋め込み表示

Discordでは、リンクを貼ると自動的にOGP情報を読み取って埋め込み（Embed）を表示します。

大きな画像: og:image のサイズが十分であれば、大きな埋め込み表示になる
色のカスタマイズ: <meta name="theme-color" content="#5865F2" /> で埋め込みの左線の色を指定可能
対応形式: JPG、PNG、GIF、WebP に対応

<!-- Discord向けの追加設定 -->
<meta name="theme-color" content="#3B82F6" />
<meta property="og:site_name" content="サイト名" />

OGP画像のデザインテンプレート

効果的なOGP画像の構成要素

良いOGP画像には以下の要素が含まれています。

要素	推奨	理由
タイトル	20文字以内	一目で内容が伝わる
サブタイトル	省略可	補足情報を追加
アイコン・ロゴ	サイトロゴ	ブランド認知
背景色・グラデーション	ブランドカラー	統一感
カテゴリラベル	必要に応じて	記事の種類が分かる

OGP画像デザインのDo / Don’t

Do（推奨）:

大きく読みやすいフォントを使う（最低24pt相当）
コントラスト比を確保する（背景とテキストの明暗差）
ブランドカラーを統一する
セーフゾーン内にテキストを配置する

Don’t（避ける）:

小さすぎるテキスト（スマホで読めない）
情報の詰め込みすぎ
低解像度の画像を拡大して使う
著作権のある画像を無断使用する

OGP画像の作成ツール

無料ツール

ツール	特徴	おすすめ度
Canva	テンプレート豊富、ドラッグ&ドロップ	★★★★★
Figma	デザイナー向け、細かい調整が可能	★★★★☆
OGP画像ジェネレーター	URLからテンプレ生成、プログラマブル	★★★★☆
GIMP	高機能な画像編集、無料	★★★☆☆

プログラマブルなOGP画像生成

コードで自動生成する方法もあります。ブログ記事が多い場合はこちらが効率的です。

// Astro + satori を使ったOGP画像自動生成の例
import satori from 'satori';
import sharp from 'sharp';

async function generateOgpImage(title: string, category: string) {
  const svg = await satori(
    {
      type: 'div',
      props: {
        style: {
          width: '1200px',
          height: '630px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          background: 'linear-gradient(135deg, #1e3a5f, #2d5a87)',
          color: '#ffffff',
          fontFamily: 'Noto Sans JP',
          padding: '60px',
        },
        children: [
          {
            type: 'p',
            props: {
              style: { fontSize: '20px', color: '#93c5fd' },
              children: category,
            },
          },
          {
            type: 'h1',
            props: {
              style: { fontSize: '48px', textAlign: 'center', lineHeight: 1.4 },
              children: title,
            },
          },
        ],
      },
    },
    { width: 1200, height: 630 }
  );

  return await sharp(Buffer.from(svg)).png().toBuffer();
}

よくあるOGPのミスと対処法

ミス1: 画像が表示されない

原因と対処法:

原因	対処法
`og:image` のURLが相対パス	絶対URL（`https://` から始まる）にする
画像サイズが小さすぎる	1200 × 630px 以上にする
HTTPS非対応	SSL証明書を設定する
画像が404	URLが正しいか、デプロイされているか確認

ミス2: 画像を更新したのに古い画像が表示される

SNSプラットフォームはOGP情報をキャッシュしています。

# 各プラットフォームのキャッシュクリア方法

# Facebook
# → Sharing Debugger で「Scrape Again」

# Twitter/X
# → Card Validator でURLを入力（自動で再取得）

# LINE
# → Page Poker（https://poker.line.naver.jp/）でキャッシュクリア

# Discord
# → URLの末尾に ?v=2 などのクエリパラメータを追加

ミス3: 画像の重要な部分が切れる

前述の「セーフゾーン」を意識して、重要な要素を中央80%に配置してください。

ミス4: 画像ファイルが重すぎて表示が遅い

# 画像の最適化コマンド例
# JPEGの場合
jpegoptim --max=85 --strip-all ogp-image.jpg

# PNGの場合
pngquant --quality=65-80 ogp-image.png

# WebPに変換（さらに軽量化）
cwebp -q 80 ogp-image.jpg -o ogp-image.webp

OGPの設定をチェックする方法

各プラットフォームの公式ツール

ツール	URL	用途
Facebook Sharing Debugger	developers.facebook.com/tools/debug/	Facebook向けOGPの確認
Twitter Card Validator	cards-dev.twitter.com/validator	Twitter/X向けカードの確認
LinkedIn Post Inspector	linkedin.com/post-inspector/	LinkedIn向けOGPの確認
LINE Page Poker	poker.line.naver.jp	LINE向けOGPの確認

ToolCraft Lab のOGPチェッカー

当サイトでは、URL を入力するだけで主要プラットフォームすべてのOGP表示をプレビューできる OGPチェッカーツール を無料提供しています。

主な機能:

マルチプラットフォームプレビュー: Twitter/X、Facebook、LINE、Discord の表示を一画面で確認
メタタグ一覧表示: 設定されているOGPタグをすべてリストアップ
エラー検出: 不足しているタグや不適切なサイズを自動検出
改善提案: SEO的に改善すべきポイントを提示

ぜひ OGPチェッカーをお試しください。

Astro / Next.js でのOGP設定例

AstroやNext.jsでのブログ構築全般についてはAstroブログチュートリアルも参考にしてください。

Astro での設定

---
// src/components/SEOHead.astro
const { title, description, image, url } = Astro.props;
const ogImage = new URL(image, Astro.site).href;
---

<!-- OGP基本タグ -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImage} />
<meta property="og:url" content={url} />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="サイト名" />

<!-- Twitter/X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={ogImage} />

Next.js (App Router) での設定

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [
        {
          url: post.ogImage,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
      images: [post.ogImage],
    },
  };
}

OGP画像サイズチェックリスト

最後に、OGP画像を作成・設定する際のチェックリストをまとめました。

画像サイズが 1200 × 630px になっている
ファイルサイズが 5MB以下 に収まっている
画像形式が JPGまたはPNG
テキストが セーフゾーン（中央80%）内 に配置されている
og:image に 絶対URL を指定している
og:image:width と og:image:height を指定している
Twitter/X 用の twitter:card タグを設定している
各プラットフォームの公式ツールで 表示を確認 した
画像の alt属性 を設定している

まとめ — OGP画像は「1200 × 630px」を基本にすれば安心

2026年現在、OGP画像の推奨サイズは 1200 × 630px（アスペクト比 1.91:1） がすべての主要プラットフォームで共通しています。このサイズで作成し、セーフゾーンを意識してテキストを配置すれば、どのSNSでもきれいに表示されます。

OGP画像の設定に不安がある方は、当サイトの OGPチェッカーで手軽に確認できます。AI SEO記事作成と組み合わせて、コンテンツとメタ情報の両面からSEOを強化しましょう。URL を入力するだけで、各プラットフォームでの表示プレビューとメタタグの確認ができますので、ぜひご活用ください。