今回はFacebookのいいねボタンを押した時や
コメントにURLが入力された時に表示させる
画像や、タイトルを設定するOGタグについての話題です。

例えば商品なり、記事ごとに動的にOGタグを設定したい場合、
動的に出力するHTMLであれば、そのままOGタグに値を埋め込んでいけばよいのですが、
例えばAPIサーバが別にあり、JSONP等で取得したデータを静的HTML
に埋め込んでいく場合だと、Facebookのクローラーが取得するページには
動的なデータは含まれていないので、うまくいきません。

じゃあどうしようかって考えたらこんな感じで出来ました。

HTML

http://static.domain/static.html

HTMLにはOGタグは特に記述せずにいいねボタンを設置
いいねボタンのURL（HTML5だとdata-href、iframeだとhref）には
静的HTMLを表示する為のURLを設定

OGタグ用のAPIをAPIサーバに用意

http://dynamic.domain/ogp.php

パラメータを受けとって動的にOGタグを出力するプログラムを用意する

静的HTMLサーバ.htaccess

静的HTMLにFacebookクローラーからのアクセスがあれば、
OGタグ用APIの結果を返す

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^facebookexternalhit.*$
RewriteRule ^static\.html$ http://dynamic.domain/ogp.php [P,QSA]

FacebookクローラーのUA判定は
開発中Basic認証をかけている状態でのいいねボタンのテストでも
使われてますね！

以上です！