パンくずリスト：階層構造とスキーマルール

パンくずリストは、現在のページがサイトの情報アーキテクチャ（IA）、つまりコンテンツを整理する親、子、兄弟関係のシステムの中でどこに位置するかを示す、順序付けられたリンクのトレイルです。これにより、読者はメインナビゲーションからやり直すことなく上位に移動でき、クローラーや回答システムには同じ階層構造の明示的な機械可読な記述を提供します。

この表示されているトレイルは意図的に文字通りのものです。3つの実際の祖先を特定し、現在のページを命名し、上位にのみリンクしています。「SEOナビゲーション」などの文言を、それが検索を集める可能性があるという理由だけで挿入することはありません。

この要素が重要な理由

読者は検索結果、共有リンク、メール、AI回答から深いページにたどり着きます。彼らは多くの場合、サイトのメニューがたどることを想定している経路を覚えていません。パンくずリストは一目でその曖昧さを解消します。「私はSEOプレイブック内のエレメントページを読んでいて、どちらかのコレクションに戻ることができる」——このコンテキストにより、読者はメニューを開いたり、URLを編集したり、戻るボタンを使用したりすることなく、サイトを探索する負担が軽減されます。

この心理効果は方向付けであり、装飾ではありません。明確なトレイルは読者に安定した場所の感覚と明確な脱出経路を与えます。これは、類似したページタイトルが異なるセクションに存在する可能性のある大規模サイトで最も重要です。たとえば、「Analytics」という製品カテゴリと、同じ名前のドキュメンテーションセクションがある場合、祖先が読者が詳細を解釈する前にページを区別します。

機械も同じ関係性を必要としますが、視覚的な間隔や山形記号に依存することはできません。機械抽出可能性とは、ソフトウェアがHTMLまたは構造化データからユニットの意味と順序を復元できることを意味します。セマンティックな<nav>、順序付きリスト、通常のリンク、aria-current、および対応するBreadcrumbListデータは、明示的な位置を持つエンティティのシーケンスを公開します。スタイル付きの<span>要素の行は視覚的に同じに見えるかもしれませんが、信頼できるナビゲーションのランドマークやリストの順序を提供しません。

表示されているトレイルと構造化出力は一貫したストーリーを伝える必要があります。ページが視覚的に「エレメント」の下にあるのに、スキーマが「SEOツール」をその親と呼ぶと、システムは2つの競合する階層を受け取ります。この不整合はスキーマを省略するよりも悪質です。なぜなら、サイトのエンティティ関係の信頼性を損なうからです。

このコンポーネントを選択する際は、エレメントライティングルール に従ってください。その優先順位ルールがここにも適用されます：ある一節の目的が階層と上位ナビゲーションを伝えることである場合、型付きのパンくず要素を使用します。自由テキスト、スラッシュ区切りのサブタイトル、またはリンク付きキーワードで模倣してはいけません。

使用すべき場合

ページがホームページ以外に少なくとも1つの意味のある親を持つ安定した階層に属している場合、パンくずリストを使用します。大規模な編集サイト、eコマースカタログ、ドキュメンテーションライブラリ、サービスエリア構造、ディレクトリ、およびマルチレベルの製品サイトは、訪問者がトップレベルより下の階層から入ることが多いため、最も恩恵を受けます。

セクション全体で一貫して使用します。一部の製品ページにのみトレイルが表示されていると、読者は欠落しているページが別の場所に属するのではないかと疑問に思い、自動化された解釈がテンプレートの偶然に依存することになります。コンテンツモデルまたはルートが階層を提供すべきであり、作成者がすべてのページで独立してそれを再構築するべきではありません。

表現する階層がない場合はパンくずリストを使用しないでください。単一ページのキャンペーン、すべてのページがホームの直下にある浅いサイト、または一時的なアプリケーション状態では、パンくずから有用な経路が得られない可能性があります。すべての浅いページに「ホーム › 現在のページ」を追加すると、新しいコンテキストを明らかにすることなく視覚的なノイズを生み出す可能性があります。

