schema.orgのプロパティ
ここからはschema.orgの具体的な書き方について説明します。基本的には次の4つのプロパティを理解すれば、あとはいくらでも応用が効くはずです。
- itemscope
- microdataを取り扱うことを宣言する。
- itemtype
- microdataの種類をURLで指定する。
- itemprop
- 情報の細かい項目を指定する。
- itemref
- 離れた場所に記述してある情報とリンクする。
新しく登場したmicrodataという言葉ですが、これは広義で「Google(検索エンジン)に送られる情報」だと解釈して下さい。「schema.orgでmicrodataをマークアップする(=書く)」といった言葉の使い方をします。
書評のマークアップ例
schema.orgを使って、文章をマークアップしてみましょう。マークアップはHTMLで行ないます。映画、TV番組、音楽、レシピなどなど、microdataの種類は様々ですが、今回は書評を取り扱ってみましょう。
あらゆは
鳥山明の
ドラゴンボールを、
100点満点中100点と評価した
HTML
<div itemscope itemtype="http://schema.org/Review">
<span itemprop="author">あらゆ</span>は
鳥山明の
ドラゴンボールを、
100点満点中100点と評価した
</div>
microdataを取り扱う宣言
コードの意味を説明していきます。まずはGoogleに対して、「ここからここまで、書評のmicrodataだよ」という宣言をします。それが次のitemscopeとitemtypeです。
HTML
<div itemscope itemtype="http://schema.org/Review">
<!-- ... -->
</div>
itemscopeはただの宣言なので、値が必要ありません。itemtypeはmicrodataの種類を示すために、URLアドレスで値を指定します。http://schema.org/Reviewは「評価」を意味します。itemscopeとitemtypeが付いた要素(サンプルはdiv)の中身が、microdataの範囲となります。
- 本
- http://schema.org/Book
- 人物
- http://schema.org/Person
- レストラン
- http://schema.org/Restaurant
- 映画
- http://schema.org/Movie
- 評価
- http://schema.org/Review
評価者をマークアップする
宣言に続いて「評価をする人があらゆであること」を伝えます。それにはitempropを利用して次のようにマークアップします。
HTML
<span itemprop="author">あらゆ</span>
itempropは情報の「項目」を指定するプロパティです。ここではauthor(著者)を指定しました。itemprop="author"を付けた要素(サンプルではspan)で取り囲んだテキスト(あらゆ)が値となります。
ここまでで、「microdataの種類が評価であること」「評価の著者(=評価者)があらゆであること」を、Googleに伝えることができました。「"評価"のmicrodataをschema.orgでマークアップした」ということになります。
入れ子構造とは？
itemscope、itemtype、itempropの使い方、すなわち、schema.orgのルールが分かってきたと思います。ここまでを応用して、他の要素をマークアップしてしまいます。
HTML
<div itemscope itemtype="http://schema.org/Review">
<span itemprop="author">Yuta Arai</span>は
<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
<span itemprop="author">鳥山明</span>の
<span itemprop="name">ドラゴンボール</span>を、
</span>
100点満点中100点と評価した
</div>
「評価されるのが本であること」「本の著者が鳥山明であること」「本の名前がドラゴンボールであること」を新たにマークアップしました。ここで3行目のspan要素に違和感を感じる方も多いはずです。
HTML
<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
1つの要素に、左から順にitemprop、itemscope、itemtypeと、3つのプロパティが同時に入っています。これは一体どういうことなのか、見ていきましょう。
HTML
<span itemprop="itemreviewed">
まず、itemprop="itemreviewed"で情報の項目に「レビューされる対象」を指定しました。ここまでは大丈夫だと思います。
しかしながらその値は、先ほどの<span itemprop="author">あらゆ</span>のように「1つ」ではありません。「本の著者=鳥山明」「本の名前=ドラゴンボール」という複数の値を同時に指定しなければいけないわけです。さて、どうしたものか？
ここで便利なのが「入れ子構造」、言わば「サブのmicrodata」です。「評価のmicrodata」の中に、さらに「本のmicrodata」を入れてしまうというわけです。視覚的に表現すると、次のような形になります。
入れ子の関係
[評価のmicrodata 始まり]
・著者=Yuta Arai
[本のmicrodata 始まり]
・名前=ドラゴンボール
・著者=鳥山明
[/本のmicrodata 終わり]
[/評価のmicrodata 終わり]
この「入れ子構造」を作るには、itempropを指定したのと同じ要素内で、itemscope、itemtypeを宣言してやればいいというわけです。それが次というわけですねー。
HTML
<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
<!-- ... -->
</span>
イメージはできたでしょうか？この「本のmicrodata」の中に「(本の)著者」「(本の)タイトル」をマークアップしましょう。次の形になりますね。
HTML
<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
<span itemprop="author">鳥山明</span>
<span itemprop="name">ドラゴンボール</span>
</span>
ここまでで「microdataが評価であること」「評価の著者があらゆであること」「評価の対象が本であること」「その本の著者が鳥山明であること」「その本のタイトルがドラゴンボールであること」、この5点をマークアップすることができました。
点数をマークアップする
最後に100点満点中100点というデータをマークアップしましょう。「点数が100点」「最高点が100点」「最低点が0点」という3つの情報を新たにマークアップします。
HTML
<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="0">
<span itemprop="bestRating">100</span>点満点中
<span itemprop="ratingValue">100</span>点と評価した
</span>
itempropで「情報の項目」にreviewRating(点数)を指定しました。reviewRatingの値は「点数」「最高点」「最低点」と複数あるので、入れ子構造でmicrodataを作成する必要がありますね。この中でworstRating(最低点)、bestRating(最高点)、ratingValue(点数)をマークアップしています。
入れ子の関係
[評価のmicrodata 始まり]
・著者=Yuta Arai
[本のmicrodata 始まり]
・名前=ドラゴンボール
・著者=鳥山明
[/本のmicrodata 終わり]
[点数のmicrodata 始まり]
・点数=100点
・最高点数=100点
・最低点数=0点
[/点数のmicrodata 終わり]
[/評価のmicrodata 終わり]
ブラウザに表示できないデータ
下記は「最低点数(worstRating)が0点であること」をマークアップしたものです。他のものと違いますよね。これについて解説します。
HTML
<meta itemprop="worstRating" content="0">
まずは元の文章の、点数を表現する部分を確認してみましょう。
あらゆは
鳥山明の
ドラゴンボールを、
100点満点中100点と評価した
「100点満点中100点」としか書かれておらず、「最低点が0点」を示す表現がありません。そんな時に使える要素が、metaです。metaの要素内で、itempropとcontent(値)というプロパティを使うことで、ブラウザにテキストを表示せず、マークアップすることができるというわけです。
便利とはいえ、このmeta要素は言わば「隠しテキスト」と同じ意味を持ちます。ユーザーにテキストを表示することなく、いくらでもウェブページに情報を仕込めるわけです。「好き勝手に使っていい」となったらスパムの温床になることは明白です。「metaの利用は最小限に抑えましょう」というのが、schema.orgの精神です。どうしてもブラウザ上で表現できないデータを取り扱いたい場合にだけ、利用するように心がけましょう。
This technique should be used sparingly. Only use meta with content for information that cannot otherwise be marked up.
『3c. Missing/implicit information: use the meta tag with content(schema.org』より引用間違いを探してみよう
下記の通り、マークアップが完成したと思いきや、ごめんなさい。下記のマークアップには2点、間違いがあります。記事を書いている途中で気付きました…。せっかくなので、この間違いを放置しないための「確認方法」を次の章で身に付けて下さい。
HTML
<div itemscope itemtype="http://schema.org/Review">
<span itemprop="author">あらゆ</span>は
<span itemprop="itemreviewed" itemscope itemtype="http://schema.org/Book">
<span itemprop="author">鳥山明</span>の
<span itemprop="name">ドラゴンボール</span>を、
</span>
<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="0">
<span itemprop="bestRating">100</span>点満点中
<span itemprop="ratingValue">100</span>点と評価した
</span>
</div>
