リッチスニペットで使える「構造化データ」マークアップ実践　vol.1

2015年4月10日

昨日、一昨日と、ささくら先生がリッチスニペットについての記事を書いていましたね。今日は、そのリッチスニペットを表示させるために必要な「構造化データ」について、私が簡単にご紹介したいと思います。

「構造化データ」を埋め込むには、MicrodataやRDFaといった技術を使うことができます。このMicrodataやRDFaという技術も、実はW3Cが標準化を進めている技術なのです。

そもそもMicrodataとは！？

Microdataは、文書の意味や、その属性を設定できるものです。たとえば、「2015年4月9日」という日付がWebページ上にあるとします。これは、HTML5のtime要素を使えば「日付」であることは明示できますが、果たしてその日付が何を意味するのかは伝えることはできません。しかし、Microdataを使えば、この日付に対して「イベント開催日」などの具体的な意味や属性を与えることができるのです。Webページやその中に記述された情報を、より意味のあるデータとして扱えるようにしていきましょうという考え方を「セマンティック・ウェブ」と言いますが、Microdataはまさしくその考えに基づいて生まれた技術なのです。Webサイトの設計の仕方としては、HTMLで文書の「構造」を設計し、Microdataを使ってより詳細な「属性」を与える、とお考えください。

Microdataを使ったマークアップ

それでは、具体的なMicrodataの設定の仕方についてご紹介します。
Mircodataを使ってマークアップするには、主に以下の3つの属性を使用します。

itemscope: ここから構造化データの定義を始めますという宣言をします
itemtype: 定義するデータの種類を宣言します。ここにはデータの種類をあらわすURLを指定します
itemprop: 各要素に詳細の属性を指定します

先ほどの「イベント開催日」という例をとってみてみましょう。

<section itemscope="" itemtype="http://schema.org/Event">
  <h1 itemprop="name">Microdataセミナー</h1>
  <p itemprop="description">本セミナーでは、Microdataのマークアップ方法について解説します。</p>
  <time itemprop="startDate" content="2015-04-09T19:00">2015年4月9日　19:00</time>
</section>

このようなマークアップをすることができます。
h1要素に指定されているitemprop="name"は、ここではイベント名をあらわしています。同様にp要素に指定されているitemprop="description"はイベントの概要説明を、そしてtime要素ではイベント開催日時が指定されています。

さて、それではデータの種類をあらわしているsection要素内のitemtype="http://schema.org/Event" とはなんなのか。これが構造化データをマークアップする上でとても大事になってきます。

つづく

本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。