誰かがFacebook、LinkedIn、TwitterでWebページをシェアすると、プラットフォームはリンクと一緒に表示する Open Graphイメージを取得します。このイメージが間違っていると — サイズが間違っている、形式が間違っている、重すぎる — 丁寧に作ったコンテンツがぼやけたサムネイルや汎用的なプレースホルダーとして表示されてしまいます。このガイドでは、OGイメージをどこでも完璧に見せるために必要なすべてのサイズとフォーマット要件を説明します。

ユニバーサルOpen Graphイメージサイズ

Open Graphプロトコルが推奨し、すべての主要プラットフォームが受け入れる標準サイズは、1.91:1のアスペクト比の1200 x 630ピクセルです。プラットフォーム固有の上書きが必要な場合を除き、サイトのすべてのページにこのサイズを使用してください。1200 x 630では：

Facebookはニュースフィードで全幅表示（最大1200px幅）
LinkedInは大型プレビューカードとして表示（約1200 x 627px）
Twitter/XはSummary_large_imageカードのために1200 x 628pxにクロップ
Slackは最大800px幅で比例した高さと共に展開
WhatsAppは300 x 157サムネイルとしてプレビュー（比率を維持）

主要なコンテンツ（ロゴ、見出し、顔）が中央にあり、どのエッジからも遠すぎない限り、単一の1200 x 630 PNGまたはJPGがクロップの問題なしにこれらすべてのプラットフォームをカバーします。

最小許容サイズ

すべてのページに1200 x 630イメージを生成することが難しい場合、絶対的な最小値は次のとおりです：

600 x 315px: Facebookが大型イメージプレビューに受け入れる最小値。これより小さいと、Facebookは全幅カードの代わりに小さなインラインサムネイルを使用します。
200 x 200px: 小型サムネイルフォールバックの最小値。これは大型OGイメージが指定されていない場合にFacebookが使用するイメージです。
300 x 157px: Twitterのsummary_large_imageの最小値。これより小さいと 144 x 144の正方形サムネイルにフォールバックします。

1200 x 630を守れば、これらの最小値に達することはありません。

プラットフォーム固有の詳細

1200 x 630は普遍的に安全ですが、知っておく価値のあるいくつかのプラットフォーム固有の特性があります：

Facebook: 1.91:1の比率のイメージを優先します。8MBを超えるイメージは拒否されます。FacebookはOGイメージを積極的にキャッシュします — イメージを更新するときは Sharing Debuggerツールを使ってキャッシュを更新してください。
Twitter/X: 大きなプレビューが表示されるには、twitter:cardメタタグをsummary_large_imageに設定する必要があります。それがないと、OGイメージが正しくても、Twitterは144 x 144の正方形にフォールバックします。
LinkedIn: イメージを1200 x 627（わずかに異なる比率）にクロップします。エッジのクロップを避けるため、すべての重要なコンテンツを中央の1200 x 600セーフゾーンに収めてください。
iMessage / iOS: リンクプレビューにOGイメージを使用します。Appleはサイズの違いからリンクプレビューにPNGよりJPGを好みます。

ファイル形式：JPG vs PNG vs WebP

ほとんどのプラットフォームはOGイメージにJPGとPNGの両方をサポートしています。それぞれのトレードオフは：

JPG: 写真や多くの色を持つイメージに最適です。品質85の1200 x 630 JPGは通常80〜150KBで、すべてのプラットフォーム制限内に収まります。
PNG: グラフィック、テキストが多いイメージ、ロゴ、鋭いエッジのあるスクリーンショットに最適です。ロスレスPNGはすべてのピクセルを保存しますが、大きなファイルを生成します（1200 x 630イメージで200〜500KB）。
WebP: すべてのクローラーや古いプラットフォームでOGイメージ形式として完全にサポートされているわけではありません。最大互換性のためにJPGまたはPNGを使用してください。

OGイメージのファイルサイズは1MB未満に保ってください。ほとんどのプラットフォームは最速の読み込みのために300KB未満を推奨しています。アップロード前に目に見える品質の損失なしにファイルサイズを縮小するには、画像圧縮を使用してください。

OGイメージのデザイン

OGイメージはマーケティング素材です — ソーシャルフィードでの第一印象です。次のデザイン原則に従ってください：

重要なコンテンツを中央80%に収める: デバイスとプラットフォームによって4辺すべてが少し切れる場合があります。イメージの外側10%のロゴと見出しは切れる危険があります。
最小24pxの読みやすいテキストを使用: OGイメージはしばしば400〜600px幅で表示されます。ソースイメージで24pxより小さいテキストはプレビューサイズで判読できなくなります。
ブランドを含める: コーナーのロゴやブランドカラーは、リンクがどのサイトのものかを即座に伝え、クリック率を高めます。
高コントラストを使用: 明るい背景に暗いテキスト（またはその逆）により、小さな画面でも読みやすさが保証されます。

OGイメージの作成とリサイズ方法

OGイメージを正確に1200 x 630にリサイズする必要がある場合は、 Picovertの無料イメージリサイザーを使って、ソフトウェアのインストールなしに数秒で正確なピクセル寸法を設定できます。形式変換（例：PNGからJPG）は、イメージコンバーターがブラウザで即座に処理します。リサイズ後、結果をイメージコンプレッサーで処理して、推奨される300KB未満のファイルサイズ目標を達成してください。

OGイメージのテスト

公開前に必ずOGの実装を検証してください：

Facebook Sharing Debugger: Facebookがリンクプレビューをどのようにレンダリングするかを正確に表示し、キャッシュを強制的に更新できます。
Twitter Card Validator: Twitterカードをプレビューし、欠落しているメタタグをフラグします。
LinkedIn Post Inspector: LinkedInのキャッシュをクリアし、現在のプレビューを表示します。
opengraph.xyz: 複数のプラットフォームでOGレンダリングを一度にシミュレートするサードパーティツールです。

正しいサイズ（1200 x 630）、クリーンなデザイン、300KB未満のファイルサイズにより、シェアされるたびに Open Graphイメージがプロフェッショナルに見え、コンテンツがクリックを得る最良の機会を与えます。