2015.07.10
WEB

Webデザイナー必見！セマンティックコーディングに欠かせない構造化データ。【Microdata編】

この記事はシリーズ全3記事です。

どーも、デザインちーむのさむです。
よーやくここまで辿り着きました。
長かった、、、。

さて、今回で最後になりますが、最後にご紹介するのは「Microdata」になります。
前回の「JSON-LD」と比べて、ほんのり難しくなります。
しかしタグに直接書き込むことができるので、とても柔軟に対応することができます。

ここまでを理解してしまえば、「構造化データマスター」になれると思います！

では、頑張って進めていきましょう。

1 Microdataとは
- 1.1 基本属性
2 schema.orgのプロパティーの選び方
3 Microdataのマークアップ方法
4 itemscopeとitemtype
5 itemprop
- 5.1 Example
6 Embedding
7 meta、contentについて
8 itemrefについて　スコープの拡張
9 マークアップのテスト
10 まとめ

Microdataとは

Microdataとは、文書の内容に対して検索エンジンに分かる形式で意味づけを行い、セマンティックWebを実現させるためのHTML5の新しい仕様です。
HTMLに直接マークアップしていき、リッチスニペットをサポートしてます。

基本属性

itemscope
microdataを取り扱うことを宣言する。
itemtype
microdataの種類をURLで指定する。
itemprop
itemtype内で扱える項目を指定する。

schema.orgのプロパティーの選び方

以前の記事に詳しく書いてありますのでそちらを確認してください。

「schema.orgのプロパティーの選び方」

Microdataのマークアップ方法

以下のような箇所があると仮定します。


<div>
    <p>私はNEXT太郎です。</p>
    <p>ホームページは<a href="http://www.go-next.co.jp/">http://www.go-next.co.jp/</a>です。</p>
</div>

上記をmicrodataでマークアップすると、以下のようになります。


<div itemscope itemtype="http://schema.org/Person">
    <p>私は<span itemprop="name">NEXT太郎</span>です。</p>
    <p>ホームページは<a href="http://www.go-next.co.jp/" itemprop="url">http://www.go-next.co.jp/</a>です。</p>
</div>

※単独ではマークアップできないため、「div」や「span」といったタグを利用してマークアップします。
※divとdivの閉じタグの中がスコープ（有効範囲）となります。

head要素内でも使える
imgタグやaタグのように内容を持たない空要素のタグでは、「src」や「href」の値がプロパティの値となります

では、1つ1つ細かく見ていきましょう。

itemscopeとitemtype

先ほどの例ではdivタグを利用して「itemscope」と「itemtype」を記述しました。
利用できるタグがあれば、新たに追加せずにそのタグを利用し、なければdivやspan等を利用します。

「itemscope」はただの宣言なので、値は必要ありません。
「itemtype」はmicrodataの種類を示すために、URLで値を指定します。
schema.orgで利用できるプロパティ一覧は以下で確認できます。

schema.org 日本語訳
 schema.org / Person


<div itemscope itemtype="http://schema.org/Person">
    <p>私は<span itemprop="name">NEXT太郎</span>です。</p>
    <p>ホームページは<a href="http://www.go-next.co.jp/" itemprop="url">http://www.go-next.co.jp/</a>です。</p>
</div>

itemprop

先ほどの例ではspanタグを利用して「itemprop」を記述しました。

「itemprop」は情報の「項目」を指定するプロパティです。
例では「name」と「url」を指定しています。


<div itemscope itemtype="http://schema.org/Person">
    <p>私は<span itemprop="name">NEXT太郎</span>です。</p>
    <p>ホームページは<a href="http://www.go-next.co.jp/" itemprop="url">http://www.go-next.co.jp/</a>です。</p>
</div>

Example

ここまでの内容の使用例となります。


<div>
    <p>Go-Next Niteを開催します。</p>
    <p>開催日は2015年8月31日です。</p>
    <p>出演者はNEXT太郎です！</p>
