ハマログ

株式会社イーツー・インフォの社員ブログ

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

02113

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

パンくずリストの実装

では、実装してみます。実装の仕様は、ここ。今回は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-->

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

Screen Shot 2013-10-21 at 23.53.29

Screen Shot 2013-10-21 at 23.53.42

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

はい、おしまい。

css3HTMLHTML5MicrodatamicroformatRDFaセマンティクスマークアップリッチスニペット構造化データ

kaneko tomo   kaneko tomo   2013年10月22日


関連記事

よく知られているプログラミングの命名法

システムを複数人で開発するときに、記法や単位を一定のルールで統一します。 これを…

NetBeans IDE8.0でファイルの改行コードを指定するの巻

NetBeansはデフォルトでは改行コードの表示されないし、変更もできません。 …

LaravelとGoogle APIの統合

LaravelでGoogleのAPIを利用します。 Laravelにはcompo…


← 前の投稿

次の投稿 →