Facebook OGP （Open Graph Protocol）

 

サイトやブログに設置する「いいね！」ボタンの効果を倍以上のものにしてくれるOGP設定。

このOGPをしっかり設定していないと、せっかくサイトやブログで「いいね！」を押してもらっても、それを押してくれた人のニュースフィードに表示したり、こちらが意図しているような内容でちゃんと表示されてくれなかったりします。

設定がちょっと面倒なOGPについて、その役割と設定方法を分かりやすく解説しているサイト・ブログなどを紹介します。

Facebook にウェブページを再クロールしてもらってキャッシュのリセットと OGP の書式チェックができるブックマークレット　

 

OGPの設定を変更・修正した際に、 Dubuggerページにわざわざ行って、デバックすることなく、こちらのページで紹介されているブックマークレットを利用すると、ブックマークにクリックするだけで、OGPをデバックしてくれます。

Google Chrome の場合はブックマークバーにドラッグで簡単です。

 

【 Facebook にウェブページを再クロールしてもらってキャッシュのリセットと OGP の書式チェックができるブックマークレット 】　
http://www.msng.info/archives/2011/12/bookmarklet-for-facebook-debug.php

Debugger　（facebook DEVELOPERS　※旧URLリンター）　

※2011年8月　URLリンターという名前から、『Debugger』という名前に変更になりました

 

OGPの各設定（head部への挿入・OGPタブの挿入）が完了した後に、OGP設定が正しく設定ができているかをチェックするDebugger（旧URLリンター）。

こちらでOGP設定の成否をチェックするとともに、OGPに変更を加えた場合、そのままだとキャッシュのために変更が反映されない事がありますが、こちらのURLリンターでURLを入れ直すことによって、キャッシュをクリア、変更後のOGP表示が反映されるようになります。

 

【Debugger　(facebook DEVELOPERS)】
https://developers.facebook.com/tools/debug

SEO検索エンジン最適化―Facebookページを自分のサイトに統合する方法　

 

SEO検索エンジン最適化さんのFacebookページに関する記事で、「Facebookページを自分のサイトに統合する方法」として、OGP設定をすることにより生成されるFacebookページ（管理用ページ）を紹介。

OGPの各設定を大変わかりやすく書いており、typeをトップページ以外は"article"に設定した方がいいなど、OGPの他ではまだちゃんと掲載されていない細かな設定についても記述があり、当サイト管理人も参考にしました。

Debugger（旧URLリンター）の説明もあり、はじめてOGP設定する人や、詳細がまだ分かっていないで運用している方は、こちらの記事でしっかり把握しておくといいかと思います。

 

【 SEO検索エンジン最適化―Facebookページを自分のサイトに統合する方法 】　
http://www.searchengineoptimization.jp/blog/article/how_to_integrate_facebook_pages_into_your_website.html

In the looop―Facebook Open Graph ProtocolとセマンティックWebの進化を探る　　

 

海外ソーシャルメディア事例を徹底的に調査し，マーケティング活用の秘訣を提案するブログ― In the looopのOGPに関する記事で、ループス・コミュニケーションズを率いる斉藤　徹の記事です。

「OGP によって、Facebook流入が飛躍的に増加する」や「OGPが加速する、セマンティックな世界」など、OGPの仕組みや重要である理由を学べるとともに、今後のソーシャルメディア全体とOGPなどを斉藤さんの先進的な目線で語られており、読み物としても大変面白い内容です。

 

【In the looop―Facebook Open Graph ProtocolとセマンティックWebの進化を探る 】　
http://blogs.itmedia.co.jp/saito/2011/06/facebook-open-g-c53a.html

Facebookのウォールでちょっとアピールする方法（OGP）　

 

日本でいちばん社員満足度が高い会社と言う事でも有名な「EC studio」さんの 企画デザインブログからOGPの設定に関する記事です。

画像を使って、どの「OGPタグ」が、ウォール（ニュースフィードにも）に表示されるどの部分に対応しているかなど、大変わかりやすく解説されています。

