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週間以上ハマったけど解決して何より。皆さんの参考になれば。