次の例は、お店(グーグルピザ)のレビューです。
<div> グーグルピザ 住所: 東京都港区六本木 <a href="http://pizza.example.com">http://pizza.example.com</a> レビュー: 東京太郎 評価: 9/10 点(非常に良い) <div> |
このレビューには、レビューそのもの(レビュアーの名前と評価)の他に、レビュー対象に関する情報(店の名前と住所)も含まれています。
次のセクションでは、microdata、microformats、RDFa を使用してこのコンテンツをマークアップする方法について説明します。
マークアップが正しいかを確認し、コンテンツがどのように検索結果に表示されるかをプレビューするには、リッチ スニペット テスト ツールをご利用ください。 |
microdata
microdata でマークアップした HTML コードは、次のようになります:
<div itemscope itemtype="http://data-vocabulary.org/Review"> <span itemprop="itemreviewed" itemscope itemtype="http://data-vocabulary.org/Organization"> <span itemprop="name">グーグルピザ</span> 住所: <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> <span itemprop="region">東京都</span> <span itemprop="locality">港区</span> <span itemprop="street-address">六本木</span> </span> <a href="http://pizza.example.com" itemprop="url">http://pizza.example.com</a> </span> レビュー: <span itemprop="reviewer">東京太郎</span> 評価: <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating"> <span itemprop="value">9</span>/ <span itemprop="best">10</span> 点(非常に良い) </span> </div> |
このサンプルについて解説します:
- このレビュー リストには、レストランの組織情報が含まれており、その中に住所情報(itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address")とそのプロパティ(street-address、locality、region)が含まれています。
- また、評価情報(itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating")もネストされています。
microformats
vcard(組織)をレビューの中にネストするために、vcard を item クラスの定義(例: <div class="item vcard">)に追加します。item と vcard はスペースで区切り、この順で同じ行に記述します。
<div class="hreview"> <span class="item vcard"> <span class="fn">グーグルピザ</span> 住所: <span class="adr"> <span class="region">東京都</span> <span class="locality">港区</span> <span class="street-address">六本木</span> </span> <a href="http://pizza.example.com" class="url">http://pizza.example.com</a> </span> レビュー: <span class="reviewer">東京太郎</span> 評価: <span class="rating"> <span class="value">9</span>/ <span class="best">10</span> 点(非常に良い) </span> </div> |
このサンプルについて解説します:
- 1 行目の class="hreview" は、<div> で囲まれた HTML がレビューについて記述していることを示しています。
- 2 行目の class="item vcard" は、レビューの対象(item)であるグーグルピザについて、連絡先情報(hCard)が含まれていることを示しています(注: microformats では hCard ですが、マークアップには vcard と指定します。誤字ではありません)。item と vcard はスペースで区切り、この順で同じ行に記述します。
- hCard にはプロパティ fn(名前)、adr(住所)、url(レストランのウェブサイト)が含まれており、adr には、サブプロパティの street-address、locality、region が含まれています。
RDFa
RDFa でマークアップした HTML コンテンツは、次のようになります:
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review"> <div rel="v:itemreviewed"> <span typeof="Organization"> <span property="v:name">グーグルピザ</span> 住所: <span rel="v:address"> <span typeof="v:Address"> <span property="v:region">東京都</span> <span property="v:locality">港区</span> <span property="v:street-address">六本木</span> </span> </span> <a href="http://pizza.example.com/" rel="v:url">http://pizza.example.com</a> </span> </div> レビュー: <span property="v:reviewer">東京太郎</span> 評価: <span rel="v:rating"> <span property="v:value">9</span>/ <span property="v:best">10</span> 点(非常に良い) </span> </div> |
このサンプルについて解説します:
- このサンプルの先頭では xmlns を使用して、ネームスペースを宣言しています。このネームスペースには、ボキャブラリ(エンティティとそのコンポーネントのリスト)が指定されています。ページ内の人物、レビュー、場所のデータをマークアップするときはいつでも xmlns:v="http://rdf.data-vocabulary.org/#" 宣言を使用できます。末尾に必ずスラッシュと # を付けます(xmlns:v="http://rdf.data-vocabulary.org/#")。
- また、1 行目の typeof="v:Review" は、マークアップしたコンテンツがレビューであることを示しています。
- 店の住所(typeof="v:Organization")を typeof="v:Review" エンティティに含めるために、ここでは、rel を使用して、グーグルピザ(エンティティ v:itemreviewed)とその連絡先情報(エンティティ v:Organization)の関係を示しています。次に <span typeof="v:Organization"></span> を含めて、実際の店の連絡先エンティティを記述しています。