URLリンターでの確認方法や、自分のウォールで試してみる際、どう表示されれば成功かなども詳しく解説されています。

【 Facebookのウォールでちょっとアピールする方法（OGP） 】　
http://designblog.ecstudio.jp/tutorial/facebook-open-graph-protocol.html

TAM Tips Note―【facebook】OGPで「いいね！」情報をカスタマイズ　

 

TAMテクニカルチームさんが解説のfacebook、OGP設定についての記事です。

こちらも画像を使って、どのOGPタグがウォールやニュースフィードにどのように表示されるかを分かりやすく解説されています。

私は以前こちらの記事「iframe版 Facebookページのスクロールバーを消す方法」でお世話になった流れで、TAMさんのOGP設定の仕方もお世話になりました。

 

【TAM Tips Note―【facebook】OGPで「いいね！」情報をカスタマイズ 】　
http://tam-tam.co.jp/tipsnote/html_css/post2244.html

gadget or gimmick ― 月間10万PVに貢献！Facebookからのアクセスを5倍に増やす方法　

 

ちょっとタイトルは「ん？」って感じですがw、記事の方はOGPについて「OGPとは？」「OGPのメリット」〜設置方法まで、とてもしっかり分かりやすく解説されています。

まずは「OGPって設定すると、どうなるの？」っと言う方は、こちらのページでその仕組みとメリットを知ってから各設定作業に取り掛かると理解が進むかと思います。

 

【 月間10万PVに貢献！Facebookからのアクセスを5倍に増やす方法 】　
http://gadget-or-gimmick.com/archives/2011-06-16/114209.html

IT戦記―フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か　

 

IT戦記のamachangさんのOGPに関する詳しい解説の記事です。かなり早い段階（日付では2011年1月）にOGPに触れており、参考にされたアーリーアダプターの方も多いようです。

こちらのOGPとは何か？、なぜ重要なのか、から始まり、各コードの設定、そしてOGP設置後のFacebook上での表示の違いなどを詳しく解説されています。

「OGPのこれから」などにも触れていて、参考になります。

 

【IT戦記―フェイスブック、ミクシィ、グリーで使われている OGPとは何か】　
http://d.hatena.ne.jp/amachang/20110117/1295233078

Backyard : Life ― OGPで指定したサムネイル画像の大きさについて　

 

OGPで指定するサムネイル画像の最適な大きさを分かりやすく解説してくれています。

og:image で用意する画像は大き過ぎると、Facebookの方で縮小して表示されてしまうため、文字が潰れてしまったり、色が微妙にオリジナルのものと違うということが起きます。

こちらのページでどの大きさでサムネイル用画像を作るのがいいのかなど知った上で、OGPを設定する事をお勧めします。

また同ページではmixi用の画像の大きさなどに付いても解説していますので、mixiチェックを利用されている方もぜひおすすめです。

 

【 Backyard : Life ― OGPで指定したサムネイル画像の大きさについて 】　
http://backyard.chocolateboard.net/201108/ogp_share_image.html

gadget or gimmick ― あまり知られていない！？自分のサイトのFacebookコメントや「いいね！」をデータ解析する方法！　　

 

上で紹介のgadget or gimmickさんが、OGP設定後のデータ解析の方法を分かりやすく紹介しています。

Facebookページと同じように、「インサイト」を使って、外部サイトに設置した「いいね！」ボタンがどのくらい効果があったのか（インプレッションされているのかや、どのくらい「いいね！」が押されたのかなど）を測定できます。

同サイト管理人も今、このインサイトの見方についてはいろいろと研究中ですw
OGPの設定で終わらずに、しっかり効果測定して行きましょう。

 

【あまり知られていない！？自分のサイトのFacebookコメントや「いいね！」をデータ解析する方法！ 】　
http://gadget-or-gimmick.com/archives/2011-06-23/120320.html

 

スポンサード リンク