パン粉とユーザーのパス

1）役割と価値

• 私が階層のどこにいるかを示します。
• 上のレベルへのクイックリターンパスを与えます。
• reduce 「back-bounce」（繰り返しクリック「back」）；
• 近隣レイヤーの検出性を高め、コンテンツページのSEOを改善します。

原則：simplicity> detail、 hierarchy> history of clicks、 persistent structure> dynamic noise。

2）いつ利用するか

ディープカタログとコンテンツ（プロバイダ→カテゴリ→ゲーム/記事）。
B2B管理者と2-3+ネスティングレベルのレポート。
セクションと目次（パン粉+目次）のロングライド/ドック。
最上位の画面（ロビー/デスクボード）では必要ありません。深さはありません。

3）パン粉の種類

1.階層（構造）-ユーザールートではなくIAを反映します：

「ホーム」プロバイダー「Play」 n GO 「Book of Dead」

2.道に沿って（履歴ベース）-実際のルートを表示します（Web上ではめったに適切ではありません。「back」に近い）。
3.ハイブリッド-階層+最後のステップで、保存されたフィルタ/コンテキストを使用します。

推奨事項：デフォルトで-ランダムな遷移から「ノイズ」を避けるための階層。

4）構成およびフォーマット

区切り文字：'>'または'/'（デザインとロケールと一致）。
起点：「ホーム「/ロゴはクリック可能です。
切り捨て：深さ>4レベルで、中間リンクを非表示にします……「」を開示します。
最後の要素：現在のページ、クリックできず、視覚的にアクセント。
タイトルの長さ：ホバー/フォーカスで楕円形でクリップされますが、完全な'タイトル'/ツールチップ。

5）パン粉の生成（論理）

referer 'yではなく、正規URL/IA階層に従ってビルドします。
エンティティ（ゲーム/記事）の場合は、ランダムタグではなく、メインカテゴリ（または「パン」カテゴリ）を取ります。
動的ページ（フィルター、ソート）の場合-パン粉はベースセクションへのパスを示し、コンテキストは個別に表示されます（フィルターチップ）。
マルチテナンシーでは、最初またはセレクター側にブランド/オペレータのコンテキストを追加しますが、パン粉を過負荷にしないでください。

6）フィルター、分類、ページ分け

フィルターはパン粉を「延ばす」べきではない。以下にチップを表示します（「>Live Providers」+チップ：Geo=CA、 Device=Mobile）。
ペジネーションはパン粉に含まれていません。現在のページはリストコントロールに表示されます。
親レベルをクリックしてフィルタをリセットします：「クリーン」カテゴリに戻ります。

7）モバイルUX

1行にH1の下にパン粉を置きます。スペースが不足している場合-中央リンクの水平スクロールまたは切り捨て。
タップターゲット≥ 44px、キーボードナビゲーションの顕著な焦点（PWA用）。
システム「戻る」-構造のためのパン粉、ボタン-履歴のために複製しないでください。

8）空室状況（A11y）

セマンティクスのnav ［aria-label=「breadcrumb」］'と'ol> li'を使用します。
最後の要素に'aria-current=」page」'を指定します。
参照のコントラストはWCAG AAに対応します。フォーカス-見える。
アイコン/セパレータは信号だけではありません（テキストラベルがあります）。
DOMの順序は視覚的な順序に対応します。

9） SEOとデータ

コンテンツページでは、構造化データBreadcrumbList （JSON-LD）を使用します。
正規URLと安定したパン粉は、検索の階層を理解するのに役立ちます。
「空」の中間ノードをコンテンツなしでインデックスしないでください（薄いページは避けてください）。

10）表示パターン

Classic series：「ホーム」「セクション」「サブセクション」「ページ」。
「ホーム」……「カテゴリー」「カード」。
With Brand Context （B2B）： 「Brand A> Reports> Revenue> NGR」。
ドック内のアンカー：'Documentation> KYC>#Levels-checks'（アンカー-目次、パン粉-セクションの前）。

11）行動とマイクロインタラクション

ホバー/フォーカスはリンクを強調表示し、クリックエリア（テキストだけでなく「クラム」全体）をクリックします。
最後の「crumb」には、近隣のエンティティ（このプロバイダの他のゲームなど）との追加メニューがあります。
「上がる」は、canonを壊さない限り、リストの位置/ページを保持します（例：それにしても？page=2'）。

12）メトリックとテレメトリー

• 'breadcrumb_click （level、 label、 url）'
• 'breadcrumb_expand_more'（切り捨ての場合）
• 'back_to_parent_retained_context'（位置/ページが保持されている場合）

• 使用率：パン粉をクリックしたユーザーの割合≥ 2深さです。
• バック・バウンス：ディープ・ページにログオンした直後の「バック」の量を減らします。
• Time-to-Parent：より高いレベルに戻る時間。
• SEO CTR：パン粉マーク付きページのCTRを変更します。

13） iGamingの例

B2C（カジノ）：「ホーム>プロバイダー>プラグマティック・プレイ>ゲート・オブ・オリンパス」。プロバイダのページ-フィルターチップ（Live/Slots/Megaways）；パン粉-構造のみ。

トーナメント： 「ホーム」「トーナメント」「秋季カップ」「ルール」

B2B（プロバイダ）：'Panel> Content> Releases> Book of Ra （ID 12345）'-最後の要素はクリックできません。［ステートメントで開く］ボタンの横にあります。

14） Antipatterns

H1単語を利益なしで繰り返すパン粉。
構造の代わりに歴史的ルート（混沌とした「文字列」）。
パン粉にフィルターとページネーションを含める（「Games> Slots> page=5」）。
最後のパン粉はそれ自身への参照である。
過度の深さ、小型、低コントラスト-「見えないパン粉」。
メニュー/URLでリンク名が一貫性がない。

15）実装チェックリスト

1.IAマップ：エンティティの正規パスを定義します。
2.ジェネレータ：IA/URLからパン粉をビルドする関数（参照元に依存しない）。
3.切り捨て：深さ>4のルール、フルパスのポップオーバー。
4.A11y/SEO： 'nav ［aria-label］'、 'ol/li'、 'aria-current'、 JSON-LD。
5.スタイル：AAコントラスト、モバイル、ディバイダー、ディメンション。
6.コンテキスト：フィルタ/ソート-以下のチップはパン粉ではありません。
7.テレメトリー：イベント/展開、Time-to-Parent、バックバウンスをクリックします。
8.ドキュメント：例、アンチケース、リンクの命名ガイド。

16）ボトムライン

1.正規の階層に基づいて、

2.読みやすく、アクセス可能、

3.フィルター/ページ状態に対して抵抗力がある、

4.測定可能な利点（遠隔測定/SEO）を使って。

だから、彼らは本当にナビゲートし、目標へのユーザーのパスを短縮するのに役立ちます。