Facebookのタイムラインを見ていると、同じようにリンクをシェアしているのに表示が違うことはないでしょうか。これはシェアされた時の表示方法を指定できるOGP（Open Graph protocol）の設定によるものです。

OGP（Open Graph protocol）とは
FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みのこと

　　
Facebook Debugger（Facebook デバッガー）はOGPが正しく設定できているのかをチェックできるサービスで、使わないと意図したとおりの表示にならない可能性があります。

そこで今回は、Facebook Debuggerの使い方についてご紹介します。
　　
参考：
Facebook・TwitterのOGP設定方法まとめ｜ferret
　　

目次

  1. Facebook Debuggerとは
  2. Facebook Debuggerの使い方
  3. Facebook Debuggerを通したあとの画面説明
    1. スクレイピングの実行時間
    2. レスポンスコード
    3. 取得したURL
    4. カノニカルURL
    5. Link Preview
    6. サーバーIP
    7. fb:app_id
    8. og:url
    9. og:type
    10. og:title
    11. og:description
    12. og:image

　　

Facebook Debuggerとは

Facebook Debuggerは、Facebookでシェアされる時のページの表示内容をテストするツールです。Facebookが提供しています。

主な用途は、Facebookシェアの表示を事前に確認したい時や、Facebookでシェアする時に期待とおりの情報が表示されない場合の簡単な原因調査などです。

FacebookなどのSNSに意図したページ情報を伝えるためには、OGP（Open Page Protocol）という仕組みを使い、ページのソース内に以下のように記述します。

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />

Facebookシェアの際には、このOGPタグ情報が参照され、OGPタグの記述がない場合は自動的に推測されます。Facebook Debuggerを使えば、それらの情報を一覧で確認できます。
　　

Facebook Debuggerの使い方

Facebook Debuggerのページにアクセスします。ツールを使うためにはFacebookへのログインが必要です。

6817_001.png
検索窓に調べたいページのURLを入力し「デバッグ」ボタンをクリックします。この時、URLはhttpから入力し、末尾には不要なパラメーターを付けないようにしましょう。

Facebook Debuggerをとおした後の画面説明

6817_002.png

結果はいくつかのまとまりにわかれています。まず「When and how we last scraped the URL」のまとまりから順に見ていきましょう。この部分は、最後にFacebookクローラーにスクレイピング（ページ上の情報を抽出・整形）された際の情報です。
　　

スクレイピングの実行時間

Facebookクローラーによってスクレイピングされた日時です。コンテンツや画像の更新後、最新の情報が反映されない場合、これが古い日時でないか確認しましょう。
　　

レスポンスコード

Facebookのクローラーが正常にページを読み込むことができれば、表示される値は200です。読み込めなかった場合、そのエラーの理由に応じた値が表示されます。
　　

取得したURL

スクレイピングしようとしたページのURLです。基本的には検索窓に入力したURLと一致します。
　　

カノニカルURL

スクレイピング後に判断されたページのURLです。カノニカルとは、検索エンジンやページのクローラーが判断するURLを意図的にコントロールできる仕組みです。少し複雑な概念ですが、以下の記事に詳しくまとまっています。
　　
参考：
canonical属性タグの使い方〜URLの正規化でSEOのマイナス評価を避けよう
　　

Link Preview

Facebookのニュースフィードで情報が流れるときのプレビューです。
　　

サーバーIP

サーバーのIPアドレスです。
6817_003.png

次に「Based on the raw tags, we constructed the following Open Graph properties」のまとまりです。OGPタグの情報から判断される表示内容です。
　　

fb:app_id

これを設定することで、Facebookがページとその管理者を判別できるようになります。また、Facebookインサイトで各種分析ができるようになります。
　　

og:url

不要なパラメーターを含めない識別URLです。各URLに対する「いいね」や「シェア」の数は、このURL単位で集計されます。PC用とモバイル用でページのURLがわずかに異なる場合、どちらかに「いいね」や「シェア」を集約するといった使い方もできます。
　　

og:type

コンテンツのメディアのタイプです。Facebookのニュースフィードで情報が流れるときの表示形式は、この表記によって決定されます。指定がなければ「website」となります。よく使われるのは一般的なWebサイトを示す「website」と、Webサイト内の特定の記事やページを示す「article」です。

1つのURLに対して割り当てることが出来るog:typeは1つで、複数は使用できません。
og:typeの一覧はFacebook開発者向け公式リファレンスの「Object Types」から確認できます。
　　

og:title

Facebookでシェアされるときの記事のタイトルです。サイト名などは含みません。
　　

og:description

Facebookでシェアされるときのページコンテンツの簡単な説明です。2～4文が一般的です。
　　

og:image

Facebookでシェアされるときの画像です。なお、十分な解像度で表示するには1200 x 630ピクセル以上の画像が望ましく、大きい画像を表示するには最小でも600 x 315ピクセルが必要です。200 x 200ピクセルに満たないとエラーになります。
　　

まとめ

FacebookやTwitterなどのSNSでは、OGPが設定されているかいないかでクリック率が大きく変わってしまいます。クリックしてページに流入してもらわなければ意味がありません。

OGPを設定したら、必ずFacebook Debuggerを使って流入してもらえるようにしましょう。