Googleなどの検索エンジンに好かれるパンくずリストの実装の仕方

こんにちは、金田です。台風が心配ですね。
地元の香川県は、台風があまり直撃しない地域なのでドキドキします。

さて、「パンくずリスト」をご存知でしょうか？
コーダーの方ならご存知の方も多いと思います。

では、SEOに最適なmicrodataを用いたマークアップをご存知でしょうか？
この記事でご紹介させていただきます。

それではまずパンくずリストにいて、wikiで確認してみましょう。

パンくずリスト（breadcrumb list）は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。

日本語では「パンくずリスト（breadcrumb list）」だが、英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

由来がおもしろいですね。

実際のパンくずリストの利用例を確認してみましょう。

アマゾンだとこんな感じですね。
上の階層に行ったりすることができるので、個人的にはこのナビゲーションは重宝しています。

KA Parnerのブログもパンくずリストを実装しています。

サイトの種類によると思いますが、ユーザービリティが向上するなら設置した方がいいと思います。

マークアップの仕方が重要

ただ単に表示させるだけなら、divとspanでコーディングして、CSSでなんとでも出来ます。

SEOを考えたときに重要なことは、検索エンジンにフレンドリーなコーディングです。
これは、ユーザーにとってもメリットがあります。

パンくずリストをmicrodataでマークアップすれば、Googleをはじめ、YahooやBingでもパンくずリストをパンくずリストとして認識されます。

Googleでの表示例：

Yahooでの表示例：

各階層名が日本語でも表示され、リンクになります。可読性と、アクセス性がUPしてGOODですね！

microdataを使用してパンくずリストをマークアップする方法

すみません、前置きが長くなってしまいました。

では、どうやってマークアップすれば良いのかHTMLとCSSのサンプルを用意しました。

HTMLのサンプル

<nav id="breadcrumbs">
  <ol>
    <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" href="http://www.example.jp"><span itemprop="title">第1階層(トップページ)</span></a>
    </li>
    <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" href="http://www.example.jp/blog/"><span itemprop="title">第2階層</span></a>
    </li>
    <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <span itemprop="title">現在のページ</span>
    </li>
  </ol>
</nav>

microdataを使用してパンくずリストをマークアップするポイントです。

• liタグに次の属性・値を追加します。
  itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"
  itemscope はコンテンツがアイテムであることを示しています。(HTML5ではitemscopeの値は不要ですが後方互換のために「itemscope」と値を入れています。)
  itemtype=”http://data-vocabulary.org/Breadcrumb” は、アイテムがパンくずであることを示しています。
• aタグに次の属性・値を追加します。
  itemprop="url"
  aタグがパンくずリストのURLであることを示しています。
• aタグの中(現在ページはliタグの中)に次のタグ、属性・値を追加します。
  <span itemprop="title">第2階層</span>
  spanタグの中身がパンくずリストのタイトルであることを示しています。

このサンプルでは、navタグとolタグを使用していますが、上記のポイントを押さえればその他タグを利用してもパンくずリストとして認識されると思います。

詳細はGoogleのヘルプをチェックしてください。

リッチ スニペット - パンくずリスト

CSSのサンプル

単純に「>」が入るだけのシンプルなCSSです。IE8以降に対応しています。

nav#breadcrumbs ol li {
  display: inline;
  list-style-type: none;
}
nav#breadcrumbs ol li:before {
  content: " > ";
}
nav#breadcrumbs ol li:first-child:before {
  content:"";
}

上記HTML、CSSでの表示イメージ：

サンプルとしてわかりやすくするために、 画像も使用していない必要最低限のソース例です。

CSSのサンプル

凝ったデザインのパンくずリストのCSSはcolissさんのサイトが参考になります。

デザインの勉強にもなる、CSSで実装するパンくずのまとめ

チェック

正しくマークアップされたかを確認するには、ツールを使用します。

構造化データテストツール

URLまたはHTMLの貼り付けを行い「プレビュー」を選択します。

表示された結果の「Item」をチェックし、「type:http://data-vocabulary.org/Breadcrumb」「url:」「title:」が正しく認識されていることを確認してください。

以上で、検索エンジンフレンドリーなパンくずリストのマークアップは完了です！
お疲れ様でした。

まとめ

• パンくずリストの設置でユーザービリティが向上するサイトは設置がおすすめ
• パンくずリストを設置するなら、microdataを使用してマークアップすることで検索エンジンに正しく認識される

SEO対策の観点からは設置をおすすめします。この記事がお役に立てばうれしいです！