OGP（og:image・og:title）の設定と最適な画像サイズ

OGP（Open Graph Protocol）は、URL を SNS やチャットに貼ったときに表示されるカード（タイトル・説明・画像）を制御する meta タグ群です。基本は og:title・og:description・og:image・og:url・og:type の 5 つ。画像は 1200×630px の絶対 URL を各ページ固有に指定します。検索順位そのものには効きませんが、シェアされたときのクリック率を大きく左右します。

執筆: JIT株式会社公開: 2026年7月17日

OGP とは何ですか？

OGP（Open Graph Protocol）は、URL を SNS やチャットに貼ったときのカード表示を制御する meta タグの仕様です。ページの HTML に og: で始まるタグを書くと、Facebook・X・LINE・Slack などがそれを読み取り、タイトル・説明・画像を並べたカードを生成します。指定しなければ各サービスが本文から勝手に推測するため、意図しない表示になりがちです。

URL を SNS に貼ると、多くの場合リンクだけでなくタイトル・説明文・画像を並べたカードが展開されます。この見た目を決めているのが OGP です。もともと Facebook が策定した仕様ですが、現在は X・LINE・Slack・Discord など幅広いサービスが同じ og: タグを読み取ります。

OGP を指定しないと、各サービスは <title> や本文、ページ内で最初に見つけた画像などから勝手に推測してカードを組み立てます。運が良ければそれなりに見えますが、無関係な画像が拾われたり説明が途中で切れたりと、制御できません。狙った見た目にするには自分で書くのが確実です。

OGP の基本となる 5 つのタグは何ですか？

og:title・og:description・og:image・og:url・og:type の 5 つです。og:title はカードの見出し、og:description は説明文、og:image はサムネイル画像、og:url はそのページの正規 URL、og:type はコンテンツの種類（記事なら article、トップなら website）を表します。まずこの 5 つを埋めれば、主要な SNS で正しいカードが出ます。

OGP の基本 5 タグと役割
タグ	役割	例
`og:title`	カードの見出し	ページのタイトル
`og:description`	カードの説明文	1〜2 文の要約
`og:image`	サムネイル画像（絶対 URL）	1200×630px の PNG / JPEG
`og:url`	そのページの正規 URL	https://example.com/guide/ogp
`og:type`	コンテンツの種類	記事は `article` / トップは `website`

基本の 5 タグ（head 内）

<!-- 各ページの <head> に置く。name ではなく property で書く -->
<meta property="og:title" content="OGPの設定と最適な画像サイズ">
<meta property="og:description" content="SNS に貼ったときのカード表示を制御する meta タグを解説します。">
<meta property="og:image" content="https://example.com/ogp/article.png">
<meta property="og:url" content="https://example.com/guide/ogp">
<meta property="og:type" content="article">

書式で間違えやすいのが属性名です。OGP は name ではなく property 属性で書きます（property="og:title"）。name で書くと一部のサービスが読み取れません。一方、後述する X 専用タグはname で書くため、同じ <head> の中で両者が混在します。

og:image の最適な画像サイズは？

1200×630px（比率およそ 1.91:1）を推奨します。これは主要 SNS の大きな画像カードに合わせて切れずに収まるサイズで、Facebook も最低 600×315px 以上を求めています。形式は PNG か JPEG、URL は http から始まる絶対 URL で指定します。相対パスやローカルパスは読み取られず、画像が欠けたカードになります。

og:image はカードの中で最も面積が大きく、クリックするかどうかの第一印象を決めます。推奨の 1200×630px は高解像度ディスプレイでも粗く見えにくく、比率 1.91:1 は主要 SNS の大きな画像カードと一致するため、上下・左右が切り取られません。文字を載せる場合は、端が切れても読めるよう中央寄りに配置すると安全です。

URL は必ず http(s) から始まる絶対 URL を指定します。/ogp/article.png のような相対パスは、 SNS 側がドメインを補えず読み取れません。画像は表示前にクローラがダウンロードするため、数百 KB 程度に抑えると取得が安定します。透過 PNG は背景がカード側の色に置き換わるので、カード用途では背景を塗った画像が無難です。

Twitter（X）カードと OGP の関係は？

