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
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

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

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

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

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

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

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

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!