[構造化データ]schema.orgでパンくずリストにマークアップする

以前書いた構造化データの記事で、schema.orgで策定されているデータの種類一覧を書きましたが、今回は実際に使ってみようと思います。

まず、大量にあるschema.orgで策定されているデータの中のどれをマークアップするのかですが、 ウェブマスターツールschema.org に関するよくある質問 によると、Google 検索結果に表示されるリッチスニペットは現在、人物、イベント、レビュー、商品、レシピ、パンくずリストの情報が表示されるらしいので、とりあえずこの中から今回はパンくずリストにしようとゆるーく決定しました。

パンくずリストをマークアップする場合、schema.orgのCreativeWork(創造的な作品) > WebPage(ウェブページ) ページ と、パンくずプロパティ がリファレンスとなります。
上記のページにコーディングサンプルが記述されていますので理解しやすいですね。


サンプルでGoogle構造化データテストツールが認識してくれるかテスト

ここでは、パンくずリストの実装サンプルを2種類(aタグのみで実装した版と、よく見かけるulタグで実装した版)作成し、それぞれ 非構造化データ⇔構造化データ という2パターンの合計4つのページを用意しました。

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タグで実装
非構造化 008
構造化 009
ulタグで実装
非構造化 010
構造化 011

という結果となりまして、プレビューはツールが未対応状態なのか表示されない状態ですが、抽出された構造化データという項目には正しく反映されているように見えます。
テストツールでOKの確認が出来た後で、実際の検索結果に想定通りに反映されるかどうかが確認出来るまで時間が必要ですので、実装後はしばらくは様子見になります。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>