ぱんくずリストの作り方

ぱんくずリストは、サイト全体から見た現在の位置を把握するためのナビゲーションです。ヘンゼルとグレーテルの童話のように、ホームページ内で迷子にならないために通った道にぱんくずを残しつつ、深い階層のページへと移動するためのものです。

一般的には見出し部分の上部に設置されているケースが多いです。

当サイト内ではページ下部に設置しているページもありますが、このようなナビゲーションになります。

ぱんくずリストの例1

この「CSSの一覧」のページからさらに深い階層へと移動する際、このページへのリンクをつけておくことで簡単に元のページに戻れるようになります。

ぱんくずリストの例2

トップページから深い階層へとページを移動するに従い、「CSSの一覧」や「paddingとmarginの違い」などの文字列が出現していきますが、これがいわゆる「ぱんくず」にあたります。

通常、ぱんくずリストは深い階層のページに設置するため、スタート地点であるトップページにはぱんくずリストを設置しません。また、現在のページ(パーマリンク)にはリンクをせず、上の階層のページのみにリンクをするのが一般的です。

リンクの文言については、「ホーム」や「トップページ」あるいは「Home」など、サイト運営者によってまちまちです。

一般的には、「トップページ」 → 「カテゴリページ」 → 「個別ページ」の形で作成することなります。

HOME / カテゴリ名

トップページ / カテゴリ名

トップページ / カテゴリ名 / 個別ページ名

ぱんくずリスト設置の必要性について

ぱんくずリストの設置は、詳細にカテゴリ分けされた大規模サイトでは作成しておくことをおすすめします。

例えば、公官庁やポータルサイトなどでページ数が多いサイトの場合、たいていはぱんくずリストが設置されています。

公官庁での例

一方、全ページをルートディレクトリに設置しているような、カテゴリ分けをしていないページ数の少ないサイトでは特に設置する必要はありません。数ページ程度の会社ホームページの場合などでは迷子になることはないため、特に設置する必要はないでしょう。

URLとぱんくずリストの関係

ぱんくずリストは、サイトのURLの構造と対応させるのが望ましいです。

URL
www.example.com/カテゴリ名1/カテゴリ名2/個別ページ名.html

ぱんくずリスト
トップページ / カテゴリ名1 / カテゴリ名2 / 個別ページ名

訪問者のなかには、カテゴリの先頭部分へと移動する際、サイト内のリンクを無視してURLから直接アクセスする人も多いです。つまり、ぱんくずリストがなくても、URLの構造自体がその代わりの役割を果たすことになります。

上記の例でいえば、「カテゴリ名1」の先頭部分へと移動する際、ブラウザのURLから「カテゴリ名2」以下の部分を削除してページを更新し、「www.example.com/カテゴリ名1/」のURLへ直接アクセスする方法になります。

当サイト運営者もぱんくずリストが設置されていないサイトの場合、上記のようなアクセスの仕方をしますが、たまに404が返ってくるサイトもあります。

例えば、Movable TypeなどのCMSで作成した場合、デフォルトで割り振られるパーマリンクのURLは「www.example.com/12/06/hoge.html」などの月別になるため、カテゴリ名とは無関係にURLが振られていることがあります。

また、ブログやCMSの仕様によっては、「news」や「article」など一つのフォルダで記事が一括で分類されており、そのページにたどり着くまでの経路とURLパスとの間に関連性がないことも多いです。

できるだけ、「ぱんくずリスト」と「フォルダ分け」を対応させておくのが望ましいですが、関連性がない場合にはURL構造をそのまま反映させるのではなく、URLのパスとは関係なしに、そのページにたどり着くまでの一般的な経路で作成するようにしましょう。

実際の作り方については、<div>や<nav>などにid属性を割り当てて設置するだけです。「pankuzu」や英語の「breadcrumb」など、わかりやすい属性名をつけるとよいでしょう。

<div id="pankuzu">トップページ / カテゴリ名</div>

あとはCSS側で文字サイズを小さ目に調整しておくことをおすすめします。

構造化データでパンくずリストの作成方法

上記のようにサイト内に設置するほか、構造化データでのぱんくずリストも作成しておくと、検索結果でのぱんくずリストの表示を調整することができます。

