Facebookのオープングラフ(OGP)の設定を確認するためのオブジェクトデバッガーで、よくわからないエラーが出ていたので、エラーとその解決についてをまとめました。

og:urlとcanonicalの不一致エラー

今回出ていたエラーは、Mismatch og:url and canonical urlという物です。

Facebookエラー

Mismatch og:url and canonical url
og:url tag in the header is not the same URL as rel='canonical' link in the html.

オープングラフのURLプロパティ(<meta property="og:url" content="(URL)">)と、リンクタグで指定したカノニカルリンク(<link rel="canonical" href="(URL)">)が違う、と言われてしまいました。

しかし、じっくりソースを確認しても、双方のURLは同じ。
デバッグの結果表示を見ても、デバッガーが解釈したカノニカルURLog:urlも同じです。

そこで、あれこれとGoogleで検索してみましたが、なかなかこの現象について触れたページがありません。
ようやく見つけたのが、Facebook開発者ページの言語設定を変えればいい、という情報。

開発者ページの言語を英語にしてみた

そこで、ページの左下の日本語というリンクをクリックして、言語をEnglish(US)に変えてみました。

facebook2

すると、先ほどまでのエラーが消えました!

facebook3

とりあえず、ほっと一安心。
しかしこれで良かったのか。なんとなく腑に落ちません。

オープングラフの言語設定を見落としてました

さらに調べたところ、目に留まったのはオープングラフのog:localeというプロパティ。
これは、オープングラフの他言語設定のプロパティのようですが、僕のサイトでは設定していませんでした。

そこで試しに、

という1行を追加してみたところ、、、

facebook4

日本語ページでもエラーが無くなりました!

言語設定とか、そういう基本的な物って、おろそかにしちゃいけないって教訓でした。

og:localeを設定した場合の注意

og:localeを設定した場合、オープングラフのデバッガーは、対象のURLにfb_localeというパラメータを追加して、ページをリクエストするようです。

デバッグしたいページのURL — http://my-site.com/
デバッガーがアクセスするURL — http://my-site.com/?fb_locale= ja_JP

そんなわけで、オープングラフのURLプロパティや、カノニカルURLを、PHPを使って記述している場合には、注意が必要です。

このデバッガーのケースに限りませんが、サーバ変数を使ってURLを出力する場合、パラメータを勝手に追加してアクセスできるという事も考慮に入れて、プログラムを記述する事が大事のようです。