Facebook の OGP設定で私がひっかかっていた3つポイント。
〜 @Sayobs さんありがとう。

Blog

OGPというのはThe Open Graph protocolの略でフェイスブックを始めmixiやGoogle+等のSNSとウェブページを連携させるための情報をコンピュータが読めるように記述したものです。

⍾ www.donpy.net/ - Facebook開発者
⍾ www.donpy.net/ – Facebook開発者 Photo by donpy

このデバッグ画面でエラーが表示されない日はこれまでありませんでした。

私はこれまで手動でOGP設定に挑戦し玉砕。「WP-OGP」という WordPressプラグインを使っての挑戦も撃沈。そんな感じでうまく OGP を実装できずに苦しんでおりました。ここ最近、また OGP の話題が浮上し、「Open Graph Pro」というプラグインだとかなり簡単だという話題を目にして再度挑戦してみました。しかし、URLメンター(デバッグ)で検証してみるとやはり NG 。なぜかエラーが出てしまうのです。

そんな状況を Facebook上にて朝から @sayobs さんに話を振ってみますと、親切にもマンツーマンで付き合って下さり、ひとつひとつ検証しながら、問題を解決することができましたことを報告申し上げます。マジ神!マジ天使!マジさよぼす!(読み方知りません)

今回まずやったこと

OGP設定は @Sayobs さんのエントリー、

OGPとは? 改めてOGPの重要性について考える時が来た。
http://www.lastday.jp/2012/04/19/ogp-is-important
(via Last Day. jp )

こちらを参考にしまして、「Open Graph Pro」という WordPressプラグインを使用すれば問題ないということで、昔に導入を試み挫折していた、「WP-OGP」をはずしてからインストールしてみました。

OGPを正しく設定することで、例えば私のブログに設置している「いいね」ボタンを読者さんが押したときに、当ブログの拡散に役立つわけです。

具体的には「いいね」を押した読者さんの Facebook のニュースフィードに流れるんですね。それを Facebook上でシェアされながら情報は拡散していきます。いいねボタンを押すだけで拡散するという意味では Twitter の RT に似ていると言えば似ているのですが、きちんと見やすい形で整形されてニュースフィードに流れますのでこちらの方が形としては上ではないかと思ったりもします。

しかし、これだけではデバッグしてみるとエラーになってしまったんですよね。。そこから色々なやりとりの末解決することができたのですが、それには3つのポイントがありました。

解決に至った3つのポイント

◆ ポイント1:header.php に昔手動で登録しようとしていた OGP 設定が残っていた。

昔、手動にて OGP設定をしようとしていたことを思い出し、header.php 内に残っていた設定文を削除しました。

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

こんなのがあったりするとまずいようです。今回 OGP設定しようとしているものと競合を起こしエラーになっていたようです。というわけで、こっそり削除しました。

◆ ポイント2:Facebook に関わる WordPressプラグインをすべてはずし、「Open Graph Pro」だけを有効化してみた。

Facebook に関わる WordPressプラグインがどんな悪さをするかわかりませんでしたので、一旦すべての Facebook 関連のプラグインをはずしてみました。OGP設定がまったくされていないというデバッグ結果が出てきました。つまり、運良く、私の場合はこの時点で競合はなくなったようです。

そこで、Open Graph Pro のみを有効化してもう一度デバッグしてみると一番上のスクリーンショットの結果になったわけです。

◆ ポイント3:Facebook Comments for WordPress 設定から Open Graph に関係する2つの設定をオフにした。

競合そのものは解決しましたが、Facebook Comments for WordPress を有効にすると問題が起こるようで、設定について検証した結果、このプラグインの設定から画面を一番下までスクロールさせて出てくる「詳細設定」内の、

Facebook Comments for WordPress Options ‹ 覚醒する @CDiP — WordPress
Facebook Comments for WordPress Options ‹ 覚醒する @CDiP — WordPress Photo by donpy

一番下の二つの設定項目をオフにすることで OGP のコンフリクトは解決されたようです。

私の場合はとにかく「OGPのコンフリクト(競合)」が問題だったようです。とにかく解決してよかったです。

なお、問題発生から解決に至るまでの会話は

OGPマンツーマン解決セミナー
http://www.facebook.com/ray.matayoshi/posts/414853791859547?notif_t=share_reply
(via Facebook )

こちらで見ることができるかもしれません。参考までに。@Sayobs さん本当にありがとうございました。

.

Blog

Posted by donpyxxx