各ページのOGPを確認する方法

2026年6月19日

ここでは、OGPタグの設定方法と、各ページのOGPをカンタンに確認できるツールを紹介します。

GA4を使ってアクセス解析の基本を学ぶ入門セミナーです。主要指標の意味を整理し、外部流入や回遊の分析方法を分かりやすく解説します。データの変化の理由を考えられるようになりたい方におすすめです。

OGPとは

OGPとは、”Open Graph Protocol”の略称です。
FacebookやX（旧Twitter）など、SNSでシェアされた際に、そのページのURL、タイトル、概要、アイキャッチ画像を表示させる仕組みです。

関連ツール：各ページのOGPの設定を簡単に確認できる【アナトミー】

OGPタグの設定方法

以下のmetaタグをサイトのhead内に記述します。

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="website　か　blog　か　article" />
<meta property="og:description" content="ページの説明"/>
<meta property="og:url" content="ページのURL" />
<meta property="og:site_name" content="ページのタイトル" />
<meta name="twitter:card" content="summary_large_image" /> 
<meta property="og:image" content="アイキャッチ画像のURL" />

そして、HTMLタグにも以下の記述を追加

<html prefix="og: http://ogp.me/ns#">

これで該当ページをシェアした際に、アイキャッチ画像などが表示されるようになります。

それぞれのOGPタグの説明

og:title・・・ページのタイトル

og:type・・・ページのタイプ。WebサイトのTOPページなら「website」。TOPページ以外は「article」。ブログは「blog」。

og:description・・・ページの説明

og:url・・・ページのURL。絶対パスで表記。

og:site_name・・・ページの名前

og:image・・・ページのアイキャッチ画像。絶対パスで表記。画像サイズは「縦630px×横1200px」だと汎用性が高い。

twitter:card・・・X（旧Twitter）での表示形式を指定するタグ。「summary_large_image」と記述することで、タイムライン上で画像を大きく目立たせて表示できます。

OGPが正しく表示されるか確認する3つの方法

OGPが正しく表示されるか確認する3つの方法
OGPタグをHTMLに記述した後は、意図した通りに画像やテキストが表示されるか、以下の方法で必ずテストを行ってください。

1. ブラウザのソースコードで直接確認する

実際のページを開き、画面を右クリックして「ページのソースを表示」を選択します。検索機能（Ctrl+F または Command+F）を使用して og: や twitter: を検索し、設定したタグがhead内に正しく出力されているか、記述ミスがないかを確認します。

2. 各SNSの公式デバッグツールを使用する

SNS側が提供している公式ツールにページのURLを入力すると、実際の見え方をプレビューできます。また、画像を差し替えたのにSNS上で古い画像が出続けてしまう場合、これらのツールを使ってキャッシュをクリアする必要があります。

Facebook シェアデバッガー
https://developers.facebook.com/tools/debug/

Facebookの開発者向けページにあるツールです。URLを入力して「デバッグ」をクリックすると、プレビューや不足しているタグの警告が表示されます。「新しいスクレイピング情報を取得」ボタンを押すことで、古いキャッシュを強制的に更新できます。