OGP（Open Graph Protocol）は、Webページのタイトルや画像などを、ページの情報として外部サービスに伝えるための仕組みです。SNSなどにURLを貼ったときに表示されるリンクカードの材料になります。
設定するのは主にページのHTML内にあるメタデータです。「画像を記事へ挿入した」「アイキャッチを登録した」だけで、意図したOGPが出力されていると決めず、公開ページの設定と画像URL、共有先の表示を順番に確認しましょう。
この記事はOpen Graphの一次仕様をもとに、設定項目と確認の順序を整理したものです。独自の「設定・取得・表示」の確認表を紹介します。SNSの表示やアクセス増加を保証するものではなく、特定案件の検証結果でもありません。
OGP、アイキャッチ、検索結果の説明文は役割が違う
同じ画像や文言を流用できる場合でも、どこへ出すための情報かを区別すると、修正する場所を見つけやすくなります。
| 項目 | 主に確かめる場所 | 確認したいこと |
|---|---|---|
| 本文の画像・見出し | Webページの本文 | 読者へ伝える内容と表示が合っているか |
| アイキャッチ画像 | CMSの設定、サイト本文・一覧の実装 | どの枠へ使われるか、OGPにも連携する実装か |
| OGPの画像・タイトル | 公開HTMLのog:メタデータ | そのページを紹介する情報になっているか |
| 検索向けの説明等 | title、description等の設定と実際の検索表示 | OGPの設定欄だけを変更して済むかを分けて確認する |
OGPの og:description と、一般的な meta name="description" は別の属性名です。MDNのメタデータ解説も、HTMLのheadで持たせる情報を説明しています。設定欄の名前だけで、どのタグが出るかは断定できません。
基本の4項目と、説明・代替テキストを整理する
Open Graphの基本仕様では、og:title、og:type、og:image、og:url を基本の必須プロパティとして挙げています。追加の説明やサイト名、画像の補足情報も用意できます。
| 項目 | 入れる情報 | 企業サイトでの確認例 |
|---|---|---|
| og:title | ページを表すタイトル | サービス名だけでなく、何の案内か分かるか |
| og:type | ページの種類 | サイト案内や記事等、内容に合う種類か |
| og:image | ページを代表する画像のURL | 会社全体の初期画像が、個別記事にも残っていないか |
| og:url | その内容の正規URL | 別記事や確認用URLを指していないか |
| og:description／og:site_name | 短い説明／所属するサイト名 | 本文の内容と一致し、古い条件が残っていないか |
| og:image:alt | 画像の内容の説明 | 画像を理解するための説明になっているか |
画像の幅・高さなどを補足するプロパティも仕様にあります。画像を指定する場合は og:image:alt も用意するよう説明されています。本文の img 要素の alt と同じ属性ではないため、双方の出力を分けて点検します。
HTMLで書くときの最小例
次は説明用のコードです。URL、画像、タイトルは実際の公開内容へ置き換え、ページの head 内へ出力します。本文へコードを貼り付けても設定にはなりません。
<meta property="og:title" content="サービスの内容と相談方法">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/service/">
<meta property="og:image" content="https://example.com/images/service-card.jpg">
<meta property="og:description" content="対象となる相談内容と、依頼前の確認事項を案内します。">
<meta property="og:image:alt" content="サービスの対象と相談の流れを示す図">この例だけで、あらゆる共有先の要件を満たすという意味ではありません。og:type は内容に合わせ、利用するSNSに独自の指定がある場合は、その案内も別に確認します。OGPの共通仕様とサービス固有の仕様を混同しないことが大切です。
WordPressやCMSでは、出力する機能を一つずつ確かめる
テーマ、SEO関連機能、プラグイン、個別開発のどこがOGPを出しているかを、管理担当へ確認します。設定欄を増やす前に、公開HTMLで現在の出力を調べてください。CMSやテーマごとに操作画面が違うため、特定のメニュー名を共通手順として扱うことはできません。
- トップページと個別ページの公開HTMLを確認する。
- OGPに使われている画像・タイトルと、その設定元を対応付ける。
- 全体の初期値と、ページ固有の上書きの優先順を確認する。
- 変更した一つのページで出力を見直し、他の種類のページへの影響も確認する。
複数の og:image が出ていても、直ちに誤りとは限りません。仕様では複数値を表現でき、競合時は先に出るものが優先されます。意図した複数画像なのか、別機能が重ねて出しているのかを区別します。管理画面の保存完了だけで確認を終えないようにしましょう。
CMSそのものの役割を確認したい場合は、CMSの仕組みと企業サイトでの選び方も参照してください。
独自の確認フロー：設定・取得・表示を分ける
次の表はOpen Graphの仕様を、担当者が確認できる作業へ置き換えたものです。結果を残すときは、確認日、対象URL、使った共有先と端末も付けます。
| 段階 | 行うこと | 残す証跡 |
|---|---|---|
| 1：設定 | 公開ページのHTMLでog:title、og:url、og:image等を読む | 対象ページ、出力された値、設定元 |
| 2：取得 | og:imageに書かれたURLで画像を開く。担当者は公開側の取得条件も確認 | 画像URL、表示可否、必要に応じてHTTP応答や制限の確認結果 |
| 3：表示 | 利用する共有先のプレビュー等で、対象ページのカードを確認 | 共有先、端末、表示された画像と文言、切れや未反映の有無 |
ブラウザで自分が画像を見られることと、外部サービスが同じ画像を取得できることは別です。認証を求める画像、外部アクセスを制限した環境などは、公開を担当する技術者と条件を確認します。実際の共有投稿をしなくてもプレビュー等で確認できる範囲を先に使い、公開投稿は担当者の運用ルールに沿って行います。
共有先に古い内容が出るときは、変更を重ねる前に記録する
まず現在の公開HTMLにある値と、画像URLで開く内容を確認します。その二つが新しいのに共有先だけ古く見えるなら、共有先の再取得や表示条件について、当該サービスの案内を確認します。共通の待ち時間や「この操作で必ず更新される」という手順を決めつけないでください。
逆に、公開HTML自体が古ければ、CMSの保存先、公開処理、サイト側のキャッシュ等を調べる材料になります。原因が分からないまま画像名やページURLを何度も変えるより、どの段階の結果が違うかを一つずつ切り分けます。
OGP画像は、小さなカードと切り抜きで点検する
掲載先が変われば、画像の枠や文章の見える範囲も変わり得ます。制作時は対象の共有先の現行仕様を確認し、その枠で重要な文字や被写体が残るかを確かめます。ある縦横比の画像を作っただけで、全SNSの見え方が同じになるとは扱いません。
- 何を紹介するページか、一目で分かる主題を一つ決める。
- 補足より重要語を大きくし、文字と背景のコントラストを取る。
- 重要な文字や顔を端へ寄せすぎず、小さなプレビューで確認する。
- 画像で書いた内容を、本文や説明文でも理解できるようにする。
- 本文の内容と異なる実績・価格・効果を画像へ加えない。
画像の意味に応じた説明の考え方はW3C WAIの画像チュートリアルも参考になります。本文画像の代替テキストと、共有用の画像説明は、それぞれ使う場所に合わせて確認してください。
公開・更新時に点検するページを決める
トップページだけでなく、サービス紹介、お知らせ、導入事例など、実際に共有する種類のページを確認対象にします。全ページ共通の初期画像でよいものと、個別画像が必要なものを管理表に残すと、更新担当へ引き継げます。
運用全体の点検はホームページ公開後の運用・改善ガイドを基準にし、本文中の案内を整えるときはWebサイトの内部リンク設計も合わせて確認してください。
よくある質問
OGPを設定すれば必ず画像付きで共有されますか？
設定は表示の材料です。共有先の仕様、取得条件、実際の表示まで確認する必要があります。設定だけで、同じカードの表示やアクセス増加は保証できません。
すべての記事で同じ画像を使ってもよいですか？
サイト共通の案内には使いやすい一方、個別記事の主題が伝わらない場合があります。共有するページの内容を判断できるか、小さなプレビューで確認して使い分けます。
出典・参考資料
一次資料の確認日：2026年10月18日。表と図は、資料の内容を読者の判断に置き換えた独自の整理です。
