デザインリサイズプロ
トップブログOGP画像のサイズ・設定方法・確認ツール【SNSシェア最適化】
OGP画像のサイズ・設定方法・確認ツール【SNSシェア最適化】

OGP画像のサイズ・設定方法・確認ツール【SNSシェア最適化】

OGP画像の推奨サイズ、Facebook・X（Twitter）・LINEの規定、HTMLへの設定方法、シェア表示の確認ツールまで、SNSシェア最適化に必要な知識をわかりやすく解説します。

OGP画像 サイズOGP 設定方法Twitter Card サイズ

OGP画像のサイズ・設定方法・確認ツール【SNSシェア最適化】

記事やLPのURLをSNSでシェアしたとき、画像がうまく表示されなかったり、意図しないサイズで切れてしまったりすることはありませんか？その原因のほとんどは、OGP（Open Graph Protocol）の設定が不十分であることにあります。このガイドでは、OGPとは何か・各SNSの画像サイズ規定・HTMLの設定方法・確認ツールまで、SNSシェアを最適化するための知識を体系的に解説します。

OGPとは何か

**OGP（Open Graph Protocol）**は、WebページがSNSでシェアされたときに表示される情報（タイトル・説明・画像）を制御するためのメタデータ規格です。FacebookがもともとWeb標準として策定し、現在はX（Twitter）・LINE・Slackなど多くのプラットフォームがOGPをベースにリンクプレビューを生成しています。

OGPが正しく設定されていないと：

  • 画像が表示されない
  • ランダムな画像が使われる
  • テキストのみのリンクが表示される

などの問題が起き、SNSでのクリック率（CTR）が大幅に低下します。

OGP画像の基本仕様

OGP画像として設定する画像には、以下の基本仕様があります。

項目 推奨値
推奨サイズ 1200 × 630 px
最小サイズ 600 × 315 px
アスペクト比 1.91:1
ファイル形式 JPEG / PNG（GIFは非推奨）
最大ファイルサイズ 8MB（Facebookの場合）
推奨ファイルサイズ 1MB以下

1200×630pxが推奨される理由: FacebookやXの「Large Image Card」形式に最適化されたサイズで、SNSのフィード上で最も大きく表示されます。

プラットフォーム別 OGP画像サイズ規定

Facebook

項目 仕様
推奨サイズ 1200 × 630 px
最小サイズ 600 × 315 px
アスペクト比 1.91:1
最大ファイルサイズ 8MB
非推奨サイズ 200 × 200 px以下（表示されない）

注意点: 1200×630pxより小さい画像は、フィード上で小さいサムネイルとして表示されます。クリック率を上げるには推奨サイズを使用することが重要です。

X（旧Twitter）の Twitter Card

XはOGPとは別に「Twitter Card」という独自の仕様があります。OGPを設定したうえで、Twitter Card固有のmetaタグを追加することでXでの表示を最適化できます。

カードタイプ サイズ 特徴
Summary Card（小） 144 × 144 px（サムネイル） テキスト中心・画像は小さい
Summary Large Image 1200 × 628 px 大きな画像で表示・CTR高い
App Card — アプリ配布向け
Player Card — 動画・音声コンテンツ向け

推奨: summary_large_image を使用することで、フィード上で画像が大きく表示されCTRが向上します。

LINE

LINEでURLをシェアするとリンクプレビューが表示されます。LINEのOGP対応はFacebookの仕様に準拠しています。

項目 仕様
推奨サイズ 1200 × 630 px
最小サイズ 200 × 200 px
アスペクト比 1.91:1（推奨）
最大ファイルサイズ 1MB以下推奨

Slack・Discord

チームコミュニケーションツールでのリンク共有もOGPを使用します。

プラットフォーム 表示画像サイズ 備考
Slack OGPの og:image を使用 1200×630px推奨
Discord OGPの og:image を使用 1200×630px推奨

OGP・Twitter Card のHTMLへの設定方法

基本的なOGPタグ（HTML <head> 内に記述）

