Breadcrumb NavXTを使って、Googleの検索結果にぱんくずを表示させてみました
Googleの検索結果にページの階層を表示させるといいらしい、といった記事をいくつか読みました。そのためには、ブログにぱんくずリストを表示するプラグインの使用をやめたり、コードをいっぱい書き直したりする必要があるみたいで…なんだか大変そうだなあと感じていました。
でも、Googleのヘルプページをよく読んでみたところ、要するにぱんくず部分のHTMLにちょこっと新たな属性を書き足せば良い！ということのようで、それなら使用中のWordPressプラグインBreadcrumb NavXTの管理画面で追記する方法でも良いのでは！と思い、試してみました。
Googleの検索結果をみてみると
自分のブログ記事を検索結果に表示させてみます。
上はもちろんヨックモック公式HP、下がこのブログの記事です。上のハイライト部分には、ぱんくずリストのような形で「商品情報」というカテゴリーページへのリンクが表示されています。一方、下のハイライト部分には記事のURLがそのまま表示されているだけです。クリックもできません。
上の例のように、Googleの検索結果にページの階層を表示させるために、ブログに表示させている「ぱんくずリスト」のHTMLを修正する必要があるわけです。
結局何をすればGoogle検索結果に反映されるのか？
この後の作業でつまり何をすればいいのか？ということについて、Googleウェブマスターツールのヘルプ内、リッチ スニペット – パンくずリストのページを参考に、例を示してみます。
例えばこんなぱんくずリストがあったとして
HTMLがこんな感じだったとします。コードが長くなってしまうので、クラス名などなどは省略しますね。
<div> <a href="/"><span>洋服</span></a>> </div> <div> <a href="/"><span>ドレス</span></a>> </div> <div> <a href="/"><span>緑のドレス</span></a> </div>
そこに以下のように「itemなんとか」という属性を書き足していけばよいのです。
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="/" itemprop="url"><span itemprop="title">洋服</span></a>> </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="/" itemprop="url"><span itemprop="title">ドレス</span></a>> </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="/" itemprop="url"><span itemprop="title">緑のドレス</span></a> </div>
属性「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という項目です。
カスタマイズ前、ここには以下のように記入されていました。
<a title="Go to the %title% tag archives." href="%link%" class="%type%">%htitle%</a>ここを、このように書き換えました。
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a title="%title%" href="%link%" itemprop="url"> <span itemprop="title">%htitle%</span> </a> > </li>
- 一行目：Googleの例では、ぱんくずリストに<div>を使っていましたが、わたしは<li>で囲っています。
- 同じく一行目、itemscopeとitemtype=”…”を書き足し、「これはアイテムです」「これはぱんくずです」の宣言をしています。
- 二行目：irempropを書き足し、これがURLであることを示しています（それから、titleの「Go to the」はいらないかなと思って消してしまいました）。
- 三行目：Googleの例のように<span>で囲み、irempropを書き足し、これがタイトルであることを示しています。
- 五行目：この>は、ぱんくずの区切り文字です。「Breadcrumb Separator」でまとめて指定して良いのでしょうが、なんとなくここに。
Breadcrumb Separator
同じように、Page Template、Post Template、Category Template、Tag Templateなどにも書き足していきました。
また、各項目の「Unlinked」のほうには以下のように記入されていましたので、
%htitle%こう書き換えました。
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <span itemprop="title">%htitle%</span> </li>最後に、このぱんくずリストをブログに表示させるためのheader.phpへの記述ですが、こちらは特に変わったところはありません。「Breadcrumb NavXT」の使い方そのままです。
<ol class="breadcrumbs"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </ol>構造化データテストツールで確認
Googleがぱんくずを認識してくれているかどうか、ウェブマスターツールで確認しました。
「構造化データテストツール」へアクセスし、確認したいページのURLを入力します。
ちゃんとぱんくずが表示されています。
スクロールすると「抽出された構造化データ」という項目があります。
修正したところがちゃんと「ぱんくず」であると認識されているようです！階層も大丈夫そう。
検索結果に表示されました！
作業の翌日、ちょっとずつGoogleの検索結果に反映されはじめています。先ほどのヨックモックのページはまだなのですが（作業後24時間くらい）別の記事を検索したところ、画像のようにぱんくずが表示されていました。
反映されるまでには1～2日程度かかるとのことですので、後日他のページも確認してみます。
さいごに
これを機にプラグインの使用をやめてfunctions.phpあたりにコードを書いてみる！というのも良い方法かなとも思ったのですが…まずはこれまで知らなかったMicrodataという仕様を試してみたかったことと、便利なプラグインは無理に手放さなくてもいいかなあという考えで、この方法を試してみました。
あと、ヨックモックのゼリー、おいしいですよ。お試しあれ。
