FacebookのOGPタグで苦労した話

東京のイケてる観光ガイド「Come-to.tokyo」というサイトを作っている。

当然ソーシャルでもシェアして欲しいのでOGPタグを設置して、

Facebookのデバッガーでうまく表示されるか確認した。

ちなみにOGPとはOpenGraphProtocolの略でFBやG+でシェアされるときに

参照される情報のこと。つまりこれ。

きちんと表示されるか確認のためにFacebookで用意されているデバッガーを使う。

https://developers.facebook.com/tools/debug/

サイトに手を加えてOGPデータを登録し直す際にも使う。

実は今回設置時にめちゃくちゃハマったので備忘録として記載しておくが
The 'og:type' property is required, but not present. 
というエラーがデバッガーで表示された。
サイトでソース確認してもタグは入っているので不可解である。

結論言うと、UserAgentでPCかモバイルかロボットを判別する箇所があるのだが、これをフレームワークであるCodeIgniterの機能でやっていてここで引っかからずにデータが取得されなかった模様。自分ではブラウザのソース表示で見られるタグ情報もFacebookのクローラーからだと全く読み取れないってことがあるわけです。

参考までにOGPのタグの意味は以下の通り。これらに適切な情報が出るように仕掛けてあげるのが重要。よくあるのがimgが小さくて怒られるというもの。

og:type
　ウェブページが何のページであるか（必須）
　例：blog,article,website

og:title
　ウェブページの名前（必須）

og:image
　ウェブページのサムネイル（必須）

og:url
　ウェブページの URL（必須）

og:description
　ウェブページの説明

og:site_name
　サイト名

og:emailまたはog:phone_number
　連絡先

og:locality
　場所

og:latitude,og:longitude
　経度緯度での位置情報
　例：37.416343,-122.153013

og:country-name
　国名

動画コンテンツや音楽にはそれにあったタグがあるので設置した方がいいらしい。そういう意味では昔流行りのブックマークサービスでバズワードだったフォークソノミーを思い出す。

てことで1週間以上ハマったけど解決して何より。皆さんの参考になれば。