トップページを見ていない訪問者
記事はメッセージから、商品ページは検索から直接開かれます。訪問者はトップページもメニュー構成も知らないかもしれません。見出しの上に「ホーム → ジャーナル → 記事」という短い道筋があれば、ページの位置を理解できます。空いた一行を飾るためではなく、より広い記事一覧へ迷わず移動するための要素です。初めて訪れた人の視点で必要性を考えましょう。
示すのは履歴ではなく階層
パンくずリストは親ページとの関係を表します。「検索 → お問い合わせ → 商品」という偶然のクリック順序を並べるものではありません。以前の画面に戻る操作にはブラウザーの戻る機能があります。まずサイトの構造を整理し、その後で区切りや矢印を設計します。複数のコレクションに属するページでは、分かりやすい主経路を選び、ほかの関連情報は別に示すと混乱を抑えられます。
各段階に実際の行き先を用意する
見栄えのためだけに空のカテゴリーを追加しないことが大切です。親ページのラベルは移動先の内容と一致させます。現在のページ名はリンクのないテキストでも構いません。同じページを再表示するリンクは、多くの場合役に立ちません。ここでも内容が分かるリンク名が重要です。独創的でも意味が伝わらない名称より、正確で素直な言葉を優先します。
支援技術とキーボードにも分かりやすく
W3Cのパターンでは、パンくずリストを名前付きのナビゲーション領域として扱います。現在地がリンクならaria-current="page"を付けます。リンクでない場合は、この属性は任意です。区切り記号を独立したキーボードの停止位置にしないようにします。フォーカスが見えるか、読み上げ順序が自然か、主メニューと区別できる名前があるかを確認しましょう。装飾よりも操作の一貫性が優先です。
狭い画面でも意味を残す
長い名前を収めるために文字を極端に小さくするのは避けます。適切に折り返すか、親カテゴリーへ進めるコンパクトな構成を検討します。操作方法が分からない三点リーダーの中に、すべての文脈を隠さないようにしましょう。長いタイトル、拡大した文字、各言語の翻訳で試します。短い単語だけの美しいモックアップでは、実際のコンテンツに耐えられるか判断できません。
構造化データだけで完成にはならない
BreadcrumbListは検索エンジンに階層を説明する方法ですが、検索結果の表示形式や順位を保証するものではありません。データは実在するページと経路に合わせます。公開前には深い階層のURLを直接開き、親ページのリンクを一つずつたどり、意図せず言語が変わらないか確認します。良いパンくずリストは目立ちすぎず、「ここはどこか」「一つ上では何が見られるか」という二つの疑問に答えます。