よくある誤用例は以下の通りです：

• ブラウザ履歴トレイル。「検索 › 商品 › カート」はセッションを記録しますが、コンテンツ階層ではありません。訪問者によって同じページに異なる親が表示されるため、その関係は正規的ではありません。
• キーワードパス。「最適CRM › 安価CRM › スタートアップ向けCRM」はターゲットフレーズを表示しますが、ナビゲーション可能なページとして存在しない可能性のある祖先を捏造します。パンくずラベルは実際のノードに名前を付けるものであり、追加のタイトルタグではありません。
• フィルタトレイル。「靴 › 青 › サイズ9」は選択されたファセットを記述します。各ステップが安定したインデックス可能なランディングページで意図的な親子関係を持つ場合を除き、フィルタコントロールに属します。
• 進捗インジケータ。「詳細 › 支払い › 確認」は取引のステップを示します。ステッパーセマンティクスと状態が必要であり、BreadcrumbListマークアップではありません。
• **目次。**セクションリンクは現在のドキュメント内を移動します。パンくずはサイト階層内のドキュメント間を移動します。
• **タグチェーン。**タグは多対多のトピックを記述しますが、パンくずは1つの順序付けられた主要パスを必要とします。1つのページに複数のタグを付けることはできますが、1つのトレイルに複数の競合する親を公開すべきではありません。

ページが正当に複数のコレクションに属する場合は、パンくず用に1つの主要な正規階層を選択します。他の発見経路はコンテキストリンクやコレクションページを通じて維持します。複数のパンくずトレイルは、読者とスキーマコンシューマの両方にどの親が権威あるものかを決定させることになります。

配置場所

方向付けは、ページが解釈を要求する前に提供されて初めて機能するため、トレイルはグローバルサイトヘッダーの後、ページのH1またはヒーローコンテンツの前に配置します。ページ固有の最初のナビゲーション領域とします。トレイルの折り返し方が異なる場合でも、デスクトップとモバイルレイアウトで同じ位置を維持します。

パンくずを目次、共有ツールバー、カテゴリチップ、アカウントコントロール、またはプロモーションバッジの横に配置しないでください。これらの要素は異なる質問に答えるものであり、狭い方向付けラインが汎用ツールバーのように見えてしまいます。トレイルとH1の間に広告やインラインのコールトゥアクションを配置しないでください。ヒーローに両方を含める場合は、パンくずをタイトルの上に積み、プロモーションコンテンツは導入コピーの下に分離します。

構成要素

1. ナビゲーションランドマーク： アクセシブル名「Breadcrumb」を持つ<nav>要素が、このトレイルをグローバルおよびローカルナビゲーションから区別します。
2. 順序付きリスト： 最も広い祖先から現在のページまでの順序が意味を持つため、リストマーカーが視覚的に削除されていても<ol>が必要です。
3. 祖先項目： 各祖先は、正規の人間可読なラベルと、実際の親ページへのクロール可能なリンクを使用します。
4. 区切り文字： 山形記号またはスラッシュで項目を視覚的に区切ります。装飾的であり、支援技術からは隠されます。
5. 現在の項目： 最後の項目は現在のページに名前を付け、リンクを持たず、aria-current="page"を使用します。
6. ドキュメントの関係： トレイルはH1の上に配置されます。スクリーンショットはこの位置をラベル付けしていますが、配置は作成されたコピーではなくテンプレートによって制御されます。

デザイン例

バリエーションは密度とレスポンシブ動作を変更しますが、基礎となる階層は決して変更しません。

デフォルト： 2〜5個の簡潔な項目が収まる場合は、完全なトレイルを表示します。コンテキストが隠されないため、これが推奨されるバリエーションです。

長いパス： 各レベルが実際のナビゲーション可能な祖先を表す場合にのみ、6〜7項目のトレイルを許可します。項目の境界で折り返します。読みにくくなるまでテキストを縮小しないでください。

