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


  • 公開:
  • 更新:
  • 編集:
概要 ▶ HTML5はXHTMLではありません。このためOGPの設定で必要とされるxmlnsは不要なのです。代わりに「prefix」という記述を行います。
20120618-HTML5のOGPにはxmlnsは不要-01

Geek_Tatoo by Massimo Valiani


HTML5でウェブサイトを作成していて、気になったことがありました。


気になった瞬間はFacebookやGoogle+で使用されるOGP(Open Graph protocol)のためのメタタグを設定していた時のことです。


ネットで検索すると必ずと言っていいほど「xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" を<html>のタグに追加しましょう」みたいなことが書いてあります。


こんな感じですね。

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

この記述本当に必要ですか?


xmlnsとはそもそも何?

そもそもxmlnsは「XML Namespaces」の略でXMLを使用するときに使用するためのもののはず。

xmlns属性は、XMLネームスペースを指定します。XMLネームスペースというのは、簡単に言えば、XMLで使用されている要素や属性が、どのグループ(難く言うとネームスペース)に属するのか、という分類をする時、グループのIDとなるものです。
xmlns < 属性目次 < XHTML 1.1 リファレンス < リファレンス < WWWWARD < eplusx.net

XHTML時代は確かに必要だったのでしょうが、XじゃないHTML時代では、この記述は不要ではないか?
そう思ったのです。


疑問に思ったままだと気持ちが悪いので調べてみました。


OGPの大元のページを調べてみる

OGP(Open Graph protocol)の大元のページを開いてみましょう。


するとサンプルのコードがあります。

最初の1行目を見てみると…

<html prefix="og: http://ogp.me/ns#">
The Open Graph protocol

(勉強不足のためですが)今まで見たことがない記述があります。


prefix="○○"


どうやら「og:」と先頭につくものは http://ogp.me/ns を見て下さいと書いてあるようです。

結果としてはxmlnsの記述は出てきません。


Facebookで調べてみる

それでは「OGPといえばFacebookのため」という方も多いと思いますので、Facebookで調べてみます。

公式のFacebook Developerのページのサンプルを見てみましょう。

<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#
 article: http://ogp.me/ns/article#">
Built-in Object Types - Facebook開発者

やはりxmlnsの記述は出てきません。

Facebookのページでは<html>のタグには書かずに<head>のタグに「prefix="○○"」書いています。

今回の場合「og:」「fb:」「article:」と先頭につくものを指定してあります。


結論

HTML5のOGPを設定する際は<html>タグに「xmlns="○○"」と書くのではなく、「prefix="○○"」と書きましょう。


Facebook公式ページではprefix="○○"になっていますのでそちらにしておく方が良いでしょう。あとタイトルにはOGPの設定と書いていますがOGPに限定されるものではありません。


余談

なお、Facebook Developerのページではブログの記事の場合は

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

ブログのトップページの場合は

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

という例を出しています。(引用は共に「Built-in Object Types - Facebook開発者」)


適用してみた例はこちらです。私が制作で担当した会社のサイトです。


ご参考まで。

記事で何か間違っている点などあればご指摘頂ければありがたいです。

それでは。


カテゴリー:

このページをぜひシェアしてください