Facebook の OGP 設定の有無による違い

やっと Facebook の OGP の設定の有無で何が変わるのかを理解できたのでメモ．まず，Facebook の個々のページには（それ以外のページもいろいろありますが）「ウォール」と言うページと「ニュースフィード」と言うページがあるようです．言葉が正確かどうかは分かりませんが，これらはそれぞれ，以下の情報を表示するページのようです．

「ウォール」は，自分の活動履歴が残るページ
「ニュースフィード」は，自分＋友達の活動履歴が残るページ

ただし，ここで注意が必要なのは，どうも「ニュースフィード」には「ウォール」の全ての履歴が残る訳ではないようです．そして，この「ニュースフィードに残るかどうか」で重要になるものに OGP 設定の有無があるようです．実験として，OGP の設定をしているページとしていないページを作成して，それぞれのページから「いいね！」ボタンを押してみました．

http://cielquis.net/smb/index.html (OGP を設定したページ)
http://cielquis.net/programming-books/index.html (OGP を設定していないページ)

まず，「ウォール」のページでは以下のように表示されます．

赤枠で囲んだ部分が OGP 設定をしたページの「いいね！」ボタンを押した結果，青枠で囲んだ部分が OGP 設定をしていないページの「いいね！」ボタンを押した結果となります．「ウォール」ページを見た限りでは，イメージ画像が設定したものか自動で選ばれたかの違いくらいで，あまり大きな違いは見られません．

次に，「ニュースフィード」ページの表示を確認しました．

自分以外の履歴を非表示にしているので分かりにくいかもしれませんが，2つのページの「いいね！」ボタンを押したにも関わらず，先の赤枠（OGP 設定をしたもの）で囲まれたページしか「ニュースフィード」の履歴に残っていない事が分かります．ここの「ニュースフィード」に残ると言うことは自分の「友達のニュースフィード」にも同じような情報が残ると言う事なので，OGP の設定の有無で（Facebook 上での）「いいね！」ボタンが押されたページの広まり方に差がある事が分かります．

取り合えず OGP 設定を行っておいた方が良いと言われるのは，この辺りに起因するようです．

OGP の設定タグ

OGP の設定は以下のタグを html のヘッダ部分に記述する事でできるようです．

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

<head>
    <meta property="fb:app_id"    content="登録したアプリケーションID">
    <meta property="og:type"      content="website">
    <meta property="og:title"     content="ページのタイトル">
    <meta property="og:url"       content="ページの URL">
    <meta property="og:site_name" content="サイト名">
    <meta property="og:image"     content="ニュースフィードに表示させる画像">
    <meta property="og:description"
          content="ページの説明を記述します．
                   改行や空白は無視されるようです．">
    
    ...
</head>

これらの情報のうち，fb:app_id については Create an APP - Facebook開発者で Web サイトを登録すると取得できるようです．また，og:type も実際にはもっといろいろなカテゴリーがあります．設定したページが有効化どうかは，URLリンター - Facebook開発者で確かめる事ができます．

Facebook の「いいね！」ボタンは，Like Button - Facebook開発者から貼り付けコードを取得できます．その他では，例えば，自作ですが設置するための JavaScript を以下のページで公開しています．