ウェブ、ショウジン

OGP(Open Graph Protocol)設定をちょっとだけ学んで、facebook向けに実装はWordPressのプラグイン「WP-OGP」を使ってみた

2011-4-30
Category
Facebook WordPress

以下の記事を読んで初めてOGP(Open Graph Protocol)なるものの設定とその大事さを知った。

<遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね!」ボタンと「OGP」の設定方法、超解説

とりあえず「いいね!」ボタンを設置しておけば、「いいね!」された情報はfacebookの友達のニュースフィードに飛んで拡散するのだと認識していたのだけれども、どうやらそういうわけでもないらしい。「いいね!」を押した人のアクティビティとして、その人のプロフィールページにはそのことが表示されるけれど、それはその情報がfacebook上の友達たちのニュースフィードに表示されることとはまた別、、らしい。

2011/5/2追記:たしかに!OGP設定をしていない外部のページをいいねしても、自分の友人(fb上の)のニュースフィードにはそれは上らず、自分個人のプロフィールにしか上がっていなかった。そして、OGP設定をしたものは、友人のニュースフィードにも上っていた。

以下、前述の記事内容から引用。

OGPを設定しなくとも、自分のプロフィールページにはアクティビティとして表示されます。が、実はここに表示されても友達のニュースフィードには飛んでいません。

あらためて確認すると、OGPをきちんと設定することによるメリットには以下の三つがあるらしい。

1.「いいね!」した情報がfacebookの友達のニュースフィードに表示される。
2.ニュースフィードに表示される際の内容を指定できる。
3.「いいね!」してくれたユーザーにアップデート情報が送れる。(og:typeによってはダメなものもあるらしい)

2と3は置いておいても、まずは1については出来ていないとせっかく設置した(つもりになっていた)「いいね!」ボタンの意味がない。

OGPを設定することで、外部のサイトをfacebookページのように見せかける(ソースをそのように記述して)必要があるということが、とりあえずわかった。(facebookのシステム側に内容をちゃんと理解してもらうために必要ということが)

具体的には、htmlのxmlns属性とmeta情報を以下のように設定する必要があると。

xmlns属性

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">

meta情報

<meta property="og:title" content="記事のタイトル" />
<meta property="og:type" content="記事やサイトのタイプ" />
<meta property="og:url" content="記事のパーマリンク" />
<meta property="og:image" content="ページ画像" />
<meta property="og:site_name" content="サイトの名前" />
<meta property="og:description" content="サイト、記事の説明(記事の一部抜粋)" />
<meta property="fb:app_id" content="サイトをfacebookアプリとして登録した際に発行されるアプリID" />

これらを設定してhtmlソース内に記述しておけば「facebookページのように見せかける」ことができてfacebookのシステムがページ内の情報をちゃんと理解してくれる、らしい。

「いいね!」ボタンを設置するサイトをfacebookアプリとして登録

OGPの設定でアプリIDが必要になるので、アプリの作成画面Create an Appに行き、サイト名、URLを入力してアプリの情報を控えておく。(アプリIDを)

このアプリIDが分かれば、あとは前述のxmlns属性(このまま使える)とmeta情報の内容を適宜書き換えてページのソースに追記することで「OGP設定」は完了、のはず。

だけれども、とりあえず自分でテストしてみようと思う自分のブログはWordPressで各記事が動的に生成されているので、ひとつひとつのページに対して個別にそのような対応をすることができない、というか面倒くさい。

なので、今回は以下の記事で知ったWordPress用のプラグイン「WP-OGP」を利用することにした。(自分でfunctions.phpにそれ用のコードを追加すればいいのだけれども、今回はプラグインで手っ取り早く)

【5分】Facebook向けにOGPをセットアップする方法

このプラグインを利用することで、OGPのためのmeta情報が記事ごとに個別に生成される。

上記の記事にあるように、WP-OGPをインストールしたらWP-OGPの設定画面で控えておいたアプリIDと自分のfacebook IDを入力(fb:appidにアプリID、fb:adminsに自分のfacebook ID)して「Save Changes」をクリックして設定完了。(自分のfacebook IDはwhat-is-my-user-idを使って調べることができる)

あとはfacebookのSocial PluginsのLike Buttonでコードを取得(今回はiframe版のものを使用)して、自分がボタンを設置したい場所にそのコードを記述。「いいね!」はサイト自体ではなく、各個別の記事に対してとしたいので、URL to LikeにはWordPressのパーマリンクタグを設定。

<?php the_permalink() ?>

その他の部分はデフォルトのままで。

そして、前述の記事には書いてなかったけど、使用しているテーマの「header.php」のhtml開始タグを以下の内容に変更しておいた。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">

これでOGP設定は完了。

設定がちゃんとできているかはURLリンターで調べることができる。URLを入力して「Lint」をクリックするとそのURLの情報とデバッグの内容が表示されるので、エラーが出ていても自分で修正は難しくないはず。

だが、しかーし!

まだよくわかってないところも多々。この記事にある、いいね!ボタンのところに表示されるはずの「管理用ページ・インサイト」のリンク文字列が表示されない。一度表示されているのを見たんだけれども、あーでもないこーでもないといろいろやっているうちに分からなくなってしまった。もっとしっかり過程を残しておくべきだった。(追記:サンプルページを静的に用意してみたらこの部分は解決できました。http://web.showjin.me/sample/ogp.php

facebookはまだまだ分からないところだらけで理解も追いつかず、間違っているところ、つっこみどころ等ありましたらコメント等いただけるとありがたいです。

今回参考にさせていただいた記事は以下の三つです。
ありがとうございました。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か
<遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね!」ボタンと「OGP」の設定方法、超解説
【5分】Facebook向けにOGPをセットアップする方法 (※WordPress プラグイン)

2011/10/22追記
プラグインを使わない版はこちら。
WordPressにソーシャルボタンのためのOGP設定を施す(非プラグイン版)
EC-CUBEをOGP対応させるにはこちら。
EC-CUBEでOGP設定(Facebookには対応、mixiチェックは無視)

2012/05/23追記
WordPressにソーシャルボタンのためのOGP設定を施す(非プラグイン版)
を更新。プラグインではWP-OGPよりもOpen Graph Proが評判がよさそうだけど、自分で確認したところではOpen Graph Proではogp:descriptionを出力したりしなかったりでDebuggerでエラーが出るので、やっぱりプラグインは使わないで

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