ぱんくずリストの作り方

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

通常、見出し部分の上部にさりげなく設置されているケースが多いです。

当サイト内でいえば、このようなナビゲーションになります。

ぱんくずリストの例1

ぱんくずリストの例2

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

トップページ / カテゴリ名1 / カテゴリ名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が振られているケースがあります。

このような場合、1部のユーザーには不便に感じてしまうこともあるため、「ぱんくずリスト」と「フォルダ分け」は必ず対応させておくようにしましょう。

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

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

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

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

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

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

つまり、「トップページ」という名前のサイト名として認識されてしまうわけです。

上記のような現象が実際に生じてしまうことから、検索エンジン対策とぱんくずリストは無関係ではありません。Serpで上記のような表示がされてしまった場合、SEO対策上、大きな影響が生じてしまうため注意が必要です。

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

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

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

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

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

いずれにしても、上記のように表示されてしまう場合は検索エンジンに「サイト名」がきちんと認識されていないことを意味していますので、サイト内をチェックしてみることをおすすめします。