Facebookのオープングラフ(OGP)の設定を確認するためのオブジェクトデバッガーで、よくわからないエラーが出ていたので、エラーとその解決についてをまとめました。
og:urlとcanonicalの不一致エラー
今回出ていたエラーは、Mismatch og:url and canonical urlという物です。
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は同じ。
デバッグの結果表示を見ても、デバッガーが解釈したカノニカルURLとog:urlも同じです。
そこで、あれこれとGoogleで検索してみましたが、なかなかこの現象について触れたページがありません。
ようやく見つけたのが、Facebook開発者ページの言語設定を変えればいい、という情報。
開発者ページの言語を英語にしてみた
そこで、ページの左下の日本語というリンクをクリックして、言語をEnglish(US)に変えてみました。
すると、先ほどまでのエラーが消えました!
とりあえず、ほっと一安心。
しかしこれで良かったのか。なんとなく腑に落ちません。
オープングラフの言語設定を見落としてました
さらに調べたところ、目に留まったのはオープングラフのog:localeというプロパティ。
これは、オープングラフの他言語設定のプロパティのようですが、僕のサイトでは設定していませんでした。
そこで試しに、
1 |
<meta property="og:locale" content="ja_JP" /> |
という1行を追加してみたところ、、、
日本語ページでもエラーが無くなりました!
言語設定とか、そういう基本的な物って、おろそかにしちゃいけないって教訓でした。
og:localeを設定した場合の注意
og:localeを設定した場合、オープングラフのデバッガーは、対象のURLにfb_localeというパラメータを追加して、ページをリクエストするようです。
デバッガーがアクセスするURL — http://my-site.com/?fb_locale= ja_JP
そんなわけで、オープングラフのURLプロパティや、カノニカルURLを、PHPを使って記述している場合には、注意が必要です。
1 2 3 |
<meta property="og:url" content="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>" /> // 上のようなコードだと、想定外のパラメータが追加されてしまう <meta property="og:url" content="http://my-site.com/?fb_locale= ja_JP" /> |
このデバッガーのケースに限りませんが、サーバ変数を使ってURLを出力する場合、パラメータを勝手に追加してアクセスできるという事も考慮に入れて、プログラムを記述する事が大事のようです。