2014.02.19

OGPの「宣言」についての調査とWordPressでのコーディング

Facebookでシェアされた時の表示は、ちゃんとなってるのか気になりますね。

ブログ記事がFacebookでシェアされた際、しっかりOGPの値を設定しておかないと、Facebookでの表示が残念なことになります…
以前までちゃんと理解しないで設定していたため、当ブログのFacebookページも残念な表示となってしまっていました。

OGPの設定はしっかり行っておきたいのですが、OGPの設定の前にOGPの宣言についての記事を発見したので、コーディング内容と合わせてシェアしたいと思います。

OGPの宣言は、XMLとHTMLで異なる？

Facebookなどで参照されるOGPの値は、headタグ内のmetaタグで設定します。
しかしその前にOGPの設定を行いますよという、OGPの宣言を行っておく必要があります。

ぼくは以前から使用していた、以下コードを使用しようとしたのですが…

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

いろいろ調べていると、以下記事にたどり着き、上の書き方はXMLで記述している時のものではないかとの内容。

HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要

当ブログも一応、HTML5で記述しているため、上記記事の内容を参考にOGP宣言部を見直しました。

トップページの場合：
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#  blog: http://ogp.me/ns/blog#">
記事ページ等の場合：
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

ブログのトップページとその他(記事とか固定ページとか)で、内容が異なるので、出力を分けましょう。
最終的に「いるみお」で採用したコードは以下の通り。

<?php if(is_home()){ ?>
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
<?php } else { ?>
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<?php } ?>

これでトップページと、それ以外のページでの宣言部が変更されるはずです。