読者です 読者をやめる 読者になる 読者になる

FacebookのOGPタグで苦労した話

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

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

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

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

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

f:id:noriakitakamizawa:20150502132751p:plain

きちんと表示されるか確認のために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週間以上ハマったけど解決して何より。皆さんの参考になれば。

はてブロデビュー

およそ10年前Amebaのブログ事業部にいた頃、各社のブログサービスを研究していた。

その頃はLivedoorがブッチギリに強くてブログサービスランキングではいつもAmebloは後塵を拝していた。その時以来のはてなブログ。相当進化したと思われるのでいろいろ試したい。

ちなみに以前のブログはこちら。

ameblo.jp

ではでは!