例えば、構造化データを何も設定していないデフォルトの状態の場合、検索結果での当ホームページのぱんくずリストは以下のようになっています。

デフォルトの状態

ちなみに、上記ページのURLはこちらです。
https://www.homepage-tukurikata.com/html/span-style.html

おそらくではありますが、デフォルトの状態の場合、GoogleではURLパスの構造から検索結果のパンくずリストを自動的に作成しているものと「推測」できます。

例えば、URLが以下のようになっていたとします。
www.example.com/sample/hoge.html

すると、このように表示されるケースが多いと感じています。
www.example.com > sample > hoge ▾
「記事タイトル名」

当サイトでは、上記のURL構造でも「html」の「span-style」ということで、ほぼ意図した通りに表示されてはいますが、これを調節して以下のようにしたいと考えたとします。

www.homepage-tukurikata.com > HTMLタグ > span style ▾
「span styleで文字色と背景色の指定方法 - ホームページの作り方」

そのため、構造化データを使って、各階層の「"name"」を以下のように設定しました。

1階層目.ホームページの作り方
2階層目.HTMLタグ
3階層目. span style

この構造化データの実際のテンプレートについては、Googleの公式サイトをご参照ください。
パンくずリスト | Google 検索セントラル | Google Developers

けれども、実際のパンくずリストは以下のように表示されました。

構造化データを設定した状態

デフォルトの状態と比べると、「span style」の箇所が抜けてしまいましたが、スペース的な関係のためか、構造化データではこのように表示されるのかもしれません。

おそらく、3階層目(※最後の階層)については「記事タイトル」をそのまま記入するケースが多いはずですので、以下のようにすると冗長になってしまい、表示スペースがなくなるのだろうと思います。

1階層目.ホーム
2階層目.サンプル
3階層目. 記事タイトル名

www.example.com > サンプル > 記事タイトル名
記事タイトル名

そのため、構造化データでパンくずリストを作成した場合、おおむね検索結果では以下のように、最後の階層の「name」で指定した文字列が省略されて表示されるものと思います。

www.example.com > サンプル ▾
「記事タイトル名」

ただし、場合によっては「記事タイトル」で表示されているケースもあるため、詳細な仕様は不明ですが、スペースに余裕がない場合は省略されて表示されるはずです。

ぱんくずリスト設置によるSEO対策への影響

ぱんくずリストを設置する際、トップページへのアンカーテキストに注意することをおすすめします。「トップページ」や「ホーム」などのアンカーテキストで全ページからリンクされるため、このアンカーテキストの影響を受けてしまうケースがあります。

自サイトを検索エンジンで検索してみて、通常の「個別ページ名 - サイト名」ではなく、「個別ページ名 - トップページ」などのような形で表示されていたとしたら、このぱんくずリストのアンカーテキストが悪影響を与えている可能性があります。

つまり、自サイトが「トップページ」という名前のサイト名として認識されてしまっていることになります。

特に、サイトタイトル名をテキストではなく、画像ロゴを使用している場合などはこのケースになることがたまにあります。画像のalt属性にサイトタイトル名を記述していても、テキストで記述されたぱんくずリストの方が強めに認識されてしまう傾向があります。

この場合、ぱんくずリストのアンカーテキストを単に「トップページ」とするのではなく、「サイト名 トップ」のような形で変更してみることをおすすめします。あるいは、英語の「Top」や「Home」などの形でずらしてみるのもよいかもしれません。

もしくは、リンクタグにtitle属性を付け加えるのも良いと思います。

<a href="http://www.example.com/" title="あなたのサイト名">ホーム</a>

または、head内のタイトルタグに「個別ページ名 - サイト名」と明確に記述するのでもよいかと思いますが、この場合でも「個別ページ名 - サイト名 - トップページ」などと表示されてしまうケースがあります。

いずれにしても、上記のように表示されてしまう場合は検索エンジンに「サイト名」がきちんと認識されていないことになります。

上記のような現象が実際に生じてしまうことから、検索エンジン対策とぱんくずリストは無関係ではないため、カテゴリ名の文言には注意して付けるとよいでしょう。