2026年版！OGP画像の最適サイズ(1200×630)と圧縮・リサイズ手順

Links Create 編集部 ・ 公開: 2026-05-21 ・ 更新: 2026-05-21

Web 記事や LP を SNS でシェアしたとき「画像が見切れる」「文字が切れる」と困ったことはありませんか。OGP (Open Graph Protocol) は SNS 上のサムネイル表示に使われる画像の指定方法で、推奨サイズは 1200×630 ピクセル が業界の定番です。本記事では推奨サイズの根拠、セーフエリアの考え方、SNS 別の表示差、リサイズ・圧縮の実務手順を解説します。用途別の画像サイズ選びを確認する (Pillar) もあわせて参照してください。

1. OGP 画像はなぜ 1200×630 が使われるのか

1200×630 のサイズは Facebook / X (Twitter) / LinkedIn / LINE など主要 SNS の大型サムネイル表示で広く想定されているサイズです。アスペクト比は約 1.91:1 で、Open Graph protocol の慣行として広く普及しています。Google 画像 SEO ガイドライン でも Web 配信用画像の最適化が推奨されています。

なぜこのサイズが定着したのか

OGP の最小限の HTML 記述例

<meta property="og:type" content="article">
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページ説明">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/ogp.png">

2. 失敗しにくい余白と文字配置 (セーフエリア)

1200×630 を制作する際、SNS 別のトリミングや表示比率の違いで画像端が切れることがあります。これを避けるため、中央寄りに重要要素を配置する「セーフエリア」という考え方が広く使われています。

推奨レイアウト原則

避けたい配置パターン

3. SNS 別に気をつけたい表示差

各 SNS は独自のトリミング・拡縮ロジックを持つため、同じ 1200×630 画像でも表示が異なります。

SNS表示の特徴注意点
X (Twitter)summary_large_image で大カード表示上下が若干切られることが多いため、文字は中央寄りに
Facebook1.91:1 比率の大型カードで表示1200×630 ぴったりが理想、サムネイルキャッシュは Sharing Debugger で更新
LINE正方形寄りにトリミングされることが多い中央 1:1 領域に重要要素を集約しておくと安全
LinkedIn1.91:1 比率で広めに表示ビジネス向けのため文字過密を避け、視認性を優先
Slack / Teams 等OGP プレビューカードで表示1200×630 で問題ないが、画像が大きすぎると圧縮されることあり

SNS 各社の仕様は時期によって変更されることがあるため、新規実装や重要なキャンペーンの直前には実機プレビュー (各 SNS の Sharing Debugger 等) で必ず確認してください。

4. 画像 SEO と大きな画像の考え方 (Google Discover)

Google Discover やリッチリザルトでは、大きな画像表示の対象となる条件があります。Google Discover ガイドライン によれば、Discover で大きな画像表示の対象となるには 幅 1,200 ピクセル以上の画像が目安で、max-image-preview 等のメタタグでオプトインする必要があります。

Discover で大きな画像表示を狙うチェックリスト

関連する画像 SEO のベストプラクティス

5. リサイズと圧縮の実務手順

本サイトのツールを使った OGP 画像作成・最適化の典型ワークフロー。

  1. 原寸で制作: デザインツール (Figma / Canva / Photoshop 等) で 1200×630px ちょうどでアートボードを作成。デザインはセーフエリア (中央 80-90%) を意識
  2. 書き出し: PNG (透過要素あり) または JPG (写真メイン) で書き出し
  3. リサイズ確認: 元データが 1200×630 でない場合は 画像リサイズツール で 1200×630 に変更 (縦横比を維持を OFF にして強制リサイズ、または事前にデザイン側で比率調整)
  4. 容量圧縮: 画像圧縮ツール で品質 75-85% を目安に圧縮 (目安 200KB 以下が望ましいが SNS の挙動に依存)
  5. プレビュー確認: 各 SNS の Sharing Debugger / Card Validator で実表示を確認
  6. キャッシュ更新: 過去にシェアされた URL の OGP 画像差し替えは、Facebook Sharing Debugger 等で「再スクレイプ」を実行してキャッシュを更新

OGP 画像の作成 / リサイズ / 圧縮をブラウザ完結で

→ 画像を 1200×630 にリサイズ → 画像容量を軽くする

関連: Discord 用画像サイズを軽くする方法 — SNS 投稿用画像の圧縮詳細

よくある質問

1200×630 以外のサイズでは表示されませんか？

表示自体はされます。Open Graph protocol の og:image は寸法に厳密な必須要件はなく、各プラットフォーム側が独自にトリミング・拡縮します。ただし 1200×630 (アスペクト比約 1.91:1) は X (Twitter) Cards の summary_large_image や Facebook 大カードで広く想定されているサイズで、サムネイル切れ・引き伸ばし劣化を最小化できます。

文字は OGP の中央に置けば必ず見えますか？

中央配置がより安全ですが、絶対ではありません。プラットフォーム別にトリミング比率や表示エリアが異なるため、上下左右にそれぞれ 5-10% 程度の余白 (セーフエリア) を取り、最重要文字は中央 80-90% に収めるのが堅実です。SNS 投稿前にプレビューで実機確認を推奨します。

PNG と JPG のどちらが OGP に向いていますか？

用途で選びます。写真メインなら JPG (容量軽量で同等品質)、ロゴ・文字・透過要素を含むなら PNG (劣化なし)。両者とも主要 SNS で対応します。容量を絞りたい場合は WebP も選択肢ですが、一部の SNS では OGP 用途の WebP 対応が限定的なため、互換性重視は JPG / PNG を推奨します。

OGP 画像にも alt 属性は必要ですか？

Open Graph protocol には og:image:alt というプロパティが用意されており、スクリーンリーダーや代替テキスト用途で有用です。SEO 効果は HTML <img> の alt 属性ほど明確ではありませんが、アクセシビリティの観点から記述しておくのが推奨されます。

関連記事: AVIF と WebP はどちらが安全？ ・ Discord 用画像サイズを軽くする方法 ・ Core Web Vitals 画像最適化

戻る: 画像・QRツール完全ガイド (リサイズと補間アルゴリズムセクションへ)

一次情報源: Google 画像 SEO ガイドライン ・ Google Discover ガイドライン ・ MDN: img 要素 ・ MDN: レスポンシブ画像ガイド ・ Open Graph protocol 仕様は ogp.me、X Cards 仕様は developer.x.com 等で随時変更されるため、重要なキャンペーンの直前には最新仕様を確認してください