以前書いた構造化データの記事で、schema.orgで策定されているデータの種類一覧を書きましたが、今回は実際に使ってみようと思います。
まず、大量にあるschema.orgで策定されているデータの中のどれをマークアップするのかですが、 ウェブマスターツールschema.org に関するよくある質問 によると、Google 検索結果に表示されるリッチスニペットは現在、人物、イベント、レビュー、商品、レシピ、パンくずリストの情報が表示されるらしいので、とりあえずこの中から今回はパンくずリストにしようとゆるーく決定しました。
パンくずリストをマークアップする場合、schema.orgのCreativeWork(創造的な作品) > WebPage(ウェブページ) ページ と、パンくずプロパティ がリファレンスとなります。
上記のページにコーディングサンプルが記述されていますので理解しやすいですね。
サンプルでGoogle構造化データテストツールが認識してくれるかテスト
ここでは、パンくずリストの実装サンプルを２種類（aタグのみで実装した版と、よく見かけるulタグで実装した版）作成し、それぞれ 非構造化データ⇔構造化データ という２パターンの合計４つのページを用意しました。
| aタグで実装 | |
|---|---|
| 非構造化 |
サンプルページ
<a href="#">Object</a> > <a href="#">Number</a> > <span>Integer</span> |
| 構造化 |
サンプル
<div itemscope itemtype="http://schema.org/WebPage"> <div itemprop="breadcrumb"> <a href="#">Object</a> > <a href="#">Number</a> > <span>Integer</span> </div> </div> |
| ulタグで実装 | |
|---|---|
| 非構造化 |
サンプルページ
<ul style="list-style-type:none;"> <li style="display:inline;"><a href="#">Object</a> ></li> <li style="display:inline;"><a href="#">Number</a> ></li> <li style="display:inline;"><span>Integer</span></li> </ul> |
| 構造化 |
サンプル
<div itemscope itemtype="http://schema.org/WebPage"> <ul itemprop="breadcrumb" style="list-style-type:none;"> <li style="display:inline;"><a href="#">Object</a> ></li> <li style="display:inline;"><a href="#">Number</a> ></li> <li style="display:inline;"><span>Integer</span></li> </ul> </div> |
サンプルページを開いてみてもらえれば分かりますが、見た目の変化はありません。
しかし、構造化データ テスト ツールが認識してくれていればとりあえずはOKでしょう。
最後にテストツールでの結果を見てみましょう。
| aタグで実装 | |
|---|---|
| 非構造化 |
|
| 構造化 |
|
| ulタグで実装 | |
|---|---|
| 非構造化 |
|
| 構造化 |
|
という結果となりまして、プレビューはツールが未対応状態なのか表示されない状態ですが、抽出された構造化データという項目には正しく反映されているように見えます。
テストツールでOKの確認が出来た後で、実際の検索結果に想定通りに反映されるかどうかが確認出来るまで時間が必要ですので、実装後はしばらくは様子見になります。
