パンくずリストとは？構造化データでの作り方・デザイン事例・SEO効果などを解説

パンくずリストは、「ホーム > メンズ > アウター」のように区切り文字を使って「現在表示されているページまでの階層」を明示するナビゲーションです。

多くのWebサイトに設置されていますが、ともすれば些細なパーツにも見え、本当に必要なのか疑問を抱く方もいらっしゃるかもしれません。

ですが、実際パンくずリストはパワフルなナビゲーションで、設置することでサイトの利便性を上げることができます。

そこでこの記事では、まずパンくずリストの具体的な4つのメリットを解説し、その上で、構造化データによる実装方法、デザインの事例や注意点、最後に語源などの豆知識について解説します。

パンくずリストについて知るべきことの大部分をカバーすることを目指しましたので、ご一読いただけると幸いです。

パンくずリストが必要な4つの理由

パンくずリストを設置することで得られるメリットは大別して4点あります。

直帰率を改善できる
最小限のスペースでナビゲーションを設置できる
UXが向上する
SEOに好影響がある

直帰率を改善できる

パンくずリストを設置することで、初回流入ユーザーの直帰率を下げることが期待できます。

自然検索やソーシャル経由でサイトに流入した場合、大抵のサイトでは、ランディングページはサイトトップではなく下層コンテンツである割合が高いでしょう。

その場合、ユーザーは、流入段階ではサイトの階層構造を把握していないため、今訪れているページに関連のある内容がサイト内にどれくらいあるのかわかりません。

ですが、パンくずリストがあれば、今見ているページの上位の階層を目視できるため、ユーザーは関連コンテンツを内包するカテゴリを簡単に見つけることができ、結果的に直帰率を下げることができます。

最小限のスペースでナビゲーションを設置できる

パンくずリストは、水平方向に配列し、視覚的な飾り付けはせずにプレーンテキストとして置くことが基本です。

したがって、画面占有率が低く、メインコンテンツを圧迫することなくナビゲーションを設置することができます。

特に、画面サイズが小さいモバイルデバイスではこれが利点になります。面積の都合上メインのナビゲーションをハンバーガーメニューなどで格納せざるを得ない場合でも、パンくずリストは開いた形で設置することができるため、その分ナビゲーション性を担保することができます。

UXが向上する

Webサイトの中で、上層から下層へとページを降りていった場合、ブラウザバックで元のページに戻るためには何度もクリックをする必要があり面倒です。

その点、パンくずリストがあれば、ユーザーは2つ上の階層、3つ上の階層へもワンクリックで戻ることができるので、ストレスを軽減できます。

また、ページの階層構造を常に頭に描きながら回遊するための目印にもなるため、パンくずリストを設置することはUXの向上に繋がります。

SEOに好影響がある

パンくずリストはSEOにも良い影響をもたらします。これは、検索エンジンがサイトの構造を理解しやすくなることと、パンくずリストが検索結果に表示されることによるクリック率の向上の2つの側面があります。

後者について、後述する構造化マークアップにより検索スニペットに正しい内容のパンくずリストが表示される可能性が高くなります。

上記の例では、”ブログ > UI”というサイト内の実際の階層構造がそのまま日本語で検索結果に表示されています。

パンくずリストを設置しない場合は代わりにURLが表示されますが、英語での表記になるためわかりづらいです。一方、パンくずリストがそのまま検索面に表示されれば、遷移先のWebサイトの内容を理解しやすく、クリック率の向上を期待できます。

なお、サイトの構造によっては、あるページが複数のカテゴリに所属している場合がありますが、その際に複数のパンくずリストを設置することはSEO上問題ありません。Google WebmastersがYoutubeにアップしている動画では、「ECサイトのページに複数のパンくずリストを設置することは問題無いか」という質問に対して以下のように回答が述べられています。

If an item does belong to multiple areas within your hierarchy, it is possible to go ahead and have multiple breadcrumbs on a page. And in fact that can in some circumstances actually help Googlebot understand a little bit more about the site. [. . .] If you do have the taxonomy, the category, the hierarchy, and it’s already there and it’s not like 20 different spots within your categories, if it’s in a few spots, you know, 2 or 3, or 4, something like that – it doesn’t hurt to have those other breadcrumbs on the page.

Google Webmasters

