ショウジンブログ on Hatena

“お芝居をしないと、この社会では異邦人として扱われるほかない”

HTML5におけるOGP設定について@HTML5

FacebookmixiといったOGP(Open Graph Protocol)に対応したサービスを考慮した場合、ソースにそのための記述をする必要があります。

これまでは以下のようにhtml要素にxmlns属性を追加して必要な各値を記述していたのですが、これはXHTML向けの記法らしく、HTML5ではまた違う書き方をする必要があるようです。

html要素のOGP向けの記述(XHTML向け)

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

最近はコーディングの基礎に仕事でもプライベートでもHTML5 Boilerplateをよく使っているのですが、そこで「あ、OGP設定しておかないと」と思って気づきました。(これまでの記述の仕方だとValidatorかけるとエラーになります)

HTML5ではhtml要素にではなくhead要素にprefixという属性をつけ、そこに記述するようです。そして、WebページのタイプによってOPGの属性値もblogやwebsite、article等、適宜指定すると。

head要素にOGP向けの記述(HTML5向け)

例えばトップページだったら

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

記事ページだったら

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

というふうに。

WordPressの場合は単一記事の場合とそれ以外で分けておけばいいかと思うのでis_single()構文を使って

<head prefix="og: http://ogp.me/ns# <?php if(is_single()){ echo 'fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"'; }else{ echo 'fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"'; } ?>>

こんな感じでしょうか。

WordPressのテーマで使う例

固定ページも「article」扱いにしておいたほうがいい気がするので最終的には

<head prefix="og: http://ogp.me/ns# <?php if(is_single() || is_page()){ echo 'fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"'; }else{ echo 'fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"'; } ?>>

となりました。投稿(single.php)または固定ページ(page.php)の場合は「article」で、それ以外は「website」扱いというふうに。

これはこれまでのxmlns属性をprefix属性での設定に変えただけですが、実際は以下の設定も必要です。(推奨項目、必須項目があります)

  • og:title
  • og:type
  • og:image
  • og:url