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

2016/06/30

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

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

minecraft-kuda-shaders01
2016/12/03

Minecraft 低スペックパソコンで使える影 MOD の代表格 KUDA SHADERS の導入方法

odaiba-gundam-last-day01
2016/12/02

お台場のガンダムいつまで見られるか?!ダイバーシティーからの撤去が決まる

new-year-2017
2016/12/01

一人用おせち料理のすすめ【2017】人気店のおせちが通販で手に入ります

jayfi-touch-h1-ja-22-01
2016/11/30

イヤホンからの乗り換えにおすすめ Jayfi Touch H1 はスマホの通話機能を持つ低音重視のワイヤレス Bluetooth ヘッドホン【レビュー】

android-smartphone-case01
2016/11/30

Android 用スマホケースはどこで売っている?店に行っても売ってない場合どうすれば良いか

remove-crc-sha-from-context-menu01
2016/11/29

ファイルを右クリックすると表示される CRC SHA を消す方法

rakusuru01
2016/11/29

ラクスルで初めてのポスター発注!時間は掛かるが料金は安い!

file-archiver-7-zip01
2016/11/29

ZIP より圧縮率の高いアーカイバー 7-Zip を今更ながら紹介する

install-minecraft-mod-optifine01
2016/11/29

Minecraft 軽量化 MOD OptiFine の導入方法 【1.11対応済み】

minecraft02
2016/11/28

Minecraft のビデオ設定を変更して軽くすれば低スペックパソコンでも十分に遊べる

→もっと見る

Name :
気力/体力勝負なシステム業界で揉まれています。自分が自分らしくあるために、大事なリセット、スタートします。

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