和訳：もしある商品がサイトの階層構造において複数の領域に属しているとしたら、そのまま複数のパンくずリストを1つのページに設置することは可能です。実際、場合によっては、Googleボットがサイトを理解するちょっとした助けにもなりえます。サイトにタクソノミーやカテゴリー、階層構造がすでに存在し、ある商品がカテゴリー構造において20箇所も置き場所があるなんていうことではなく、2つや3つ、4つ程度であれば、そのページにある他のパンくずリストに悪影響は与えません。

例えばECサイトでは下記のようなカテゴリー構造がありえますが、これをそのまま3つのパンくずリストとして同じページに設置できるということになります。

ホーム > メンズ > アウター > 商品名
ホーム > アディダス > アウター > 商品名
ホーム > 人気 > メンズ > 商品名

ただし、Google Webmastersの動画でも解説されている通り、あくまでも4つくらいは問題が無いという文脈です。あまりに多くのカテゴリパターンを持つ場合は、階層構造そのものに整理の余地がある可能性がありますので、一度検討するのがよいと思われます。

構造化データによるパンくずリストの作り方

パンくずリストを設置する際は、検索エンジンに正しく理解してもらうために「構造化データ」という手法を用いることが有効です。

構造化データとは、ページ内の各要素が持つ意味を検索エンジンに正しく伝えるための記述方法です。検索エンジンがページを正しく理解することで、検索結果に表示される自社情報がユーザーにとってより魅力的になりえます。

「SEOに好影響がある」のパートで解説した通り、検索エンジンにパンくずリストが正しく表示されることでクリック率の上昇が期待できますので、ぜひ構造化データを取り入れましょう。

以下で、パンくずリストをmicrodataとschema.orgという構造化データの記述方式で実装する方法を解説します。

まずは構造化データを用いていない通常の記述を見てみましょう。


<ol>
	<li><a href="ホームのURL">ホーム</a></li>
   	<li><a href="メンズページのURL">メンズ</a></li>
   	<li><a href="アウターページのURL">アウター</a></li>
   	<li><a href="商品ページのURL">商品名</a></li>
</ol>

次に、このリストがパンくずリストであることを明示します。<ol>にitemscope属性とitemtype属性を追記します。

itemscope: 構造化データによるマークアップであることを伝える属性。
itemtype: その要素が当てはまる種類を伝える属性。ここではパンくずリストという種類であることを伝えたいので、itemtype=”http://schema.org/BreadcrumbList”と記載する。


<ol itemscope itemtype="http://schema.org/BreadcrumbList">
	[. . .]
</ol>

次に、<li>にもitemscope属性とitemtype属性、そしてitemprop属性を追記します。itemtypeには”http://schema.org/ListItem”を入れます。

itemprop: その要素の性質を伝える属性。ここではリスト項目であることを伝えたいので、itemprop=”itemListElement”と記載する。


[. . .]
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> [. . .] </li>
[. . .]

最後に、<li>の中身である<a>への追記と、新しく<span>と<meta>の追記を行います。新しく出てくる属性は<meta>に入るcontentです。

content: パンくずリストにおける、その要素の順番を伝える属性。例えば最初の要素にはcontent=”1″と記載する。


[. . .]
	<a itemprop="item" href="ホームのURL"><span itemprop="name">ホーム</span></a>
	<meta itemprop="position" content="1" />
[. . .]

以上をまとめると、最終的に以下の形になります。


<ol itemscope itemtype="http://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
		<a itemprop="item" href="ホームのURL">
	    <span itemprop="name">ホーム</span></a>
	    <meta itemprop="position" content="1" />
  	</li>
 	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	    <a itemprop="item" href="メンズページのURL">
	    <span itemprop="name">メンズ</span></a>
	    <meta itemprop="position" content="2" />
 	</li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	    <a itemprop="item" href="アウターページのURL">
	    <span itemprop="name">アウター</span></a>
	    <meta itemprop="position" content="3" />
 	</li>
  	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	    <a itemprop="item" href="商品ページのURL">
	    <span itemprop="name">商品名</span></a>
	    <meta itemprop="position" content="4" />
  	</li>
</ol>

これで、構造化データによるパンくずリストの作成は完了です。このような記述をすることで、検索エンジンがパンくずリストを確実に認識してくれるようになります。

パンくずリストのデザイン事例