モバイル折りたたみ： 実際のトレイルが適切に折り返せない場合、ホーム、直接の親、現在のページを保持します。フォーカス可能な省略記号コントロールで中間の隠れた祖先を表示できるようにします。完全なパスはDOM内に残すか、そのコントロールを通じて利用可能にし、構造化データはすべての実際の項目を保持しなければなりません。

ダークヒーロー： 色とフォーカスインジケータは背景に適応しますが、ラベル、順序、リンク動作、アクセシブル名はデフォルトと同じです。

パラメータ

この要素は構造化リストです。ラベルとURLの並列配列は位置がずれやすいためです。項目の順序が階層であり、同じ項目が可視HTMLとスキーマの両方に供給されます。

この要素には最初の見出しのマッピングはありません。パンくずはナビゲーションランドマークであり、タイトル付きのコンテンツセクションではありません。項目に見出しを配置すると、誤ったドキュメント階層が作成されます。最後の項目はデフォルトで作成元のソースにurlがありません。レンダラーは、表示されている現在の項目を自己リンクに変換せずに、ページの正規URLをBreadcrumbList出力に使用できます。

2項目とは、1つの祖先と現在のページを意味します。5が通常の上限です。7がハードな最大値です。それより深いトレイルはスキャンが困難になり、通常はスタイリングで隠すのではなく、ソースで修正すべきIAの問題を示しています。

構文とコード例

正規のコンポーネント名はbreadcrumbsです。例で値をインライン表示している場合でも、その項目順序はサイトのレビュー済み階層データから取得する必要があります。

ポータブルMarkdownディレクティブ

:::breadcrumbs{ariaLabel="Breadcrumb" schema=true collapse=mobile}
::item{label="ホーム" url="/"}
::item{label="SEOプレイブック" url="/seo-playbook/"}
::item{label="エレメント" url="/seo-playbook/elements/"}
::item{label="パンくずリスト" current=true}
:::

Hugoショートコード

{{< breadcrumbs ariaLabel="Breadcrumb" schema="true" collapse="mobile" >}}
  {{< breadcrumb-item label="ホーム" url="/" />}}
  {{< breadcrumb-item label="SEOプレイブック" url="/seo-playbook/" />}}
  {{< breadcrumb-item label="エレメント" url="/seo-playbook/elements/" />}}
  {{< breadcrumb-item label="パンくずリスト" current="true" />}}
{{< /breadcrumbs >}}

これはポータブルアダプター契約であり、このリポジトリに新しいショートコードを追加する指示ではありません。Hugoの実装は通常、ページの祖先とセクションメタデータから項目を派生させるべきであり、編集者がルーティングと矛盾するトレイルを公開できないようにします。

WordPressブロック

