OGPとは？2026年最新のサイズと設定の基本
SNSでURLをシェアしたとき、画像が出るホームページと文字だけになるホームページ…
どちらをクリックしたくなりますか？
ほとんどの方が、前者ではないでしょうか？
このときに関係してくるのが「OGP（オープングラフプロトコル）」という仕組みです。
X（旧Twitter）やFacebook、LINEなどのSNSでURLをシェアしたときに表示される、記事タイトル、概要、アイキャッチ画像などを正しく表示させるための仕組みのことです。
地味に見えますが、ホームページの印象を大きく左右する、けっこう重要な設定だったりします。
C3 Design.でもホームページ制作やリニューアルの際には必ずOGPの設定を行っています。
この記事では、実際に検証しながら進めてきた内容をまとめています。
これから設定を見直したい方はぜひ参考にしてみてください。
※本記事は2026年5月に内容を確認・更新しました。
OGPって、そんなに必要？
「そもそも自社のホームページがSNSでシェアされることなんてあるの…？」
と思う方もいるかもしれません。
でも、思いもよらないところでシェアされることはあります。
お客様がお礼の投稿にURLを添えてくれたり、スタッフが情報発信のついでに貼ってくれたり。
そのときに画像がきれいに表示されるかどうかで、クリック率がかなり変わってきます。
OGPが設定されていないと、URLを貼ってもただの文字列になってしまいます。
ページ内容が一目で伝わる画像が出ていたら、ついクリックしてみたくなりますよね。
OGP画像は、「SNS上のアイキャッチ（※）」のようなものです。
投稿を開いてもらうきっかけとして、ブランディングや認知向上にも役立ちます。
※ブログなどでユーザーの目を引きつけ、興味を持たせるための画像のことです。
OGPサイズ（2026年現在）
基本サイズは、変わらず 横1200px × 縦630px（16:9比率） が基準です。
このサイズで設定しておけば、FacebookやX（旧Twitter）、LinkedInなど主要SNSで、ほぼ問題なく表示されます。
ただし、SNSごとに表示比率が微妙に異なります。
| サービス | 表示形式 | 推奨サイズ |
|---|---|---|
| 横長（シェアカード） | 1200×630px | |
| X（旧Twitter） | 横長 or 正方形 | 1200×675px前後 |
| LINE | 正方形に近い | 1200×1200px推奨（自動トリミングあり） |
SNSごとにサイズだけでなく、トリミングの位置も違うため、どのSNSでも切れて困らないよう中央に重要情報を配置するのがコツです。
OGP画像制作のコツ（実例あり）
ここでは、実際にC3 Design.で制作したサンプルのOGP画像を例に紹介します。
OGPは各SNSで表示領域が異なるため、まずは最大サイズ「1200×630px」をベースに制作します。
このサイズを基準にしておけば、拡大縮小されても劣化しにくく、画質も安定します。
ただし、LINEなど正方形に近いプレビューへの対応も必要です。
中心部分に主要なテキストやロゴを収めることを意識してみてください。
具体的には、中央630×630px（正方形）エリアを想定してロゴや文字を配置します。
左右の背景部分には重要なテキストは入れず、切れても支障がないデザインにしておくと安心です。
[ 制作ポイント ]
- 最大サイズは横1200×縦630px
- 中央630px四方に主要要素（ロゴ・タイトルなど）を配置
- 背景は広めにとり、余白を活かす
- 形式は JPEG または PNG（テキストがある場合はPNG推奨）
OGPの表示を確認する方法
「設定はしたけど、ちゃんと表示されてるのか不安…」
そんなときは、確認ツールを使うのがおすすめです。
OGP画像シミュレーター
https://ogimage.tsmallfield.com/
→ URLを入力するだけで、Facebook・X・LINEでの見え方をまとめて確認できます。
OGP確認ツール（buta3.net）
https://ogp.buta3.net/
→ タイトル・説明文・画像がどのように認識されているかを確認できます。
メタタグの記述ミスも一目でわかるので、設定後のチェックとして使いやすいです。
これらを使えば、SNS上でどう見えるかを事前に確認できるので安心です。
実際に試してから本番公開するのがおすすめです。
まとめ
OGP画像は、1枚の画像で複数のSNSの表示に対応しなければならないため、少し工夫が必要です。
でも、「中央の正方形エリア」を意識して制作すれば、どのSNSでも違和感なく表示されます。
「画像が表示されない」「文字が切れている」といったトラブルを防ぐためにも、正しいサイズとレイアウトで作ってみてくださいね。
