Google構造化データの利用(2) パンくずリストのマークアップ

こんにちは、かねこです。

はじめに

構造化データシリーズ書きます。今回はパンくずリスト(Breadcrumb)のはなし。

schema.orgのはなし

パンくずの前にschema.orgについて。
schema.orgの説明どおりですが、要するにGoogle、Microsoft、Yahoo!が共同で進めているウェブセマンティクスの標準化プロジェクトです。

パンくずリストのはなし

ウェブサイトにパンくずリストを実装する場合、旧来のHTMLではリストタグやdivタグなどで作成していましたが、HTML5になりセマンティクスが強化されたため、RDFaやmicrodataを利用してマークアップすることができるようになりました。
Googleの説明

さっそくやってみましょう。

正しくマークアップされているか確認

構造化データテストツールを利用します。コーポレートサイトのURLを入力してみました。

http://www.e2info.co.jp/result/sns-site.html

はい、みごとになにもなし。

パンくずリストの実装

では、実装してみます。実装の仕様は、ここ。今回はmicrodataで書いてみます。

変更前

<!--pan範囲ここから-->
<div id="pan">
	<a href="<?php echo home_url()?>">HOME</a>&nbsp;&gt;&nbsp;
	<?php
		if($post->post_parent) {
			$parent_title = get_the_title($post->post_parent);
			$parent_link = get_page_link($post->post_parent);
		}
	?>
	<?php if($post->post_parent):?>
		<a href="<?php echo $parent_link;?>"><?php echo $parent_title;?></a>
	&nbsp;&gt;&nbsp;
	<?php endif;?>
	<?php echo get_the_title($post);?>
</div><!--pan End-->

変更後

<!--pan範囲ここから-->
<div id="pan" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo home_url()?>" itemprop="url">
		<span itemprop="title">HOME</span>
	</a>&nbsp;&gt;&nbsp;
</div>
<?php
	if($post->post_parent) {
		$parent_title = get_the_title($post->post_parent);
		$parent_link = get_page_link($post->post_parent);
	}
?>
<?php if($post->post_parent):?>
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="<?php echo $parent_link;?>" itemprop="url">
			<span itemprop="title"><?php echo $parent_title;?></span>
		</a>&nbsp;&gt;&nbsp;
	</div>
<?php endif;?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<span itemprop="title"><?php echo get_the_title($post);?></span>
</div>
</div><!--pan End-->

できた。
構造化データテストツールでもう一回確認。

無事に認識されましたね。

はい、おしまい。