ここまで、パンくずリストの利点や作り方を解説してきました。このパートでは、参考になる実際のデザイン事例を紹介します。

区切りが大なり記号

LINE for Business

もっとも一般的な、リストを大なり記号で区切るタイプです。パンくずリストが階層構造を表現するものであることを考えると、要素の大小関係を表す大なり記号を使うことは意味として自然です。

また、もっとも一般的ということはユーザーがもっとも見慣れているということなので、わかりやすさの点でも優れており、特に理由が無ければまずはこのパターンを検討するのがおすすめです。

区切りがスラッシュ

ムームードメイン

区切り文字をスラッシュにするパターンも典型例の一つです。この表現もパンくずリストとしてのわかりやすさは十分なので、サイトのデザインとマッチする場合は取り入れましょう。

ホームがアイコン

サイバーエージェント

ホームをテキストではなくアイコンで表現したパターンです。

上層への強いアテンション

＆Hair

パンくずリストでは、現在表示されているページが属するカテゴリ構造をユーザーに提示することが重要です。その点、この例のように上層部分に強調色やアンダーラインを用いれば、ユーザーの視線をより捉えることができますので効果的です。

パンくずリストのデザインの注意点

パンくずリストをデザインする際に注意したいポイントが3点あります。

目立たせすぎない
わかりやすい区切り文字を使う
余白を狭くしすぎない

以下でそれぞれ解説します。

目立たせすぎない

パンくずリストはサブナビゲーションなので、ユーザーがページに流入して最初に目にとまる要素であってはいけません。ページのh1要素やメインビジュアルなどが先に注目されるべきです。

したがって、過度なあしらいや強調しすぎた色使いは避けましょう。

わかりやすい区切り文字を使う

パンくずリストの区切り文字にはユーザーが見慣れた記号を使いましょう。

デザイン事例のパートで紹介した通り、もっともわかりやすいのは大なり記号（>）です。同じく事例として紹介したスラッシュ（/）に加えて、矢印（→）、引用符（>>）、バーティカルバー（|）なども選択肢に入ります。また、これらと比べると目にする頻度は落ちるかと思いますが、W3CによるWeb Content Accessibility Guidelines (WCAG)ではコロンを2つ重ねた（::）も例示されています。

余白を狭くしすぎない

パンくずリストは小さなパーツであり、上述の通りそれは利点の一つですが、一方で要素間で最低限の余白は確保しないと、とりわけタップが必要なモバイル環境では非常に使いづらいものになってしまいます。

具体的には、Googleのガイドが提示している推奨の最小タッチターゲットサイズである「一辺48px以上」を確保するようにしましょう。

パンくずリストの豆知識

「パンくずリスト」という特徴的な名前が何に由来しているのか、また英語でもパンくずリスト（に相当する英単語句）を使うのかなど、豆知識を簡単に紹介します。

パンくずリストの語源

パンくずリストという名前はグリム童話の『ヘンゼルとグレーテル』に由来します。

作品の中で、貧困を理由に口減らしとして親によって森に置き去りにされた少年ヘンゼルは、ともに置き去りにされた妹のグレーテルと家に帰れるように、パンくずを帰路の目印として森の中にばら撒いていました。このストーリーから、道筋の目印という意味合いで、オンラインでもパンくずという名前が使われるようになりました。

余談ですが、ヘンゼルがばら撒いたパンくずは森の鳥に食べられてしまい、結局それを頼りに家に帰ることはできませんでした。（紆余曲折を経て最終的には無事に帰ります。）

パンくずリストの英語名

パンくずリストは英語で”breadcrumb（パンくず）”や複数形で”breadcrumbs”、「ナビゲーション」をつけて”breadcrumb navigation”、”breadcrumb trail（パンくずの道）”などと言います。

日本語では「パンくずリスト」なので、”breadcrumb list”と言いたくなりますが、他の単語と使う場合は”breadcrumb trail”と”breadcrumb navigation”が一般的です。

実際にGoogle Trendsで検索ボリュームを比較すると、breadcrumb navigation:breadcrumb trail:breadcrumb list=29:45:0でした。

まとめ

パンくずリストはサイトの利便性を上げ、SEOにも良い影響を及ぼします。正しく設置しようとすると奥が深いパーツですが、この記事が参考になれば幸いです。