X は OGP を土台にしつつ、twitter: 系のタグで上書きできます。twitter:title などが無ければ og: の値をそのまま使うため、最低限 OGP さえ書けば X でもカードは出ます。違いはカードの形で、大きな画像で見せたいなら twitter:card に summary_large_image を指定します。画像を X だけ差し替えるなら twitter:image を足します。

X は独自の twitter: タグを持ちますが、twitter:title などが無ければ og: の値をそのまま使います。つまり最低限 OGP さえ書けば X でもカードは出ます。違いはカードの形で、大きな画像で見せるsummary_large_image を出したいときだけ twitter:card を明示します。指定しないと小さな正方形のsummary になることがあります。

X 向けに差分だけ足す

<!-- OGP を土台に、X 向けの差分だけ twitter: で足す -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="OGPの設定と最適な画像サイズ">
<meta name="twitter:image" content="https://example.com/ogp/article.png">
<!-- ★ twitter: 系は og: と違い name 属性で書く -->

OGP はページごとに設定すべきですか？

はい、各ページ固有の og:title・og:description・og:image を設定します。トップページの OGP を全ページで使い回すと、どの記事を貼っても同じカードになり、内容が伝わらずクリック率が下がります。特に記事や商品ページは、そのページの見出し・要約・サムネイルを個別に指定してください。動的サイトでは URL ごとに meta を出し分ける実装が要ります。

OGP の og:title・og:description は、SEO で使うtitle タグやメタディスクリプションと役割が近く、内容もほぼ流用できます。ただし SNS のカードは表示できる文字数が短いため、説明は要点を前に置くと、途中で切れても伝わります。

動的サイトでは、URL ごとに meta を出し分ける実装が必要です。Next.js（App Router）なら、各 page.tsx でmetadata を書き出します。子ルートは親レイアウトの openGraph を継承しないため、ページごとに明示するのが確実です。

Next.js（App Router）での指定

// Next.js (App Router): 各 page.tsx で openGraph を明示する。
// 子ルートは親 layout の openGraph を継承しないため、ページごとに書く。
export const metadata = {
  openGraph: {
    title: "OGPの設定と最適な画像サイズ",
    description: "SNS のカード表示を制御する meta タグ",
    url: "https://example.com/guide/ogp",
    type: "article",
    images: [{ url: "https://example.com/ogp/article.png", width: 1200, height: 630 }],
  },
  twitter: { card: "summary_large_image" },
};

OGP は SEO の順位に効きますか？

検索順位への直接の効果はありません。og: タグは Google のランキング要因ではなく、設定しても順位は上がりません。ただし SNS やチャットでのカード表示を整えると、シェアされたときのクリック率（流入）は明確に上がります。順位ではなく「貼られたときに選ばれるか」に効く、と理解するのが正確です。

OGP を「SEO タグ」と呼ぶ記事もありますが、正確には検索順位の要因ではありません。効くのは、SNS やチャットで拡散されたときの見え方です。整ったカードは無地のリンクより目に留まり、クリックされやすく、結果として流入が増えます。順位を動かすのは構造化データや本文の中身であり、OGP はその外側で「選ばれやすさ」を上げる役割だと切り分けて考えると分かりやすくなります。

設定した OGP はどう確認しますか？

本番公開後に、各サービスのカード検証ツールへ URL を入れて確認するのが確実です。読み取られた og: の値とカードの見た目を表示でき、キャッシュが残る場合は再取得もできます。専用ツールが無いサービスは、非公開の場やチャットに一度貼って表示を見ます。タグは name ではなく property 属性で書く点にも注意してください。

確認の基本は「本番公開してから、対応するデバッガに URL を入れる」です。読み取られた og: の値とカードのプレビューが表示され、値の間違いや画像の欠けをその場で確認できます。専用ツールが提供されていないサービスでは、非公開の場やチャットに一度貼って、展開結果を目視するのが確実です。

機械でチェックできるのは「基本タグが揃っているか」「画像 URL が絶対 URL か」までです。カードの見栄えや文言が適切かは、最終的に人が実際の表示を見て判断します。まずは全ページで og:title・og:image の欠けをゼロにし、次にページ固有の内容へ整える、という順で進めると効率的です。