OG画像の最適サイズとmeta設定(2026年版)

「シェアしたのに画像が出ない」「画像を差し替えたのに古いまま」——OGP まわりのトラブルは、 サイズ選定・metaタグの書き方・キャッシュの3点でほぼ説明できます。結論は1200×630px(1.91:1)を1枚用意し、og:image:width/height と twitter:card を明示すること。本記事ではこのサイズが標準である計算上の根拠、 X・Facebook・LINE・Discord・Slack それぞれの表示仕様、キャッシュクリアの具体的な手段まで解説します。

The de facto standard OG image size is 1200×630 (1.91:1): one file that survives Facebook, X's 2:1 large card, LINE, Discord and Slack. This guide covers the math behind that number, the exact meta tags including og:image:width/height, and how to flush each platform's cache.

TL;DR

• 推奨は 1200×630px(1.91:1)。Facebookの推奨値で、Xの2:1クロップでも上下15pxずつしか欠けない
• og:image は https の絶対URLで指定(相対パスは多くのクローラが解釈しない)
• og:image:width/height を書くと Facebook の初回シェアから画像が表示される
• Xで大きく出すには twitter:card=summary_large_image が必須。なければ小さな summary 扱い
• 形式は PNG / JPEG が安全。SVG は全SNS非対応。実務の容量目安は 300KB以下
• 古い画像が出続けるのはキャッシュ。デバッガで再取得、なければ ?v=2 でURLを変える

1. なぜ 1200×630(1.91:1)が標準なのか / Why 1200×630 is the standard

1200×630 は Facebook が公式に推奨してきたサイズです(高解像度端末向けに 1200×630 以上、 大型カード表示の最低ラインが 600×315、200×200 未満はエラー)。比率にすると 1200 ÷ 630 ≈ 1.905、通称 1.91:1 です。

このサイズが「全SNS共通の1枚」として機能する理由はクロップ計算にあります。 X の大型カードは 2:1なので、1200×630 を 2:1 で中央クロップすると 1200×600 —— 欠けるのは上下 15px ずつだけです。 逆に LINE のトークプレビューや X の summary カードのように 1:1に近いクロップでは 中央の 630×630 だけが残り、左右 285px ずつが切り落とされます。 したがって実務上のデザインルールはひとつ:ロゴや重要なテキストは中央 630×630 のセーフエリアに収める。 これで 1.91:1 / 2:1 / 1:1 のどの表示でも破綻しません。

Cropping 1200×630 to X's 2:1 card trims only 15px top and bottom; square crops keep the central 630×630. Keep logos and text inside that central square and one image fits every platform.

2. metaタグの正しい書き方 / The correct meta tags

コピペ用の完全セットです。OGP は property 属性、Twitter Card は name 属性を使う点に注意してください。

<!-- Open Graph(全SNS共通の基本セット) -->
<meta property="og:title" content="記事タイトル" />
<meta property="og:description" content="記事の要約(全角80字程度まで)" />
<meta property="og:url" content="https://example.com/articles/og-guide/" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example.com/og/og-guide.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="OG画像サイズ解説のバナー" />

<!-- X (Twitter) — これが無いと小さい summary カードになる -->
<meta name="twitter:card" content="summary_large_image" />

og:image:width/height 指定の効果 — Facebook のクローラは画像本体を非同期で取得します。寸法指定がないと、初回シェアの時点では画像サイズが不明なため画像なしのカードが表示されてしまうことがあります。width/height を書いておけば クローラは取得完了を待たずに正しいレイアウトで描画できます。値は実画像と必ず一致させてください (不一致はレイアウト崩れの原因になります)。

もう1つの頻出ミスが 相対パスです。og:image="/og/cover.png" のような 指定は多くのクローラが解釈できず、画像なし扱いになります。必ず https:// からの絶対URLで書きます。 X は twitter:title 等が無ければ対応する OG タグへフォールバックするため、 画像URLを二重に書く必要はありません。

Facebook fetches images asynchronously — without og:image:width/height the very first share may render without an image. Always use an absolute https URL; X falls back to OG tags, so you only need twitter:card on top of the OG set.

3. SNS別の表示仕様 / Per-platform rendering

実務で効く知識を2つ。X は og:description をカードに表示しません。 伝えたい要点はタイトルと画像内のテキストに載せる必要があります。 また Discord が twitter:card を解釈するのは意外と知られていない仕様で、 「Discordで画像が小さい」場合の原因はほぼ summary_large_image の指定漏れです。