</div>

上記は以下のようにマークアップできます。


<div itemscope itemtype="http://schema.org/Festival">
    <p><span itemprop="name">Go-Next Nite</span>を開催します。</p>
    <p>開催日は<span itemprop="startDate" content="2015-08-31">2015年8月31日</span>です。</p>
    <p>出演者は<span itemprop="performer">NEXT太郎</span>です！</p>
</div>

※日付などはISO8601に準拠した書き方で、content属性を利用して明示的に書き加えるようです。（schema.orgの公式サイトのサンプルではそのように記載しています。調べてもこれ以上の情報が見つけられなかったので、一般的なのかどうかは不明です、、、。
一般的にはHTML5ではtimeタグとdatetime属性を使うと思うのですが、）

Embedding

続いてはEmbeddingです。
JSON-LD同様、情報の入れ子構造になります。


<div itemscope itemtype="http://schema.org/Festival">
    <p><span itemprop="name">Go-Next Nite</span>を開催します。</p>
    <p>開催日は<span itemprop="startDate" content="2015-08-31">2015年8月31日</span>です。</p>
    <p itemprop="location" itemscope itemtype="http://schema.org/Place">開催地は<span itemprop="name">東京ドーム</span>です。<meta itemprop="address" content="東京都文京区後楽1-3-61"></p>
    <p>出演者は<span itemprop="performer">NEXT太郎</span>です！</p>
    <p itemprop="offers" itemscope itemtype="http://schema.org/Offer">入場料は<span itemprop="price" content="1000">1,000</span><span itemprop="priceCurrency" content="JPY">円</span>でイベントページは<a href="http://www.go-next-nite.com" itemprop="url">http://www.go-next-nite.com</a></p>
</div>

4行目に注目してください。
「itemprop」に続いて「itemscope」「itemtype」が再度記述されています。
こうすることによって、「location」をより詳細に示すことができるのです。
6行目も同様です。

多少複雑になりますが、このように入れ子にすることによってより詳細に、より柔軟に記述することができるのがMicrodataの特徴です。

meta、contentについて

今までの例の中に


<meta itemprop="address" content="東京都文京区後楽1-3-61">

というような記述がありました。

この利用方法は、HTML上では存在しない記述を補足として記述することができるというものです。

しかし、「隠しテキスト」のようなものになるので、正しい情報をできるだけ最小限で記述しなければなりません。
あまりやりすぎると「リッチスニペットスパム」と判定されてしまいます！
metaで記述し、内容はcontentに記述することになります。

itemrefについて　スコープの拡張

続いてはスコープを拡張する便利なグローバル属性の説明です。
さきほども説明しましたが、スコープの範囲は開始タグと閉じタグの間です。
以下のサンプルでは1行目のdivから4行目の閉じdivまでが「Person」を示すエリアです。


<div itemscope itemtype="http://schema.org/Person">
    <p>私は<span itemprop="name">NEXT太郎</span>です。</p>
    <p>ホームページは<a href="http://www.go-next.co.jp/" itemprop="url">http://www.go-next.co.jp/</a>です。</p>
</div>

このスコープの外にもNEXT太郎に関連づいた情報が記述されていた場合に、itemrefを利用します。
以下のサンプルのように記述します。


<div itemscope itemtype="http://schema.org/Person" itemref="md_email">
    <p>私は<span itemprop="name">NEXT太郎</span>です。</p>
    <p>ホームページは<a href="http://www.go-next.co.jp/" itemprop="url">http://www.go-next.co.jp/</a>です。</p>
</div>
<div>
    <p>本日はラーメンを食べました。<br>とてもおいしかったです！</p>
</div>
<div id="md_email">
    <p>NEXT太郎のメールアドレスです!</p>
    <p itemprop="email">tarou@go-next.co.jp</p>
</div>

手順としては