microdataパンくずリストのリッチスニペットマークアップ
2,604views／投稿 2013-07-29／更新 2019-04-30
microdataでパンくずリストをマークアップして、リッチスニペットのパンくずリストを検索結果で表示する方法です。最初に使っていたのはRDFaでしたが、microdataで統一される方向に向かっているのでmicrodataのパンくずリストにすることにしました。RDFaでも問題ありませんが、microdataでちゃんとリッチスニペットされるのかも確かめたかったので使ってみました。
microdataはいろいろなフォーマットがあるようです。レビューとか星マーク★★★が検索結果に直接出たりといろいろあるようです。パンくずリストとしてのmicrodataはRDFaと同じように至って簡単に設定できます。
RDFaとmicrodataの違うところ
RDFaはdivで領域を囲む（複数項目を囲める）という概念が成り立ちました。しかしmicrodataのパンくずリストは複数ではなく、１つずつ囲む必要があります。
×《ダメな例》
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<ul>
<li><a href="http://" itemprop="url"><span itemprop="title">ホーム</span></a></li>
<li><a href="http://" itemprop="url"><span itemprop="title">カテゴリ</span></a></li>
<li><a href="http://" itemprop="url"><span itemprop="title">サブカテゴリ</span></a></li>
</ul>
</div>
RDFaと同じ感覚でやると、divで領域を囲んで、aタグにitemprop="url"、リッチスニペット文字を<span itemprop="title">で挟むだけと思ってしまいがちですが、urlやtitle項目を１つずつitemscopeで囲う必要があります。
◎《OKな例》
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://" itemprop="url"><span itemprop="title">ホーム</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://" itemprop="url"><span itemprop="title">カテゴリ</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://" itemprop="url"><span itemprop="title">サブカテゴリ</span></a></li>
</ul>
divで囲うのが公式の説明ですが、liで囲んでも問題ありませんでした。divまたはliにitemscope itemtype="http://data-vocabulary.org/Breadcrumb"を付け足します。また公式の説明は、
◎《microdata 公式の説明はこうなっています》
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">ドレス</span></a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses/real" itemprop="url">
<span itemprop="title">ドレス</span></a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
<span itemprop="title">緑のドレス</span></a>
</div>
RDFaよりもmicrodataのパンくずは、ソースが若干ごちゃごちゃ長くなるのでRDFaを使ってたのを自分でもちょっと忘れてました。RDFaは複数を囲う事が成り立ち、microdataは１つずつ囲むということになりますね。でもこれからは、microdataで統一するという方向性らしいので、microdataを使っていくことにします。
microdataパンくずリストが別種類が複数２つ以上ある場合は、記述が変わってきます。単一と違って、itemprop="child"を入れてマークアップする必要がありますね。
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
アプリとかでも使われるようで、HTMLタグと同じようにmicrodataとしてのタグマークアップが標準化しそうで、さらにいろいろmicrodata内でプロパティ種類が増えていきそうな予感がしますね。慣れるという意味でもmicrodataを少しずつ使って検証していく必要がありそうです。
