Breadcrumb NavXTを使って、Googleの検索結果にぱんくずを表示させてみました

photo credit: Chris Campbell via photopin cc

Update 2013/10/10 Web制作メモ > WordPress

Googleの検索結果にページの階層を表示させるといいらしい、といった記事をいくつか読みました。そのためには、ブログにぱんくずリストを表示するプラグインの使用をやめたり、コードをいっぱい書き直したりする必要があるみたいで…なんだか大変そうだなあと感じていました。

でも、Googleのヘルプページをよく読んでみたところ、要するにぱんくず部分のHTMLにちょこっと新たな属性を書き足せば良い！ということのようで、それなら使用中のWordPressプラグインBreadcrumb NavXTの管理画面で追記する方法でも良いのでは！と思い、試してみました。

Googleの検索結果をみてみると

自分のブログ記事を検索結果に表示させてみます。

no-breadcrumbs

上はもちろんヨックモック公式HP、下がこのブログの記事です。上のハイライト部分には、ぱんくずリストのような形で「商品情報」というカテゴリーページへのリンクが表示されています。一方、下のハイライト部分には記事のURLがそのまま表示されているだけです。クリックもできません。

上の例のように、Googleの検索結果にページの階層を表示させるために、ブログに表示させている「ぱんくずリスト」のHTMLを修正する必要があるわけです。

結局何をすればGoogle検索結果に反映されるのか？

この後の作業でつまり何をすればいいのか？ということについて、Googleウェブマスターツールのヘルプ内、リッチスニペット – パンくずリストのページを参考に、例を示してみます。

例えばこんなぱんくずリストがあったとして

洋服>ドレス>緑のドレス

HTMLがこんな感じだったとします。コードが長くなってしまうので、クラス名などなどは省略しますね。


  洋服>
  

  ドレス>
  

  緑のドレス

そこに以下のように「itemなんとか」という属性を書き足していけばよいのです。


  洋服>
  

  ドレス>
  

  緑のドレス

属性「itemなんとか」

まず、上の例で書き足したitemscope、itemtype、itempropというあまり見慣れない属性の意味について、Googleウェブマスターツールのヘルプ内、microdata についてというページを参考に、かんたんにまとめておきます。

itemscope – 「この要素はアイテムです」と宣言する
itemtype – アイテムのフォーマットを指定する。itemtype=”http://data-vocabulary.org/Breadcrumb”は、アイテムがぱんくずであることを示す
itemprop – アイテムのプロパティを定義し、その値を指定する。itemprop=”url”は、これがぱんくずのURLであることを示し、itemprop=”title”は、これがぱんくずのタイトルであることを示す

なお、これらはMicrodataというHTML5の仕様なのだそうです。Microdataについては、Googleウェブマスターツールのヘルプ内、microdata についてのページにて解説されています。

HTML5 microdata（リンク先は英語）は、特定の種類の情報（レビュー、人物、イベントなど）を記述するコンテンツにラベル付けする方法の 1 つです。情報の種類によって、人物、イベント、レビューなど、記述する特定の種類のアイテムがあります。たとえばイベントには、会場、開始時間、名前、カテゴリなどのプロパティがあります。

microdata では、HTML タグ（主にや
）内でシンプルな属性を使用して、簡潔でわかりやすい名前をアイテムやプロパティに割り当てます。

リッチスニペット – パンくずリストのページにはこう書かれています。

パンくず情報をウェブページの本文でマークアップすると、Google ではパンくず情報を識別し、その情報を基にページの情報を認識して、検索結果に表示できます。

つまり、属性「itemなんとか」を書き足せば、ページの階層がGoogle検索結果に表示されますよ！ということですね。

Breadcrumb NavXTの管理画面でテンプレートを修正する

Breadcrumb NavXTの管理画面には、ぱんくずリストの各項目のHTMLがあらかじめ記入されていて、必要に応じてカスタマイズできるようになっています。

Home Templateという項目です。

breadcrumbs-home-template

カスタマイズ前、ここには以下のように記入されていました。

%htitle%

ここを、このように書き換えました。


    
        %htitle%
      
    >

一行目：Googleの例では、ぱんくずリストに<div>を使っていましたが、わたしは<li>で囲っています。
同じく一行目、itemscopeとitemtype=”…”を書き足し、「これはアイテムです」「これはぱんくずです」の宣言をしています。
二行目：irempropを書き足し、これがURLであることを示しています（それから、titleの「Go to the」はいらないかなと思って消してしまいました）。
三行目：Googleの例のように<span>で囲み、irempropを書き足し、これがタイトルであることを示しています。
五行目：この>は、ぱんくずの区切り文字です。「Breadcrumb Separator」でまとめて指定して良いのでしょうが、なんとなくここに。