作ったサービスの URL を X などに投稿したとき、画像とタイトルが入った大きなカードで表示されるか、URL の文字だけが表示されるかで、目に留まりやすさは大きく変わります。その見え方を決めているのが「OGP」です。
この記事では、OGP の基本と、画像の推奨サイズ、設定するタグ、うまく表示されないときの確かめ方を紹介します。サイズや仕様は、2026年10月時点の Meta（Facebook）と X の公式の情報をもとにしています。
OGP とは
OGP（Open Graph Protocol）は、Web ページの内容を SNS などに伝えるための仕組みです。 ページの <head> に meta タグを書いておくと、URL がシェアされたときに、そのタイトル、説明、画像を使ってカードが表示されます。
OGP の公式サイトでは、すべてのページに必要な基本のプロパティとして、次の4つが挙げられています。
| プロパティ | 内容 |
|---|---|
| og:title | ページのタイトル |
| og:type | ページの種類（Web サイトなら website、記事なら article など） |
| og:image | カードに表示する画像の URL |
| og:url | ページの正規の URL |
このほかに、説明文の og:description、サイト名の og:site_name、画像の大きさを伝える og:image:width と og:image:height などがあります。
OGP の画像サイズ
迷ったら 1200×630 ピクセル
OGP の画像は、1200×630 ピクセル（横長、比率およそ 1.91:1）で作るのが基本です。 Meta のリンクシェアの画像の案内では、次のように説明されています。
- 画像の最小サイズは 200×200 ピクセル
- ファイルサイズは 8MB 以下
- 高解像度の画面できれいに表示するには 1200×630 ピクセル以上がよい
- 大きな画像のカードで表示するには、少なくとも 600×315 ピクセル
- 比率は 1.91:1 に近いほど、切り取られずに表示される
X での表示
X では、twitter:card というタグでカードの種類を指定します。 大きな画像のカード（summary_large_image）の画像は、X の開発者向けドキュメントによると、比率 2:1、最小 300×157 ピクセルから最大 4096×4096 ピクセル、5MB 未満で、JPG・PNG・WEBP・GIF に対応しています（X Developer Platform「Cards markup」）。
X 専用の画像を用意しなくても、twitter:image がないときは og:image が使われます。1200×630 ピクセルの画像を1枚用意しておけば、多くの場合はそのまま使えます。
端が切れても困らないデザインにする
SNS やアプリによって、画像の比率や表示される範囲が少しずつ違います。 サービス名やキャッチコピーなどの大切な文字は、画像の中央寄りに置き、端に寄せすぎないようにしましょう。
設定する meta タグ
ページの <head> の中に、次のようなタグを書きます。
<meta property="og:title" content="サービス名｜ひとことの説明">
<meta property="og:description" content="サービスの説明を1〜2文で">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="サービス名">
<meta name="twitter:card" content="summary_large_image">
設定のポイントは次のとおりです。
- og:image は、
https://から始まる完全な URL で書く：相対パスでは読み込まれないことがあります - og:image:width と og:image:height も書く：Meta の案内では、これらを書いておくと、画像をすぐに表示できるとされています
- ページごとに内容を変える：トップページ、記事、商品のページなど、ページごとにタイトルや画像を変えると、シェアされたときに内容が伝わりやすくなります
設定できたか確かめる方法
設定したら、実際にどう表示されるかを確かめましょう。 Meta は、URL を入力するとカードの見え方や読み取った情報を確認できる「シェアデバッガー」を公開しています。読み取ったタグや、問題がある場合の警告も表示されます。
そのほか、実際に自分のアカウントで投稿してみる、投稿の作成画面で URL を貼ってプレビューを見る、といった方法で確かめられます。
表示されないときの原因
- og:image の URL が相対パスになっている、または画像が公開されていない：ブラウザで画像の URL を直接開けるか確かめる
- 画像が小さすぎる、大きすぎる：推奨サイズとファイルサイズの上限を確かめる
- ログインが必要なページになっている：SNS の読み取りの仕組みがページを読めない
- SNS 側に古い情報が残っている：画像を変えた直後は、以前の画像が表示されることがある。Meta のシェアデバッガーでは、情報を読み込み直すこともできる
まとめ
- OGP は、シェアされたときのタイトル・説明・画像を SNS に伝える仕組み
- 画像は 1200×630 ピクセルを基本にし、大切な文字は中央寄りに置く
- og:title・og:type・og:image・og:url と、twitter:card を設定する
- 設定したら、シェアデバッガーや実際の投稿で見え方を確かめる
サービスを宣伝する前に、OGP を整えておくと、告知の効果が上がります。宣伝の方法は個人開発アプリ・ゲームの宣伝方法でまとめています。
