• WEB

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

  • さむ
    さむ デザインちーむ
  • このエントリーをはてなブックマークに追加
Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【Microdata編】
この記事はシリーズ全3記事です。

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

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

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

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

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>

手順としては

  1. 参照元のスコープに任意のidを付与しitemrefの値として指定(ここではmd_emailとしました)
  2. 参照させたいエリアにid=”md_email”を記述
  3. 参照元のスロープに関連するitempropを記述する

※itemrefは必ずitemscopeと同じタグ内に併記する

このように記述することによって、より柔軟にセマンティックなHTMLを実現することができます。

マークアップのテスト

JSON-LDの時と同様、マークアップが正しくできているかを確認する必要があります。

googleが提供しているツールで確認します。
Testing Tool

使い方は前回説明したのでそちらを参考にしてください。
Testing Toolの使い方

問題無くマークアップができたでしょうか?

まとめ

いかがでしたか?
JSON-LDよりは少し複雑だったと思いますが、慣れてしまえばすんなりと記述できると思います。

最後にまとめてみます。

  • MicrodataとはHTML5の新しい仕様
  • Microdataはリッチスニペットをサポートしている
  • 利用できるタグがあれば、新たに追加せずにそのタグを利用します。
  • metaは「隠しテキスト」扱いされる恐れがあるので、あまり使わない
  • 「Embedding(エンベッディング)」が可能
  • 「itemref」でスコープの拡張が可能
  • 「Testing Tool」でマークアップの確認をする

今後はこの仕様が一般的になってくると思います。
現在作り始めてるサイトから、構造化データを取り入れてみてはいかがでしょうか。
既存のサイトを後からマークアップするよりも、最初にコーディングするときに同時に行ったほうが効率的です。

Microdataの情報はDOMで簡単に呼び出せるので、Microdataを利用したアプリなどが出てくると良いなと思っています。

全3回と長かったですがお付き合い頂き、ありがとうございました。
みなさんも挑戦してみてください!

この記事はシリーズ全3記事です。
このエントリーをはてなブックマークに追加

さむが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