<!-- wp:amicited/breadcrumbs {"ariaLabel":"Breadcrumb","schema":true,"collapse":"mobile"} -->
<!-- wp:amicited/breadcrumb-item {"label":"ホーム","url":"/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"SEOプレイブック","url":"/seo-playbook/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"エレメント","url":"/seo-playbook/elements/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"パンくずリスト","current":true} /-->
<!-- /wp:amicited/breadcrumbs -->

WordPressはページの主要な親チェーンと正規URLからブロックを生成する必要があります。手動での上書きは編集レビューが必要です。1つのラベルを変更すると、ナビゲーション、スキーマ、サイトアーキテクチャが矛盾する可能性があるためです。

例

良い例：実際のナビゲーション可能な階層

ホーム › ドキュメンテーション › 監査 › 鮮度監査

これは、ドキュメンテーション、監査、鮮度監査がその親子順序の実際の正規ページである場合に適切です。各祖先はその移動先を予測し、現在のラベルはH1全体を繰り返さずに位置を確認できるほど簡潔です。

悪い例：キーワードが階層を装っている

ホーム › 最高のAI SEOツール › 手頃なAI可視性プラットフォーム › パンくずリスト

これは、中間の2つのラベルが実際の親ページではない場合に不適切です。トレイルはリンクが満たせない約束をし、セクションに名前を付ける代わりにプロモーションフレーズを繰り返し、クローラーに誤ったエンティティチェーンを作成します。実際の最短の祖先パスに置き換えてください。目的の概念にページが必要な場合は、まずそれらのページを作成してIAに統合し、パンくずで架空のアーキテクチャをプレビューしないでください。

スキーママークアップとアクセシビリティ

パンくずは、Schema.orgのBreadcrumbList（エントリがListItemオブジェクトである順序付きリスト）を提供できます。1ベースの整数position値を使用し、nameとitemを表示ラベルおよび正規の移動先と一致させます。1つのデータオブジェクトからJSON-LDとHTMLを生成し、名前変更、移動、または正規URLの変更が両方の出力を一緒に更新するようにします。

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"ホーム","item":"https://amicited.com/"},
    {"@type":"ListItem","position":2,"name":"SEOプレイブック","item":"https://amicited.com/seo-playbook/"},
    {"@type":"ListItem","position":3,"name":"エレメント","item":"https://amicited.com/seo-playbook/elements/"},
    {"@type":"ListItem","position":4,"name":"パンくずリスト","item":"https://amicited.com/seo-playbook/elements/breadcrumbs/"}
  ]
}

スキーマは表示されている階層を記述します。2つ目の最適化されたパスを許可するものではありません。リダイレクト、トラッキングパラメータ、非正規のプロトコルまたはホストのバリアント、サイト内検索結果、セッション状態、または隠れたキーワードカテゴリを含めないでください。2つの可能なタクソノミーに対して2つのBreadcrumbListオブジェクトを公開しないでください。コンテンツモデルで主要パスを選択し、それをすべての場所で使用します。

アクセシビリティは<nav aria-label="Breadcrumb">と順序付きリストから始まります。アクセシブルなラベルは、可視の見出しを必要とせずにこのナビゲーション領域を区別します。装飾的な区切り文字はaria-hidden="true"で隠すか、CSSで作成して、スクリーンリーダーが項目間で「大なり」を読み上げないようにします。最後の項目のみにaria-current="page"をマークし、それ自体へのリンクは作成しません。

すべての祖先リンクには可視のフォーカスインジケータと、タッチスクリーンでアクティブ化するのに十分な大きさのターゲットが必要です。長いトレイルは折り返すか、キーボード操作可能なコントロールを通じて折りたたむ必要があります。現在位置を隠す水平スクロールは許容されるデフォルトではありません。切り詰めにより視覚ラベルを短くできるのは、完全なアクセシブル名が利用可能で、短縮されたテキストがまだ区別可能な場合のみです。色だけに依存してリンクされた祖先と現在の項目を区別しないでください。

ライティングルール

パンくずラベルは場所の名前です。そのため、ミニチュアの見出しではなく、ナビゲーションのように記述します。各セクションまたはページの公式の最短の曖昧さのない名前を使用します。「すべての製品ドキュメンテーションを探索」よりも「ドキュメンテーション」の方が適切です。移動先がコンテキストを提供し、トレイルはスキャン可能である必要があるためです。

• ラベルあたり1〜6語、60文字以内とします。短いラベルにより、折り返し前に階層が見えるようになります。これは馴染みのない用語を省略してよいという意味ではありません。
• 現在のページを含めて通常2〜5項目を使用します。6〜7項目は、すべてのレベルが構造的に必要な場合のみ許可します。
• 最も広い祖先から現在のページへ順序付けます。トレイルを逆にしたり、兄弟を順序に含めたりしないでください。
• ブランド、製品、または頭字語に承認された表記がある場合を除き、文の先頭以外は小文字を使用します（日本語の場合は適切な表記を使用）。
• ラベルはページ間で安定させます。同じ親が一方のトレイルで「Docs」、別のトレイルで「Documentation」となるのは、ナビゲーションシステムがグローバルに変更される場合を除き避けます。
• 祖先ラベルは移動先の可視名と一致するか、それを密接に反映させます。簡潔なナビゲーションラベルは許容されますが、異なるキーワードターゲットは許容されません。
• 現在のページは簡潔に命名します。長いH1を短縮しても構いませんが、同じドキュメントを識別できる必要があります。
• 中立的なトーンを使用します。パンくずは方向付けを行うものであり、販売、祝福、警告、指示を行うものではありません。

