この記事の要点：
- OGP（Open Graph protocol）は、ページがSNSなどで共有されたときに表示されるタイトル・説明・画像・URLを、ページの側から指定するための仕組みです。head要素にmetaタグで書きます。
- 仕様（ogp.me）で、すべてのページに必要とされるのはog:title・og:type・og:image・og:urlの4つです。og:descriptionやog:site_nameは加えるとよい項目です。
- Googleの文書に、OGPを検索順位の要因とする説明はありません。一方で、og:titleはタイトルリンクの材料、og:imageは検索やDiscoverのサムネイルの材料の1つとして使われると説明されています。
- X（旧Twitter）はtwitter:cardでカードの種類を指定します。X用のタグが無い項目は、対応するOGPのタグが使われます。
- 設定した後は、ページのソースと各サービスの確認ツールで表示を確かめます。SNSは情報を保存するため、直してもすぐには変わらないことがあります。
OGPとは：共有されたときの表示を指定する仕組み
OGP（Open Graph protocol）とは、ウェブページの題名・説明・画像などを、SNSなどのサービスに伝えるための決まりです。ページのURLがSNSに貼られると、サービスはそのページを読み取り、OGPのタグに書かれた内容でリンクの表示（カード）を作ります。
OGPが無いと、サービスはページの中から題名や画像を推測して表示します。意図しない画像が出たり、説明が途中で切れたりするのはこのためです。OGPを書いておくと、共有されたときに何が表示されるかを、ページを作る側で決められます。
OGPはもともとFacebookが作った仕組みで、現在は多くのSNSやチャットのサービスがリンクの表示に使っています。ただし、どのタグをどう使うかはサービスごとに違います。この記事では、仕様（ogp.me）、Facebook、X、Googleの公式の説明で確かめられる範囲を説明します。
OGPは検索順位に影響するか：Googleでの扱い
Googleの検索セントラルの文書に、OGPのタグを検索順位の要因として扱うという説明はありません。OGPは、主にSNSなどでの表示のための仕組みです。ただし、Googleは一部のOGPのタグを、検索結果の表示の材料として使うと説明しています。
| タグ | Googleでの扱い（公式の説明） |
|---|---|
| og:title | 検索結果のタイトルリンクを作るときの材料の1つ。2024年に材料の一覧に加えられた |
| og:image | Google検索とDiscoverでサムネイルの画像を決めるときの材料の1つ（schema.orgのマークアップとあわせて使う） |
| og:site_name | 検索結果に出るサイト名を決めるときの材料の1つ。最も確実なのはトップページのWebSiteの構造化データとされている |
このため、OGPを書けば順位が上がるとは言えませんが、内容がページと食い違っていると、検索結果の表示にも影響する可能性があります。titleタグとOGPの題名は、同じ内容か、少なくとも矛盾しないようにそろえます。
Discoverの説明では、og:imageにサイトのロゴのような汎用の画像や、文字が多い画像を使わないよう勧めています。
基本のタグと書き方
OGPのタグは、head要素の中にmetaタグで書きます。仕様（ogp.me）の例では、html要素にprefix属性を付けて、ogで始まるタグがOGPのものだと示しています。
<html lang="ja" prefix="og: https://ogp.me/ns#">
<head>
<title>OGPとは？設定方法と確認の手順</title>
<meta property="og:title" content="OGPとは？設定方法と確認の手順">
<meta property="og:description" content="SNSで共有されたときの表示を指定するOGPの書き方と確かめ方。">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.example.com/blog/ogp/">
<meta property="og:image" content="https://www.example.com/images/ogp-1200x630.png">
<meta property="og:image:alt" content="OGPのタグとSNSでの表示の関係を示す図">
<meta property="og:site_name" content="例：サンプル株式会社">
<meta property="og:locale" content="ja_JP">
</head>例のURLや社名は説明用です。実際にはページごとに値を入れます。
必須の4つと、加えるとよいもの
| タグ | 区分（ogp.me） | 書く内容 | 注意点 |
|---|---|---|---|
| og:title | 必須 | ページの題名 | サイト名を付けず、ページの内容が分かる題名にする |
| og:type | 必須 | ページの種類 | 指定が無い場合はwebsiteとして扱われる |
| og:image | 必須 | 共有時に表示する画像のURL | httpsから始まる完全なURLで書く |
| og:url | 必須 | ページの正式なURL | Facebookは、計測用のパラメータなどを付けないURLにするよう説明している |
| og:description | 任意 | 1〜2文の説明 | ページごとに書く。全ページ同じにしない |
| og:site_name | 任意 | サイトの名前 | 表記をサイト全体でそろえる |
| og:locale | 任意 | 言語と地域 | 指定が無い場合はen_USとして扱われる。日本語のページはja_JP |
| og:image:alt | 任意 | 画像の説明 | ogp.meは、og:imageを書くならog:image:altも書くよう勧めている |
トップページと記事ページの書き分け
og:typeは、トップページや一覧ページではwebsite、記事のページではarticleにするのが一般的です。articleの場合、仕様では公開日（article:published_time）などの追加の項目も定められています。
og:urlは、canonicalタグで示す正式なURLと同じにします。Facebookは、og:urlで示したURLを同じページとしてまとめ、「いいね」や共有の数を集計すると説明しています。正式なURLの決め方は「canonicalとは」で説明しています。
og:imageの画像の決め方
共有されたときに最も目に入るのは画像です。サービスごとに推奨の大きさが違うため、それぞれの公式の説明を確かめて決めます。
| サービス | 公式の説明 |
|---|---|
| 高解像度の端末で最もよく表示されるのは1200×630ピクセル。大きな表示の最小は600×315ピクセル。200×200ピクセル未満や8MBを超える画像は使えない | |
| X（summary_large_image） | 縦横比2:1、最小300×157ピクセル、5MB未満 |
| Google（Discover） | 幅1200ピクセル以上の大きな画像を勧めている。ロゴや文字の多い画像は避ける |
1200×630ピクセル前後の横長の画像を1枚用意すると、多くの場面に対応しやすくなります。ただし、サービスによっては画像の一部が切り取られて表示されることがあります。大事な文字や顔は画像の中央に寄せておきます。
画像の重さや形式の決め方は「画像最適化とlazy loadの使い方」で説明しています。og:image:altには、画像を見られない人にも内容が伝わる説明を書きます。書き方の考え方はalt属性とはと同じです。
X（旧Twitter）のカード：twitter:cardの設定
Xでは、OGPに加えてX用のタグで「カード」の種類を指定します。Xの開発者向けの説明では、カードの種類はtwitter:cardで決め、X用のタグが無い項目は、対応するOGPのタグで補うとしています。
| タグ | 内容 | OGPで補えるか |
|---|---|---|
| twitter:card | カードの種類。summary（小さい画像）か、summary_large_image（大きい画像） | 補えない。X用に書く |
| twitter:title | 題名 | og:titleで補える |
| twitter:description | 説明 | og:descriptionで補える |
| twitter:image | 画像 | og:imageで補える |
| twitter:site | サイトのXのアカウント（@から始まる名前） | 補えない。必要なら書く |
OGPを書いてあれば、X用には最低限twitter:cardの1行を加えれば、Xの説明上カードに必要な項目がそろいます。
<meta name="twitter:card" content="summary_large_image">Xの説明では、1ページに使えるカードの種類は1つで、twitter:cardが複数あると最後のものが優先されます。テーマとプラグインの両方が出力していないかを確かめます。
設定する方法：WordPressとHTML
WordPressの場合
WordPressでは、多くの場合、SEOのプラグインやテーマの機能でOGPを出力します。投稿ごとに題名・説明・画像を入れる欄があり、入れなければ記事のタイトルやアイキャッチ画像が使われる作りが一般的です。設定の名前と動きはプラグインやテーマごとに違うため、それぞれの説明を確かめます。アイキャッチ画像の大きさの決め方と WordPress での設定は「アイキャッチ画像とは」で説明しています。
- 使っているSEOのプラグインとテーマのどちらがOGPを出力しているかを確かめます。
- 両方が出力している場合は、どちらか一方を止めます。og:titleやtwitter:cardが2つずつ出ている状態を避けるためです。
- サイト全体の初期の画像（アイキャッチが無いページで使う画像）を設定します。
- 主要な記事で、題名・説明・画像を確かめます。
HTMLを直接書く場合
- 前の節のコード例を、すべてのページのhead要素に入れます。
- og:title、og:description、og:url、og:imageは、ページごとに値を変えます。
- og:imageとog:urlは、httpsから始まる完全なURLで書きます。
- テンプレートで出力する場合は、値が空のページが無いかを確かめます。
設定を確かめる手順
- ページのソースを見る：ブラウザでページのソースを表示し、
og:とtwitter:で検索します。各タグが1つずつあり、値がそのページのものになっているかを見ます。 - 画像のURLを開く：og:imageのURLをブラウザで開き、画像が表示されるかを確かめます。ログインが必要な場所や、外部から読めない場所に画像を置かないようにします。
- Facebookのシェアデバッガーで確かめる：URLを入れると、Facebookが読み取ったタグと、警告やエラーが表示されます。再取得のボタンで、最新の内容を読み直させることもできます。
- Xで確かめる：Xの開発者向けの説明では、カードの確認に検証用のツールを使うよう案内しています。ツールの提供状況は変わることがあるため、使えない場合は実際の表示で確かめます。
SNSのサービスは、一度読み取ったページの情報を保存します。Facebookは画像をURLごとに保存するため、画像を差し替えるときは、同じURLに上書きせず、新しいファイル名にするよう説明しています。また、変更は以後の共有から反映され、すでに共有された投稿の画像は変わりません。古い画像のファイルを消すと、過去の共有で画像が表示されなくなるおそれがあります。
よくある間違いと直し方
| 起きていること | 主な原因 | 直し方 |
|---|---|---|
| 画像が表示されない | og:imageが相対パス（/images/…）で書かれている、画像が外部から読めない | httpsから始まる完全なURLにし、画像のURLを直接開いて確かめる |
| どのページを共有してもトップページの内容が出る | テンプレートで、全ページに同じ値を出力している | og:title・og:description・og:url・og:imageをページごとの値にする |
| 画像を変えたのに古い画像が出る | SNSが以前の情報を保存している | 新しいファイル名で画像を置き、シェアデバッガーなどで読み直させる |
| 共有の数がURLごとに分かれる | og:urlに計測用のパラメータが付いている、canonicalと違うURLを書いている | og:urlをcanonicalと同じ正式なURLにする |
| 同じタグが2つ出ている | テーマとプラグインの両方が出力している | どちらか一方の出力を止める |
| 英語のページとして扱われる | og:localeが無い、またはen_USのまま | 日本語のページはja_JPにする |
よくある質問
OGPを設定しないと、SNSで共有できませんか？
共有はできます。ただし、サービスがページから題名や画像を推測するため、意図しない内容が表示されることがあります。表示を決めたい場合はOGPを書きます。
og:descriptionとmeta descriptionは同じ文でよいですか？
同じでもかまいません。meta descriptionは検索結果の説明文の候補、og:descriptionは共有されたときの説明として使われます。共有される場面に合わせて書き分ける方法もあります。
LINEやSlackなど、ほかのサービスでもOGPは使われますか？
多くのサービスがリンクの表示にOGPを読みますが、どのタグを使い、画像をどう切り取るかはサービスごとに違います。重要な場面で使うサービスがあれば、そのサービスの説明を確かめ、実際に表示を見ます。
og:imageの画像に文字を入れてもよいですか？
SNSでは、題名を入れた画像がよく使われます。ただし、サービスによって画像の端が切り取られることがあり、Googleは検索やDiscoverのサムネイルに文字の多い画像を使わないよう勧めています。文字は少なく大きくし、画像の中央に置きます。
構造化データとOGPは、どちらを書けばよいですか？
目的が違うため、両方を書いてかまいません。構造化データはGoogleなどの検索エンジンにページの内容を伝えるもの、OGPは主にSNSでの表示のためのものです。構造化データについては「構造化データとは」で説明しています。
テクニカルSEOに関するほかの記事は「テクニカルSEOの記事一覧」にまとめています。
SEOAGENTでできること
SEOAGENTでは、記事の作成とあわせて、アイキャッチや見出しの画像を生成できます。作った記事は、タイトル・本文・画像・カテゴリ・タグ・スラッグを設定して、接続したWordPressへ公開・予約できます。OGPのタグをどう出力するかは、WordPress側のテーマやプラグインの設定によります。公開前には、記事の内容と資料・出典を照らし合わせ、確認が必要な点を示します。
参考情報
- The Open Graph protocol（ogp.me）
- Meta for Developers：A Guide to Sharing for Webmasters
- Meta for Developers：Images in Link Shares
- X Developer Platform：Cards markup（2026年10月時点で公開元の構成変更により、元のページは概要ページへ転送）
- Google 検索セントラル：Google 検索のタイトルリンクに影響を与える
- Google 検索セントラル：Google 検索でのサイト名
- Google 検索セントラル：Discover への掲載