X ignores og:description on cards, so put key copy in the title and the image itself. Discord also honors twitter:card — a tiny thumbnail there almost always meanssummary_large_image is missing.

4. ファイルサイズと形式 / File size and format

• PNG — テキスト・ロゴ・図形主体のバナーに最適。重い場合は8bit減色で大幅に軽量化できる
• JPEG — 写真ベースの画像向け。品質80前後で十分
• WebP — X・Facebook・Discord は対応済みだが、一部チャットアプリや古いクローラに無視されるリスクが残る。確実性なら PNG / JPEG
• SVG — 主要SNSすべて非対応。OG画像には使えない
• アニメGIF — X では最初のフレームのみ静止画として表示される

公称上限は Facebook 8MB・X 5MB ですが、上限近くまで使うのは悪手です。クローラには取得タイムアウトがあり、 重い画像は「取得失敗 = 画像なしカード」に直結します。実務の目安は 300KB以下。 1200×630 の PNG なら減色、JPEG なら品質調整で容易に収まります。 元画像が大きい場合はImage Resizerで 1200×630 にリサイズしてから書き出すのが手早い方法です。

Hard limits are 8MB (Facebook) and 5MB (X), but crawlers time out on heavy files — keep OG images under ~300KB. Use PNG for text-heavy banners, JPEG for photos; SVG is not supported anywhere.

5. キャッシュクリア方法 / Clearing link preview caches

どのSNSもリンクプレビューを一定期間キャッシュするため、og:image を差し替えても 即座には反映されません。プラットフォーム別の更新手段は次のとおりです。

全プラットフォームに効く最終手段が、画像URL自体を変えてしまうクエリ文字列方式です。

<!-- クローラには別リソースに見えるため、キャッシュを確実にバイパスできる -->
<meta property="og:image" content="https://example.com/og/og-guide.png?v=20260611" />

Use the Facebook Sharing Debugger, LINE Page Poker or LinkedIn Post Inspector to force a re-scrape. X's validator no longer previews cards; its cache expires in about a week. Appending?v=Nto the image URL busts every platform's cache at once.

English summary

The recommended Open Graph image size in 2026 is still 1200×630 pixels (1.91:1). It is Facebook's documented recommendation (600×315 minimum for large cards, 8MB max), and the math makes it universal: cropping 1200×630 to X's 2:1 summary_large_imagecard only trims 15px from the top and bottom, while square-ish crops (LINE chats, X summary cards) keep the central 630×630 — so keep logos and text inside that central square. In your markup, setog:image to an absolute https URL (relative paths break most crawlers), and declareog:image:width and og:image:height: Facebook fetches images asynchronously, and without explicit dimensions the first share of a fresh URL may render with no image at all. Add<meta name="twitter:card" content="summary_large_image"> or X falls back to the small square summary card; note that X does not show og:description on link cards, and Discord also reads twitter:cardto decide between a large embed and a small thumbnail. Use PNG for text-heavy banners and JPEG for photos; SVG is unsupported everywhere, and animated GIFs show only their first frame on X. Although hard limits are generous (8MB Facebook, 5MB X), keep files under roughly 300KB so crawlers do not time out. When you replace an image, flush caches with the Facebook Sharing Debugger ("Scrape Again"), LINE Page Poker, or LinkedIn Post Inspector. X retired its card preview tool in 2022 and refreshes its cache in about a week; Discord and Slack offer no official debugger — append a query string like ?v=2to the image URL, which busts every platform's cache at once because crawlers treat it as a new resource.

まとめ

• 1200×630(1.91:1)を1枚。重要要素は中央 630×630 のセーフエリアに収める
• og:image は https 絶対URL + og:image:width/height + twitter:card=summary_large_image の3点セット
• PNG/JPEG で 300KB 以下。SVG 不可
• 差し替え時はデバッガで再スクレイプ。Discord/Slack はクエリ文字列でURLごと変える

関連ツール / Related tools

• Meta Tag Generator — OGP/Twitter Card のmetaタグ一式を生成
• Aspect Ratio Calculator — 1.91:1 / 2:1 のクロップ寸法を計算
• Image Resizer — 1200×630 へのリサイズをブラウザ内で完結

関連ガイド / Related guides

• CSS aspect-ratio で比率を固定する / CSS aspect-ratio property guide
• ブラウザ完結の無料開発ツール15選 / Browser-only dev tools comparison
• HTMLエスケープとXSS対策の基本 / HTML escaping & XSS prevention