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

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

1.OGPとは

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

2.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 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」だと汎用性が高い。

3.アナトミーで各ページのOGPを確認する方法

Googleアナリティクスを「見える化」するアクセス解析ツール「アナトミー」では、アクセス指標やユーザー動線など解析に関する情報だけでなく、ページの画面キャプチャやリソース情報も持っています。

そのためOGPタグの情報もアナトミーでカンタンに確認することができます。

1.SNSタブをクリック
2.気になるページのタイルをホバー
3.OGPタグの情報が画面キャプチャと一緒に確認できる
各ページのOGPタグの設定内容が画面キャプチャと一緒に確認できる

まとめ

このように画面キャプチャと一緒にサイト全体のOGPタグを素早くカンタンに確認できます。流入が多いページやシェアを目的としているページにきちんとOGPが設定されているか「アナトミー」を使って確認してみましょう。

もしも、気になるページがうまく計測されない、などGoogleアナリティクスの設定に関して懸念点があれば、Googleアナリティクスの設定状況が診断できるサービスも含まれていますので、合せてお試しください。