Movable Type(MT)で生成しているXHTML文書にOGPを導入

このサイトのコンテンツ、Blog・沖縄旅日記「Shimalog」の個別記事ページに、OGP(Open Graph Protocol)を導入してみました。導入にあたっては、小粋空間さまの「HTML5+RDFaについて」の記事を参考にさせて頂きました（RDFaに関するリンクが大変参考になりました）。現在の文書型は「XHTML 1.0」で、導入後もValidなXHTML文書になるよう配慮することを目指してみました。

HTML5文書の場合は、2012年5月10日公開の記事「OGPの記述後もValidなHTML5文書にするマークアップ方法のメモ」も参考にして下さい。

MTテンプレートにOGPの追加

このサイトはMovable Type 5で運用しておりますので、個別記事ページのMTテンプレートに下記のようなOGPのプロパティとMTタグの記述を行いました。<head>～</head>の間に追加します。

<meta property="og:url" content="<$mt:EntryPermalink$>" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="サイト名・ブログ名を記述" />
<meta property="og:title" content="<$mt:EntryTitle$>" />
<meta property="og:description" content="<$mt:EntryExcerpt$>" />
<meta property="og:image" content="<$MTBlogURL$>photo/medium/<$mt:EntryDate format="%Y%m%d"$>_01.jpg" />
<meta property="og:locale" content="ja_JP" />

og:imageは、適宜変更して頂ければと思います。沖縄旅日記「Shimalog」ではメインの写真を「20110515_01.jpg」のような日付形式で命名しているため、上記のようなMTタグの記述となりました。一般的に、ブログでは写真がないという場合も多いのではないかと思います。その場合はOGP用のロゴ画像を用意し、og:imageにパスを記述すると良いと思います。

og:site_nameは<$mt:BlogName$>などにされても良いかもしれません。また、og:descriptionは、<meta name="description"の部分に書いて、一つのmeta要素で共有しても良いかと思います。

OGPに関する詳細は、IT戦記さまの「フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か」で分かりやすく解説されていますので、詳しく知りたい方はそちらをご覧下さい。

HTML要素へ名前空間の追記

OGPの導入に伴い、html要素にOGPの名前空間宣言（xmlns:og～）を追加しました。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xml:lang="ja" lang="ja" dir="ltr">

DOCTYPE宣言の変更（必要に応じて実施）

XHTML+RDFa 1.0文書の配信には、RFC3236で定義されるようにメディア型を「application/xhtml+xml」とする必要があるようです。しかしながら、メディア型「application/xhtml+xml」に対応しないブラウザがあるので注意が必要です。
試しに.htaccessを利用し、メディア型application/xhtml+xmlを許容するブラウザに対してapplication/xhtml+xmlで配信してみたところ、Google Maps APIが正しく動作しないため、沖縄旅日記「Shimalog」では文書型XHTML+RDFa 1.0での配信は当面見送ることにました。このBlogは、XHTML+RDFa 1.0文書化を行いました。
Web標準Blogの記事「XHTML Media Typesの第二版が公開」等も参考にしてください。

OGP導入後、MTの再構築を行い「Unicorn - W3C 統合検証サービス」でチェックを行うと、エラーが検出（Invalidな状態）されます。エラーの発生箇所は、OGPを記述しているmeta要素で、「property属性はない」というものです。
UnicornでのValidatorチェック結果

これは、小粋空間さまの記事にもある通り、property属性がXHTMLの仕様にあるものではなくRDFaの仕様であるためです。そこで、DOCTYPE宣言をどのようにすべきかを調査した結果、W3Cの仕様書「RDFa in XHTML: Syntax and Processing」や、Wikipediaの「4.1 XHTML+RDFa 1.0 example」を参考にし、下記のように変更しました。html要素にversion属性の記述も追加しています。

<!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" xml:lang="ja" dir="ltr">

再度チェックを行うと、ValidなXHTML文書になったことが分かります（但し、あくまでもscript実行前の文書を評価した結果です）。
UnicornでのValidatorチェック結果（修正後）