コールトゥアクション、価格、在庫状況、日付、著者名、レビュースコア、絵文字、独立した意味を持つアイコン、プロモーション文言、トラッキングコード、またはクエリパラメータをパンくずラベル内に決して入れないでください。「戻る」「前へ」「次へ」を項目として追加しないでください。これらのコントロールは祖先ではなく履歴や順序を表現するためです。区切り文字はレンダラーが所有する表示要素であり、どのラベルの一部でもありません。

使用する投稿タイプ

postTypesフロントマターはサポートされる結合を記録します。以下の表はこれらの結合を使用法と配置ルールに変換するものであり、すべてのインスタンスに手動で作成されたトレイルが必要であるという主張ではありません。

「通常」とは、サイトに指定された安定した親が存在する場合に要素を使用し、本当に浅い実装では追加レベルを発明せずに省略することを意味します。「常に」は、記載されたネスト構造が存在することを前提としています。テンプレートがレンダリングを担当すべきであり、投稿タイプは期待される階層ソースと編集上の例外を定義します。

QAチェックリスト

• 実際の階層： すべての祖先は、サイトの主要IAにおける実際の意図的な親であり、キーワード、タグ、フィルタ、または以前の訪問ではありません。
• 正しい位置： トレイルはグローバルヘッダーの後、H1の前に表示され、その間にプロモーションや無関係なツールバーは挿入されていません。
• 単一のトレイル： ページは1つの可視パンくずと1つの対応するBreadcrumbListを公開し、競合するパスはありません。
• 完全な順序： 項目は最も広い祖先から現在のページへと並び、欠落した構造レベルや追加された兄弟はありません。
• 正規リンク： すべての祖先は、トラッキングパラメータや回避可能なリダイレクトなしに、その正規のインデックス可能なURLに直接解決します。
• 現在の状態： 最後の可視項目は現在のページに名前を付け、リンクされておらず、aria-current="page"を持ちます。
• 簡潔なラベル： 各ラベルは公式の最短の曖昧さのない名前を使用し、文の先頭以外は小文字（日本語の場合は適切な表記）に従い、編集上の制限内に収まっています。
• セマンティックHTML： コンポーネントはラベル付きナビゲーションランドマークと順序付きリストを使用しており、汎用スパンの行ではありません。
• 装飾的な区切り文字： 区切り文字は支援技術から隠され、アクセシブルなリンク名の中に表示されません。
• レスポンシブ動作： 現在位置は狭い画面でも利用可能であり、折り返し、開示、フォーカス順序、タッチターゲットが隠れた水平コンテンツなしで機能します。
• スキーマのパリティ： BreadcrumbListの名前、正規URL、順序、項目数、位置が、実質的に完全な可視階層と一致しています。
• 単一のデータソース： HTMLとJSON-LDは、別々のコピーとして維持されるのではなく、同じレビュー済み階層から生成されます。
• ポータブルパリティ： Markdown、Hugo、WordPressの表現は、同一の項目順序、ラベル、移動先、現在の状態を維持します。
• スクリーンショットステータス： キャプチャコメントは、実際のアセットが存在するまで非レンダリング指示として残ります。存在しないスクリーンショットが画像として参照されることはありません。

FAQ

アカデミーテンプレートは、フロントマターに保存された5つのレビュー済み質問をレンダリングします。これらはURLパス、現在の項目、構造化データ、不安定なフィルタページ、および実用的な深さの制限をカバーしています。