Googleの検索結果にカテゴリ(パンくずリスト)を表示させる方法

2013/12/12

通常 Google の検索結果には、タイトルと URL が表示されますが、その URL 部分にパンくずリストを表示させるには、ある決められたルールに則り HTML を記述をすれば対応することができます。

HTML のコードが書ければ簡単に対応できるので、現在 Web サイトにパンくずリストを掲載することを検討している方は、是非参考にしてみてください。

具体的に Google がどのような構文をパンくずとして認識するか、まずはそちらを理解する必要があります。以下、Google の公式サイトを参照ください。

Breadcrumbs | Structured Data

パンくずリストを表示するための実装方法

NJ-CLUCKER では、実際に microdata を使用してマークアップしています。もちろん Google の検索結果に、パンくずが表示されています。実装方法は次の通りです。

以下のタグを繰り返し記述するだけで階層構造も簡単に表すことができます。

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="アドレス" itemprop="url">
<span itemprop="title">パンくずのテキスト</span>
</a> ›
</span>

span ダグの属性に itemscope と itemtype の属性を設定。その子の要素の span タグに itemprop の属性をセットすれば完成です。僕の場合、記事タイトル上部にあるカテゴリリストように横並びで設定したかったため span タグを利用していますが、div タグに属性を設定しても問題はありません。

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="//nj-clucker.com/" itemprop="url">
<span itemprop="title">ホーム</span>
</a> ›
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="//nj-clucker.com/category/life" itemprop="url">
<span itemprop="title">生活</span>
</a>
</span>

このように記述をしておくと、Google の検索結果には以下のように表示されます。

「nj-clucker.com › 生活」

要するにタグの属性を付け加えるだけなので、現状の構造を維持したまま実装することが可能です。簡単な実装でパンくずリストは作れるので、ぜひ皆さんお試しあれ。

Name :
気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。目指すところへの道のりは険しいですが、自分が自分らしくあるために、一歩ずつ進んでいきます。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。よろしければフォローお待ちしています。

プロフィール詳細 Twitter @_NJ69_
Facebook ページ NJ-CLUCKER シェア
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