改めて見直したいパンくずリスト設置の効果!SEO以外のメリットとは

パンくずリストといえば、とりあえずサイトに設置する方が多いのではないでしょうか。
その存在意義としては、SEO効果やユーザビリティという認識かと思います。
特に一時期SEO界隈ではパンくずの最初(ホームなど)をサイト名であったりSEOで上位表示させたいワードにすることが良いとされていました。
しかしそれだけがパンくずリストの役目なのでしょうか。
パンくずの本当の目的とはなんだったのでしょう。

パンくずリストとは

wikipediaを見てみると以下のように定義されています。

パンくずリスト(breadcrumb list)は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的である。

ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
パンくずリスト – Wikipedia

種類は大きくわけて3つあると言われています。

  • Location-based
  • Attribute-based
  • Path-based

Location-based

ロケーションベースが一番多く利用されているかもしれませんが、カテゴリなど階層構造によって形成されているものです。
amazonとかもこれです。
改めて見直したいパンくずリスト設置の効果!SEO以外のメリットとは
http://www.amazon.co.jp/gp/product/B00TRW5KPC
「ホーム&キッチン › 生活雑貨 › 傘 › 長傘」のようになっています。
これによりユーザーは簡単に同じ商品カテゴリのものにアクセスすることが可能になっています。

Attribute-based

次に属性ベースのものです。
あまり多く見られませんが、商品検索などの絞込を行った際に表示されるケースがあります。
タグ的な概念も内包されています。

Path-based

最後にパスベースです。
これはユーザーがたどってきた経路によって変わるものです。
このため、アクセス・ユーザーごとに異ってきます。

パンくず導入メリット

改めて導入のメリットを考えてみましょう。
ユーザビリティの権威ヤコブ・ニールセン氏の著書では下記のように述べられています。

people look at breadcrumb links 30% of the time.
Eyetracking Web Usability: Book by Jakob Nielsen and Kara Pernice

人々は多くの時間をパンくずリストを見ることに費やしているということになります。
サイト制作がCMSなどの導入により簡単になるにつれ、構造が複雑化し、目的のページに辿りつきにくくなっているのが要因の一つに上げられそうです。
パンくずリストを導入することで、クリック数を減らし上位階層に素早くアクセスさせられます。また、付加情報を与えられることで、より興味を喚起させ離脱率を下げることにも繋がっていくでしょう。

これらメリットに対して、表示する要素はわずか1行となっていてデメリットは非常に少ないものとなっています。

Googleの検索結果に表示させる

検索時に下記のようなカテゴリ構造が表示されるケースが多くなってきていると思いませんでしょうか。
改めて見直したいパンくずリスト設置の効果!SEO以外のメリットとは

上記の「価格.com」では下記のような記述となっています。

<div class="path">
	<span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
		<a itemprop="url" href="http://kakaku.com/"><span itemprop="title">ホーム</span></a>
	</span> &gt; 
	<span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
		<a itemprop="url" href="http://kakaku.com/kuruma/"><span itemprop="title">自動車</span></a>
	</span> &gt; 
	<span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
		<a itemprop="url" href="http://kakaku.com/kuruma/maker/toyota/"><span itemprop="title">トヨタ</span></a>
	</span> &gt; 
	<span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
		<span itemprop="title"><strong>シエンタ</strong></span>
	</span>
</div>

これはStructured Data(構造化データ)といいます。
スターレーティングやレシピの画像などが表示されるのと同じ仕組みを利用しています。
詳細な記述方法は下記にあります。
Breadcrumbs  |  Structured Data  |  Google Developers

「価格.com」では、いくつかある指定方法のうち「Microdata」という記述方法で対応しています。
少し記述が煩雑にはなりますが、検索結果にカテゴリ構造を示せることで、CTR向上などの効果が見込めます。

記述内容が正しいかは下記で確認できます。
Structured Data Testing Tool  |  Google Developers

パンくずの参考デザイン

APPLE

改めて見直したいパンくずリスト設置の
効果!SEO以外のメリットとは
http://www.apple.com/shop/product/ME918LL/A/airport-extreme?fnode=58
パンくずがフッター付近にあります。
appleはパンくずでページを回遊させるというよりは、しっかりと導線を張り巡らせることを優先していそうです。

MoMA STORE

改めて見直したいパンくずリスト設置の
効果!SEO以外のメリットとは
http://www.momastore.org/museum/moma/ProductDisplay_Step%20Ladder_10451_10001_146546_-1_26663_26667_69352
ここはパンくずに+という記述があります。
これをぽちっとすると・・・
改めて見直したいパンくずリスト設置の
効果!SEO以外のメリットとは
同じ階層のものが表示されてきて、この中で回遊できるようにしています。
これにより、かなり平均滞在時間を向上できていそうです。

パンくずリストをいつも使っているから、みんな入れているからといったような惰性で使うのではなく、本来の目的を理解した上で、ユーザビリティ向上だけでなくCTRなどにも役立てていきましょう。

howto > 改めて見直したいパンくずリスト設置の効果!SEO以外のメリットとは