SEOに効果的?パンくずリストの必要性

パンくずリストとは

パンくずリストとは、Webサイトの構造をわかりやすく視覚的にしたもので、ユーザーがWebサイト内のどの位置(階層)に居るのかを示すものです。
具体的には、このページの上部にもある、リンクで示されたリストのことを言います。

パンくずリスト

ページ数が少ないサイトであれば、比較的単純なページ構成になっていることが多いです。
その場合、パンくずリストが無くても、自分がどの位置に居るのかはわかります。
しかし、ページ数が多くなりWebサイトの規模が大きくなった場合、このパンくずリストは、ユーザーにとって非常に重要なものとなります。

「パンくずリスト」の語源は、童話の「ヘンゼルとグレーテル」を元にしています。
主人公たちが森の中で迷子にならないように道しるべとしてパンをちぎって道に置いていくことで、帰り道をわかるようにしたというエピソードに由来しているそうです。
確か、実際の話では、道に置いたパンくずは鳥に食べられてしまうので、迷子になってしまうのですが…。

パンくずリストの目的とメリット

パンくずリストは、現在居るページの位置を視覚的に示すものです。

他にも、現在ページを視覚的に表現する方法として、メニューをカレント表示したり、カテゴリ分けをしっかり行うなどの方法があります。
ただし、それらの方法ではページ構造まではユーザーに伝えることが出来ません。
パンくずリストは、現在居るページを表現すると同時に、ページ構造も伝えることが出来ます。

ユーザーに対して、現在位置を示す方法は一つではありませんが、その中でもパンくずリストは、強く定着しているものです。
しかしながら、パンくずリストが存在しないWebサイトや、不適切な設定がされたパンくずリストを目にすることがあります。

不適切な設定がされたパンくずリストとは?

例えば、この記事は、当サイトの「SEO」というカテゴリの中の「その他」に分類されているので、正しい設定としては下記のような形になります。

HOME > SEO > その他 > SEOに効果的?パンくずリストの必要性

不適切な設定がされているものの例としては下記になります。

HOME > SEOに効果的?パンくずリストの必要性

これでは、HOME(TOPページ)に戻ることは出来ても、Webサイトの構造が把握できないので、パンくずリストとしての役目を果たしていません。

パンくずリストはユーザーの回遊率に影響する

パンくずリストの存在が強く発揮されるシーンとしては、TOPページ以外にランディングした時が挙げられます。

検索結果には必ずしもTOPページが表示されるわけではないので、ユーザーがTOPページ以外の下層ページから流入することがあります。
そうした場合、現在居るページがWebサイト上のどのカテゴリのどのページなのかは、すぐに理解できないでしょう。
しかし、パンくずリストが設置してあることで、ユーザーに対して瞬時に現在位置を示すことが出来るため、他のカテゴリや同カテゴリ内の他ページを見てもらうきっかけを作ることが出来ます。

結果として、回遊率が上がり、コンバージョンにも繋がりやすくなると言えます。

パンくずリストのSEO効果

パンくずリストがユーザーにとって利便性の高いものであることは間違いありませんが、SEOとの関連性はどうでしょうか?

パンくずリストは、ページの構造を示したリンクです。
このリンクは、ユーザーに現在位置を示すと同時に検索エンジンのクローラー巡回を助ける役目も担っています。
クローラーはサイト上のリンクを読み取るので、パンくずリストがあることでWebサイトの構造を理解しやすくなります。

クローラの巡回を助けることは、検索エンジンに対して正しくWebサイトの構造を伝え、正当に評価されることに繋がるため、SEO効果が期待できます。

また、対策キーワードを含んだカテゴリであれば、それがリンクとして含まれることになるので、検索エンジンに対して、キーワードとの関連性を伝えることにも繋がります。
ただし、それを目的として、パンくずリストに無理矢理キーワードを含めてはいけません。
無理なキーワードの詰め込みは、ユーザーにとっての利便性を欠いてしまうので注意しましょう。

パンくずリストの設置方法

ここからは、パンくずリストの設置に関する内容になります。
パンくずリストを設置する際のHTMLは下記のようになります。


<ul>
	<li><a href="http://www.hogehoge.com/">第一階層</a></li>
	<li><a href="http://www.hogehoge.com/parentcategory/">第二階層</a></li>
	<li><a href="http://www.hogehoge.com/parentcategory/childcategory/">第三階層</a></li>
	<li>現在ページ</li>
</ul>

最低限このような記述が出来ていれば、パンくずリストとして機能します。
現在ページまでリンクにしてしまうと、現在見ているページを二重に開くことになるので、現在ページはリンクにしないようにしましょう。

このままだと、縦並びのリストになってしまうので、見た目はCSSで調節しましょう。

li { display: inline; }

このように記述することで、<li>タグの前後に改行が入らなくなり、横並びのリストにすることが出来ます。

li { float: left; }

このように記述しても、同じ効果が得られます。
パンくずリストなので、ul要素でのマークアップが正しいと思いますが、階層の序列を表すためにol要素でのマークアップが正しいとする考えもあるようです。

CSSでセパレータを付ける場合は、先程の記述に加えて、下記の記述をすると良いです。

li+li:before { content: '>'; }

HTML5では、リンクタイプに「rel=”up”」が定義されているので、例えば下記のようなマークアップもありです。

<p>
	<a href="/" rel="index up up up">第一階層</a> >
	<a href="/parentcategory/" rel="up up">第二階層</a> >
	<a href="/parentcategory/childcategory/" rel="up">第三階層</a> >
	<a>現在ページ</a>
</p>

マークアップが少し複雑になってしまうので、実用性は欠けるかもしれませんが、意味合いとしては納得できるものです。

「 > 」をセパレータとして使用していますが、階層を表現する上でわかりやすいものであれば、何でも良いです。
ちなみに当ブログでは、FontAwesomeを使っています。

少しレベルが高い内容になるかもしれませんが、パンくずリストを構造化マークアップすることで、より効果的にクローラーへ伝えることが出来るようになります。
詳しくはこちらの記事をご覧ください。

まとめ

パンくずリストは、普段何気なく目にしているので、そのありがたみを感じることは少ないですが、重要な役目を持っています。
語源となったヘンゼルとグレーテルでは、パンくずを鳥に食べられてしまい迷子になってしまいますが、Webサイトにおけるパンくずリストは鳥に食べられることはありません(笑)

「ページ数が少ないから」とか「見れば分かるから」などと言った理由だけではパンくずリストを設置しない理由にはなりません。

パンくずリストは、ユーザーのページ遷移を助けるとともに、サイトの構造を伝え、求める情報への経路を示す役目と合わせて、検索エンジンのクロールを助け、内部SEO対策としての効果も発揮します。
これは、Googleが推奨していることでもあるので、是非、設置するようにしましょう。