WordPressのOGPのエラーが出る場合の直し方

OGPとはFacebookmixiなどのSNSなどで共通に定められている仕様である。

Facebook内やmixi内などの「いいね!」ボタンを押した際、SNSのプログラムはその該当記事(ブログやホームページなど)を読み取りに行く。

そして読み取ったページの概要をSNS上に表示させることになるわけだが、そのブログやホームページ側でOGPを設定しておくと制作者が意図した通りの表示をSNS上でしてくれることになる。(画像参照)
OGP設定されたページのFacebook上での表示

私はSNSが好きではない上に興味がないのでOGPなんてものにもあまり興味がないのだが、SNS全盛の現在ではOGP設定をすることが一般的である。

OGPの設定はどういうものなのかというと、各Webページのhead要素の中のmeta要素として記述する。

例えば先日書いた「iPhone、iPadのフォトストリームの使い方(Windows7向け)」という記事ページの場合は以下のOGPに関するmeta要素が記述されている。

<meta property="og:title" content="iPhone、iPadのフォトストリームの使い方(Windows7向け)" />
<meta property="og:site_name" content="谷 元博のブログ" />
<meta property="og:description" content="先日の記事の続きを書きました。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.firstsync.net/archives/2970" />
<meta property="og:image" content="https://www.firstsync.net/wp-content/uploads/2012/12/IMG_1296-200x300.png" />
<meta property="fb:admins" content="100002332437401" />

OGPにエラーがないかをチェックする方法

各ページのOGP設定がちゃんと機能しているのかを確認するのに「URLリンター」というFacebookのデベロッパ専用ページがある。

このブログのようにWordPressを使っている場合、Facebookに関するプラグインを導入していると上記のOGPを自動的に挿入してくれるものがあるが、導入しているプラグインによってはURLリンターで確認した際に以下の画像のようなエラーが表示されることがある。
FacebookのURLリンターでのエラー表示
More Than One OG」と太字で書かれており、この後の記述がエラー内容のようだ。

私の場合はog:urlの値が重複してるよ。という意味のような感じである。(英語が読めないのでなんとなくの予測)
実際、該当ページのソースを確認してみるといくつものOGP関連のタグが重複していた。

このようなエラーが起きる原因としてはFacebookに関するプラグインを複数導入していた場合に起きる。
つまり、Facebook関連のプラグインがそれぞれOGPを出力してしまっているから重複するのだ。

私の場合は「Open Graph Pro」と「Facebook Comments for WordPress」、そして現在は使用していないが「Wordbooker」も導入していたことがある。

なので今回はOpen Graph Pro以外のプラグインの設定を見直すことにする。

各プラグインのOGP設定を見直す

まずはFacebook Comments for WordPressの設定画面である。
Facebook Comments for WordPressのOGPの設定画面
この「Include OpenGraph meta information ~~」と書かれている項目のチェックを外して適用するとURLリンターでのエラーは消えた。
各ページのソースを見ても重複していたOGPは消えていたので問題ないと思う。

そしてWordbookerも導入している場合はこちらの設定も必要になる場合がある。
WordbookerのOGP設定

設定の場合は下のほうになる「上級者向け設定」の中の「オープングラフタグのインラインプロダクションの利用不可」という項目のチェックを入れる。
これで適用すればよい。

これらの設定を見直し、必要があれば上記のように設定を直した後にURLリンターで確認すると、エラーがなくなっていれば以下のような表示になる。
FacebookのURLリンター

HTMLソースが読める人であれば各ページのソースも見て確認しておくと安心だろう。