W3Cが昨年１２月にHTML5の仕様策定作業を終わり勧告候補として２０１４年の勧告に向けた最終段階に進みました。これに合わせて各ベンダーもHTML5の搭載（実用化）に入っておりIE10を初め多くのブラウザがHTML5を実装してきました。
最近はネット上の多くのサービスがdata attribute等のHTML5に沿ったコードを使い始めており従来のXHTMLのバージョンではW3Cのvalidatorではエラーとなってしまいます。
そこで、当サイトもHTML5のDocument Typeに変更することにしました。しかし、facebookやmixiなどのSNSで使っているOGPをHTML5に乗せる方法が分らずにいた所、skyward Designさんのサイトにその"解"が在りました。
OGPの記述後もValidなHTML5文書にするマークアップ方法のメモ
その解に従ってMovable Typeのヘッダー・モジュールを変更しました。
[例]ブログ記事の場合
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns# fb: http://www.facebook.com/2008/fbml mixi: http://mixi-platform.com/ns#">
<head>
<meta charset="<mt:PublishCharset />" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:site_name" content="<mt:BlogName encode_html="1" />" />
<meta property="og:type" content="blog" />
<meta property="fb:admins" content="xxxxxxxxxxxxxxx" />
<meta property="og:url" content="<mt:EntryPermalink />" />
<link rel="canonical" href="<mt:EntryPermalink />" />
<meta property="og:title" content="<mt:EntryTitle encode_html="1" />" />
<meta property="og:description" content="<mt:EntryExcerpt encode_html="1" />" />
<mt:EntryAssets type="image" sort_by="created_on" sort_order="ascend" lastn="1">
<meta property="og:image" content="<mt:AssetURL />" />
</mt:EntryAssets>
～
W3CのValidatorでチェックするとOGPのmeta部分を含めてチェックOKとなりました。validator.NU(HTML5)でのチェックを行うと下記のような結果が出ました。
1.Info: The Content-Type was text/html. Using the HTML parser.
2.Info: Using the schema for HTML5 + SVG 1.1 + MathML 3.0 + RDFa Lite 1.1.
The document validates according to the specified schema(s) and to additional constraints checked by the validator.
HTML5 + SVG 1.1 + MathML 3.0 + RDFa Lite 1.1. のドキュメントとして合格となりOGPを定義するRDFaドキュメントとしても合格となりました。
コメントする