パンくずリスト(トピックパス)の詳細解説と作り方（その1）

以前の記事でパンくずリストが検索結果に表示される記事を書いたのですが、どのようにしたら自分のサイトのリストがSERP(検索結果の画面)に反映されるようになるのか分析というか大手サイトの作成を例に挙げて作成方法をご紹介します。が、文が長くなってしまったので分析と作成は次回以降として、今回の記事は「パンくずリストの詳細」です。

SEO専属の方は復習がてら、これから始める方は覚えておいて損はありませんのでぜひ参考にして下さい。

まずはこのパンくずリストの簡単な説明ですが、そのページが今どの位置にあるのかを階層ごとに順番に表示するもので、「ヘンゼルとグレーテル」でヘンゼルが森で迷子にならないように自分の通った道にパンくずを落としていった事に由来します。
この名称をウェブサイトにも引用したわけですが、例を挙げるとグーグルのヘルプフォーラムにあるたくさんのメニュー。この中から「Gmail」→「Google トーク」と進んでゆくと、パンくずリストはこのようになります。


日本語では「パンくず」や「パンくずリスト」「トピックパス」、英語だと「breadcrumb list(ブレッドクラム)」、呼び方は”breadcrumbs”だったり”breadcrumb navigation”、”TopicPath”だったりします。

米ヤフーのDEVELOPER NETWORKでは以下のような説明があります。

細かく見ていきましょう。

どんな問題を解決できますか？

• ユーザーが上の階層にも行くことができて、そのサイトのどこにいるか・他のページとの位置関係を理解出来ます。

これをどうを使いますか？

• (リストに)表示させるページは階層の範囲内であって、サイトのトップページではありません。
  ※補足　サブフォルダを作成してそこをトップページやカテゴリーのトップに設定しているサイトの場合などは、必ずしもルートのトップページを表示する必要はないってことだと思われます。
• ユーザーは(パンくずリスト以外の)他の方法を使って簡単にはナビゲート出来ません。例えばかなり深い階層ならば、ナビゲーション(パンくずリスト)を提供するのが一番シンプルで良い方法です。
• ユーザーは外部ソース(リンク)からたたどり着くでしょうから(例えば検索結果ページ)、前後ページの関係を知る事が必要となります。

これらを解決する方法は？

• 一番上の階層ページから始まる現在のページまでの下の階層を水平のリストで表示しましょう。

ラベル(リスト)について

• 設置の場所はどこでも可能で、それらのページにマッチしたタイトルでなくてはなりません。
• パンくずリストにはtitle capitalization(最初の文字を大文字にする)をして下さい。
  ※補足　大抵は日本語になると思うのであまり機会がないとは思いますが、カテゴリ名として英語を使っている場合は最初の文字を大文字にして下さい。だだし、固有名詞で小文字から始まる場合はそのまま小文字を使えばいいと思われます(グーグルのサイト内でもそのような箇所が存在します)。
• 各ラベル(リスト)を不等号(>)またはそれに似た記号で分離しましょう。
• パンくずリストの最後部には現在のページのタイトルを含めましょう。
• 一番上の階層のラベルには’HOME’を使用しないで下さい。その代わり種類の名前を使用しましょう(例えば’HOME’よりは’旅行’や’天気’)
  ※補足　パンくずリストのトップに当たるページには’HOME’や’TOP’と表示されているサイトが結構ありますが、そのページのカテゴリに沿った名称がいいようですね。

ハイパーリンク(リンクテキスト)について

• パンくずリスト最後のテキスト以外はすべてのラベルをハイパーリンクにして下さい(最後のハイパーリンクでないものは現在のページのタイトルと一致します)。
• 不等号(>)のある、またはリスト分離のしてあるスペースには決してハイパーリンクをしないで下さい。
  ※補足　リストとリストの間にはそれ以外の余計なリンクは含めてはいけないって事ですね。
• 訪問済みのリンクであってもそうでなくても同じスタイル(形式)である必要があります。

その他考慮する点

• 一番上のページ(パンくずリストの起点となるページ)には決して表示しないで下さい。
• パンくずリストは時にユーザーの直近ブラウジング履歴と一致しますが、そうでないときもあります。
• ユーザーが生成したページのタイトルを動的インクルードします。
  ※補足　これだけだとよくわかりませんね。恐らくですが、教えて！gooみたいなサイトで自動生成されたページだったり、カテゴリだったりをパンくずリストに使用出来ますって事でしょうか？

なぜそのパターン(パンくずという言い回し)を使いますか？

• パンくずリストはそのサイトの他のページとの前後の関係性を示してくれます。
• パンくずリストは階層構造をナビゲートする方法を提供します。
• ’Breadcrumb’(パンくずリスト)という用語は(まぎらわしく)誤解を招くと言えます。パンくずリストは、私たちがそのページに到着するまでの道と、来た道を戻る事が出来るよう示してくれます。現実には我々が’Breadcrumbs’と言っているのはDiemen Patterns Repository(というサイト)で説明されている’Homeward Path’(ホームワードパス)のようです。しかしながら、この慣用語が最も一般的(共通)のためこの語を選びました。

アクセシビリティ

• それぞれの階層を表示しているラベルはそのページタイトルにマッチしていなくてはなりません。。
• 個々のパンくずリストがキーボードフォーカスされている時、Enterキーを押せばそのリンクページへナビゲートしてくれます。
  ※補足　キーボードフォーカスは、Tabキーを押してリンクの部分がキーボードで選択されている状態の事だと思われます。

数年前からこの説明ページはあったのですが、他の検索エンジンからはここまで詳細のルールは発表されていない(と思います。簡単な説明はグーグルでもあったのですが…)ので、米ヤフーからの説明ではありますが日本でも今の所はこの通りにやって間違いはないかと思います。
次回の記事では実際にSERP(検索結果ページ)に表示されているサイトの分析と作成例を書きます。

パンくずリストの作成方法　-　トピックパスの詳細解説と作り方（その2）はこちらです。