XHTML+RDFaに書換(XHTMLからXHTML+RDFa1.0へ)

XHTML1.0で作成していたページにフェイスブックのコメントと「いいね」ボタンを設置した為に、W3C validatorのチェックでOGPエラーになってしまいました。そこでXHTML1.0からRDFに対応したXHTML+RDFa1.0へ書き換えてエラーを回避しました。

XHTML+RDFaとは

RDFaとはメタ情報楽天をXHTMLで表現する為の仕様です。RDFをデータモデルとして柔軟で多彩なメタ情報をウェブページで表現することがができるようです。

一般的にはメタタグやリンクタグの中に記述しますが、RDFaでは、ヘッドタグ以外のボディタグ内についてもメタ情報を記述できるようになっています。

XHTML1.0でのOGPエラーの例

フェイスブックのコメントと「いいね」ボタンを設置する為に、メタタグで次のようにOGP(Open Graph Protocol)を設定してみました。最低でもイメージ画像とapp_idのメタタグは必要だと思います。他のメタタグも必要なら追加した方が良いでしょう。fb:admins 情報は必須ではありませんが追加してもかまいません。

<meta property="og:title" content="タイトルタグと同様な内容" />
<meta property="og:image" content="http://hogehoge.jp/image.jpg" />
<meta property="fb:app_id" content="123456789012345" />
<meta property="fb:admins" content="123451234567890" />

XHTMLでは上記のメタタグの所でW3C validatorのエラーになります。これは、メタタグのproperty属性がXHTMLの仕様には無くて、RDFaにあるためです。これを回避する方法がなかなか見つからなかったのですが、RDFaを正式に導入すれば良いことがわかりました。

将来的にはHTML5+RDFaにした方が良いのかな、と思いますが、今回はXHTML+RDFaでいきます。

XHTMLでOGPエラーを回避する為にXHTML+RDFa1.0にしました

DOCTYPE宣言とhtmlの記述をXHTML+RDFa1.0に従うように次のように書き換えました。元々XTHML1.0 Transitionalだったので、XHTML+RDFa1.0にすると、Transitionalではなく、Strictになるので、文法的に厳しくなります。他にも書き換えが必要になる場合があります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" version="XHTML+RDFa 1.0" xmlns:fb="http://ogp.me/ns/fb#" xml:lang="ja" dir="ltr">

このようにすることで、W3C validatorでエラーになるのを回避しました。ここまで来るのに何度も何度も試行錯誤しました。このページを左下のW3C Markup Validation Service で表示させると、緑色の帯の中に「This document was successfully checked as XHTML + RDFa!」と表示されてエラーが無いことが確認できます。私は全ページエラーの無いようにしました。

ウェブページ作成ソフトのマイクロソフトのExpression Web 3ではソースコード部分のメタタグやリンクタグで「この要素の自己終了はできません」と表示されますが、これは、XTHMLなのでこれで良いはずです。W3C validatorでエラーになっていないので良しとしましょう。

htmlタグではxmlns:ogとxmlns:fbの両方を記述しています。また、version="XHTML+RDFa 1.0"とxml:lang="ja"も記述しています。