OGP の画像サイズ完全ガイド
Webサイト用のSNSシェア画像
OGP(Open Graph Protocol)は、Webサイトのリンクが各種SNSでシェアされたときに表示される画像のことです。Facebook・X(Twitter Card)・LinkedIn・Slack・Discordなど、ほぼすべてのプラットフォームで1200×630px(約1.91:1)が共通サイズとして使われます。
仕様まとめ
最大ファイルサイズ
5MB(プラットフォームにより変動)
対応形式
JPEG / PNG / WebP
推奨形式
PNG(テキスト鮮明)/ JPEG(写真)
推奨サイズと比率
OGP画像
OGP で失敗しないコツ
✦ 1200×630は「ほぼ全SNS共通」の万能サイズ
Facebook・X(大カード)・LinkedIn・Slack・Discordすべてが1200×630pxを推奨しています。WebサイトのOGP画像を1枚だけ用意するならこのサイズ一択です。
✦ Twitter Cardは2種類ある
X(Twitter)は「summary」(小カード・144×144)と「summary_large_image」(大カード・1200×630)があります。`twitter:card`メタタグで指定可能です。
✦ テキスト要素は中央70%に
OGP画像はSNS上で縮小表示されるため、文字は大きく、画面中央70%以内に収めましょう。サイト名・ロゴは右下や左上の角に配置するのが定番です。
✦ キャッシュに注意(変更が反映されない)
OGP画像を差し替えても、SNS側にキャッシュが残っていて古い画像が表示され続けることがあります。Facebookの「シェアデバッガー」やXの「Card Validator」でキャッシュを更新できます。
ベストプラクティス
OGP画像はSNSでのクリック率を左右する重要な要素です。Webサイトのテーマカラーを活用し、タイトルや要約を入れて「何のページか」を明確に伝えましょう。動的に生成する場合はNext.jsの `next/og` などが便利です。
よくある質問
Q. OGP画像のファイルサイズ上限は?
Facebookは8MB、Xは5MBが上限ですが、表示速度を考えると300KB以下に抑えるのが実用的です。JPEGなら品質80〜85%、文字主体ならPNGで書き出すのがバランスの良い設定です。
Q. OGP画像が正方形に切り取られてしまうのはなぜ?
Xで「summary」カード(小カード)が指定されていると正方形にクロップされます。1200×630pxを活かすには、メタタグで「summary_large_image」を指定してください。
SizeKit で OGP 用画像を作る
OGP の推奨サイズに合わせて、ブラウザだけで画像をリサイズ・クロップできます。
アカウント登録不要・画像のサーバー送信なし。