·10 分

OGP画像のサイズ最適化ガイド|SNSでキレイに表示される設定と作り方

OGP画像の推奨サイズや各SNSの仕様を解説。Twitterやog:imageが正しく表示されない原因と、ブラウザだけで完結する無料ツールを使った具体的な対処法を紹介します。

OGP画像が「崩れる」「切れる」原因はサイズ指定にある

SNSでURLをシェアしたとき、サムネイル画像が途中で切れていたり、極端に小さく表示されたりした経験はないでしょうか。あるいは、自分のサイトをX(旧Twitter)やFacebookに投稿したら、想定と全く違う画像が表示された、というケースもよく聞かれます。

こうした問題の多くは、OGP(Open Graph Protocol)画像のサイズが各プラットフォームの仕様と合っていないことが原因です。OGPはHTMLのmetaタグで設定するもので、og:imageに指定した画像がSNSカードのサムネイルとして使われます。しかし、画像サイズや縦横比が規定から外れていると、プラットフォーム側でトリミングされたり、表示をスキップされたりします。

さらに見落とされがちなのが、ファイルサイズ(容量)の上限です。画像の縦横ピクセル数が正しくても、ファイルが重すぎるとSNSのクローラーが取得に失敗し、画像なしのカードとして表示されることがあります。OGP画像の最適化は「ピクセル寸法」と「ファイル容量」の両方を意識する必要があります。


各SNS・プラットフォームの推奨サイズ一覧

OGP画像の最適なサイズはプラットフォームによって異なります。主要サービスの推奨値をまとめました。

X(旧Twitter)

  • Summaryカード(小さいサムネイル):144×144px以上、縦横比1:1
  • Summary Card with Large Image(横長サムネイル):300×157px以上、縦横比2:1
  • 推奨サイズ:1200×628px
  • ファイルサイズ上限:5MB(JPG/PNG/WebP)

Facebook / Meta

  • 最小サイズ:200×200px
  • 推奨サイズ:1200×630px(縦横比1.91:1)
  • 推奨ファイルサイズ:1MB以下

LinkedIn

  • 推奨サイズ:1200×627px
  • ファイルサイズ上限:5MB

Slack / チャットツール

  • og:imageを取得してプレビュー表示。1200×630px前後が無難

これらを横断的に見ると、1200×630px(または1200×628px) という解像度がほぼすべてのサービスに対応できる事実上の標準サイズです。縦横比は約1.91:1を維持しつつ、JPEG品質を80〜85程度に抑えてファイルサイズを300KB以内に収めると、どの環境でも安定して表示されます。

ただし、既存の画像を流用する場合や、デザイン素材が別のアスペクト比で作られている場合は、リサイズ作業が必要になります。


実践:OGP画像を正しいサイズにリサイズする手順

OGP画像のリサイズ自体は難しい作業ではありませんが、いくつか気をつけたいポイントがあります。

① 元画像の縦横比を確認する

元画像が正方形(1:1)や縦長の場合、単純にリサイズすると1200×630pxに収まらず、余白が生じたり主要な被写体が切り取られたりします。リサイズ前に、画像をどこを中心にトリミングするかを先に決めておくと作業がスムーズです。

② 出力形式はJPEGかWebPを選ぶ

OGP画像には透過(アルファチャンネル)が不要なケースがほとんどです。PNGは品質が高い反面ファイルが重くなりやすいため、JPEGかWebPで書き出すのが現実的です。SNSのクローラーはWebPにも対応していますが、古いクローラーを考慮してJPEGを第一候補にするのが無難です。

③ ツールを選ぶ:Photoshopがなくても問題ない

プロ向けの画像編集ソフトがなくても、ブラウザだけで完結するツールが充実しています。その一つとして 画像リサイズツール があります。このツールの特徴は、アップロードした画像がサーバーに送信されない点です。画像データはブラウザ内だけで処理されるため、社内資料や未公開のバナー画像を扱う場合でも、情報漏洩リスクを気にせず使えます。縦横のピクセル数を数値で直接指定できるので、1200×630pxに合わせる作業が直感的に行えます。

④ リサイズ後にOGPキャッシュをクリアする

画像を差し替えても、SNS側のキャッシュが残っていると古い画像が表示され続けます。Xであれば「Card Validator」、Facebookであれば「Sharing Debugger」を使ってキャッシュを強制更新してください。ツールにURLを入力して「スクレイプ」または「デバッグ」を実行するだけで、新しい画像が反映されます。


OGP画像の最適化がSEOにも影響する理由

OGPはSNS表示のための仕様であり、Googleの検索順位に直接影響するわけではありません。しかし、間接的にSEOへのプラス効果が期待できます。

SNSでシェアされたときに魅力的なサムネイルが表示されれば、クリック率が上がり、リンクが拡散されやすくなります。これがサイトへの流入増加につながり、滞在時間や被リンク獲得に好影響を与えます。また、画像ファイルのサイズを適切に絞ることはページの読み込み速度改善に直結し、Googleが重視するCore Web Vitalsの指標(特にLCPやFID)にも貢献します。

OGP画像を「SNS用の飾り」として後回しにしがちですが、サイトのパフォーマンスとブランド品質を底上げする実務的な施策として捉えると、優先度が変わってくるはずです。

まず手元にあるキービジュアルやアイキャッチ画像を1200×630px・300KB以内に整えるところから始めてみてください。専用ソフトが不要な環境であれば、前述した 画像リサイズツール のようなブラウザベースのツールを活用すると、余計な手間をかけずに作業を完結できます。


ZE

著者

Zerosend Editorial

Zerosend の制作チームによる記事です。ファイルがデバイスの外に出ないことを設計の中心に置き、WASM・Web Worker をベースとするブラウザ完結ツールを開発しています。

Zerosend Editorial について →

© Zerosend Editorial ← Blog Index

関連記事