今回はブログの記事部分のHTMLをschema.orgのスキーマ(語彙)を使って構造化する方法を紹介します。

schema.orgとはGoogle、Microsoft、Yahoo!の3社が共同で開発している構造化データマークアップのためのスキーマのことで、セマンティックウェブを実現するためのものです。(schema.org以外にも様々なスキーマがあります)セマンティックウェブを実現することによって、検索エンジンなどのコンピュータがHTMLの構造を正しく理解することができるようになり、効率よく情報を収集し、ユーザーに提供できるようになります。
例えばパンくずリストを構造化のスキーマを使ってマークアップすることで、検索結果にパンくずリストを表示させることができるようになります。このブログでもHTML5 microdataを使ってWordPressでパンくずリストをGoogleに表示する方法を書きました。

こうしたスキーマを使って構造化するためのフォーマットの一つがmicrodataであり、他のフォーマットであるRDFaやmicroformatsと比べて拡張性が高いことなどの理由によりschema.orgのフォーマットに選ばれました。
schema.orgやmicrodataについてざっと書きましたが、より詳しい情報を知りたい方は以下のページなどを参考にしてください。

HTML5のMicrodataとは何か? - Publickey
Schema.org――SEOに役立つ構造化データの本流が決まったようだ | Web担当者Forum

今のところはブログを構造化してもパンくずリストのように目に見えて何かが起こるわけではありませんが、Googleなどの検索エンジンからの印象が良くなるかも(?)しれません。

ブログの記事部分の構造化

ブログの記事部分の構造化なので、schema.orgの中のBlogPosting型を使います。 各ブログによって表示している情報は異なると思いますので、今回はどのブログでも使っているであろう基本的な情報に絞ります。

こんな感じ↓にマークアップしているブログの場合を例に挙げると、

構造化前

構造化前

<article itemscope itemtype="http://schema.org/BlogPosting">
	<header>
		<h1 itemprop="name">
			<a href=”sample.html” itemprop="url">記事タイトル</a>
		</h1>
	</header>
	<div itemprop="articleBody">
		記事の内容
		...
	</div>
	<footer>
		<data value=”2011-11-02” itemprop="datePublished">2011年11月2日</data>
		<span itemprop="keywords">カテゴリーやタグ</span>
	</footer>
</article>

なお、日付要素はdata要素でマークアップしています。かつてはtime要素を使っていましたが、time要素は廃止され代わりにdata要素が追加されたので、この例ではdata要素を使っています。ただ、time要素を用いるにしても構造化の方法は同じです。もしtime要素を使うなら

<time datetime="2011-11-02" itemprop="datePublished">2011-11-02</time>

という記述になります。
この件に関してはHTML5 追加された data 要素についてを参考にさせていただきました。

以上、まとめると↓のようになります。要素にただ属性を付加していくだけです。

  • 記事を囲む要素にitemscope属性とitemtype=”http://schema.org/BlogPosting”を付加
  • 記事タイトルの要素にitemprop=”name”
  • 記事へのリンク要素にitemprop=”url”
  • 記事の内容を囲む要素にitemprop=”articleBody”
  • 記事の日付を表す要素にitemprop=”datePublished”
  • カテゴリーやタグを表す要素にitemprop=”keywords”

schema.orgの中のBlogPosting型には今回使ったプロパティ(itemprop)以外にも多くの種類があるので、ざっと眺めて使えそうなものは使っていくのもいいと思います。