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

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

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

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

Breadcrumbs | Structured Data

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

Webllica では、実際に 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="https://webllica.com/" itemprop="url">
<span itemprop="title">ホーム</span>
</a> ›
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://webllica.com/category/javascript" itemprop="url">
<span itemprop="title">JavaScript</span>
</a>
</span>

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

webllica.com › JavaScript

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