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 › 生活」

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

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

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

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプでフレンドを登録する方法は3つ!フレンドコードを表示して友達に教えてあげよう!

どうぶつの森ポケットキャンプで名前を変える方法は?性別は変更できない?

どうぶつの森ポケットキャンプのゴロゴロ鉱山ってどんなところ?ベルはどれくらい手に入る?

どうぶつの森ポケットキャンプのデータ移行方法!スマホを機種変更する場合はどうすれば良い?

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!