<!-- OGP基本タグ -->
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの説明文（150字以内推奨）" />
<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="website" />
<meta property="og:site_name" content="サイト名" />

Twitter Card 追加タグ

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@TwitterHandle" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:description" content="ページの説明文" />
<meta name="twitter:image" content="https://example.com/ogp-image.jpg" />

各プロパティの説明

プロパティ 内容 文字数目安
og:title ページタイトル 40〜70字
og:description 説明文 80〜150字
og:image 画像のURL（絶対パス必須） —
og:url ページのURL —
og:type ページの種類（website / article） —

CMSごとのOGP設定方法

WordPress

WordPressでOGPを設定するには、Yoast SEOまたはAll in One SEOプラグインが最も簡単です。

  1. プラグインをインストール・有効化
  2. 各記事の編集画面で「ソーシャル」タブを開く
  3. Facebook / Twitter用のOGP画像を個別に設定

Next.js

// app/layout.tsx または各ページの metadata
export const metadata = {
  openGraph: {
    title: 'ページタイトル',
    description: 'ページの説明文',
    images: [
      {
        url: 'https://example.com/ogp-image.jpg',
        width: 1200,
        height: 630,
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    images: ['https://example.com/ogp-image.jpg'],
  },
};

Shopify

Shopifyでは、テーマの theme.liquid または各テンプレートに直接OGPタグを記述します。多くの有料テーマはOGPが標準で設定されています。

OGP設定の確認ツール

OGPを設定した後は、実際にどう表示されるかを確認ツールでテストします。

ツール名 URL 対応プラットフォーム
Facebook シェアデバッガー developers.facebook.com/tools/debug Facebook
Twitter Card Validator cards-dev.twitter.com/validator X（Twitter）
LINE OGP チェッカー poker.line.me LINE
Open Graph Preview opengraph.xyz 複数プラットフォーム
Social Share Preview socialsharepreview.com 複数プラットフォーム

注意: URLが変更された場合や画像を差し替えた場合は、Facebookシェアデバッガーの「再クロール」を実行してキャッシュを更新する必要があります。

OGP設定でよくある失敗と対策

失敗1: og:image に相対パスを使っている

<!-- NG: 相対パス -->
<meta property="og:image" content="/images/ogp.jpg" />

<!-- OK: 絶対パス -->
<meta property="og:image" content="https://example.com/images/ogp.jpg" />

og:image は必ず絶対URLで指定してください。相対パスはSNSのクローラーに正しく認識されません。

失敗2: 画像がHTTPSでホスティングされていない

HTTPS接続でない画像URLは、セキュリティ上の理由でFacebookやXに表示されないケースがあります。画像は必ずHTTPS経由で配信してください。

失敗3: 古いキャッシュが残っている

OGP画像を差し替えても、SNS側にキャッシュが残っていると古い画像が表示されます。上記の確認ツールで「再クロール」を実行して強制更新してください。

失敗4: og:image のサイズが小さすぎる

200×200px以下の画像はFacebookで表示されません。また600×315px未満の場合は小さなサムネイルとして表示されます。必ず1200×630px以上で用意しましょう。

OGP画像デザインのベストプラクティス

項目 推奨
サイズ 1200 × 630 px
テキストの割合 画像全体の20%以内（Facebookのガイドライン）
ブランドロゴ 右下または左上に小さく配置
背景 単色または清潔なビジュアル
フォント 太めで視認性が高いもの
ファイル形式 JPEG（容量が軽い）推奨
ファイルサイズ 1MB以下

全サイズに一括対応するなら

OGP画像・SNS投稿・EC商品画像など複数サイズの変換を手軽に行いたい方向けに、プリセット選択だけで全プラットフォームのサイズに一括変換できるツールをご用意しています。登録不要・無料で今すぐお試しください。

無料で試してみる →

3回まで無料。クレジットカード不要。

Try it free

まず、試してみてください。
無料です。

登録不要・クレジットカード不要。今すぐデザインをアップロードして、AIリサイズの精度を体験してください。

デザインリサイズプロ を試す
← ブログ一覧に戻る