パンくずナビゲーション

• パンくずリストは、現在のページまでの階層パスを「Home > Category > Current Page」の形式で1行に表示する補助的なナビゲーションです。

• 各ステップは親ページへのクリック可能なリンクであり、最後の現在ページの項目は通常リンクなしで表示されます。

• パンくずリストをBreadcrumbList 構造化データとしてマークアップすると、Googleは検索結果にカテゴリパスを表示し、それを使ってページを分類できます。

• NN/gによると、パンくずリストは階層が3階層以上になると有用で、1階層または2階層の浅い構造や線形構造では価値があまりありません。

• パンくずリストはグローバルナビゲーションやローカルナビゲーションを置き換えるものではなく、それらを補完するものであり、内部リンクを強化することでSEOにも役立ちます。概要

パンくずナビゲーションは、ホームページからの経路をたどることで、現在のページがサイトの階層内のどこに位置するかを示す補助的なナビゲーションです。NN/gの定義によれば、パンくずリストとは、ホームページまでさかのぼる現在のページおよびその祖先ページ（親、祖父母ページなど）へのリンクの一覧です。通常はページ上部、グローバルナビゲーションのすぐ下に、「>」または「/」記号で区切られたリンク列として配置されます。

この名称は、戻り道を見つけるためにパンくずを落とした童話「ヘンゼルとグレーテル」に由来します。その主な目的は、外部リンク

からサイトの奥深くに直接訪れ、ホームページを経由していないユーザーに、今どこにいるのかを理解させ、親カテゴリへ簡単に移動できるようにすることです。仕組みパンくずリストの各ノードは親ページへのリンクであるべきで、ユーザーがクリックして直接移動できることが、パンくずリストの理解において中心的な要素です。唯一の例外は最後の項目である現在ページで、これは通常リンクなしで表示されます。パンくずリストは閲覧履歴（訪問したページの順序）ではなくサイトの階層を反映するものであり、独自のURLを持たない抽象的なカテゴリではなく、実在するページのみを含めるべきです。

Googleは、ページ本文内に見つかったパンくずリストのマークアップを使用して、検索結果におけるページ情報を分類します。生のURLを表示する代わりに、検索結果にはカテゴリパスが表示され、ユーザーはそのページがサイト内のどこに位置するかを把握できます。

BreadcrumbList Schema の例

Googleが検索結果にパンくずリストを表示するには、

BreadcrumbList

構造化データとしてマークアップする必要があります。 1つの BreadcrumbList には少なくとも2つの ListItem エントリが含まれ、それぞれの ListItem には position（順序、1から開始）、name（表示ラベル）、item（そのページのURL）が必要です。最後の現在ページのエントリでは item を省略でき、その場合 Google はそのページ自身の URL を使用します。以下は、Google Search Central の公式ドキュメントにある JSON-LD の例です。. A single BreadcrumbList contains at least two ListItem entries, and each ListItem needs a position (its order, starting from 1), a name (the display label), and an item (the URL of that page). The final current-page entry can omit item, in which case Google uses that page's own URL. The following is the JSON-LD example from Google Search Central's official documentation.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Science Fiction",
    "item": "https://example.com/books/sciencefiction"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Award Winners"
  }]
}
</script>

上の例では、3番目の「Award Winners」が現在のページであるため、item は省略されています。item に有効なURLがないと、クローラーの観点ではパスが途切れてしまうため、現在のページを除くすべてのステップには正しいURLを含める必要があります。

理由とメリット

NN/g は1995年以降、パンくずリストを推奨しており、「UI上のコストは小さい一方で、ユーザーに多くの利点を提供する」と評価しています。ただし、その有用性は条件付きです。NN/gによれば、パンくずリストは階層が3階層以上になったときに有効であり、1階層または2階層の浅い構造や、線形構造のサイトでは不要です。

設計時に重要な基本原則がいくつかあります。まず、パンくずリストは補助的な要素であり、補完はしても置き換えはしない、グローバルナビゲーションバーやセクション内のローカルナビゲーションの代替にはなりません。次に、モバイルでは画面領域が限られるため、複数行に折り返すパンくずリストは避け、直近の親カテゴリのみを表示する形に簡略化するのが最適です。それでも、フォントサイズと余白は最小タップターゲット（おおよそ1cm × 1cm）を下回らないようにすべきです。

SEOの観点では、パンくずリストは親カテゴリページへの一貫した内部リンクを形成し、サイト構造を明確にします。また、構造化データを通じて、検索結果におけるカテゴリパス表示（リッチリザルト）に貢献します。

実装チェックリスト

• ホームページを最初のリンクとして配置し、現在のページまでの階層パスを順序どおりに表示します。

• 現在のページを除き、すべてのステップをクリック可能なリンクにします。

• 最後の現在ページ項目は、リンクではなく非アクティブなテキストとして表示します。

• 訪問履歴ではなく、サイトの階層構造を反映させます。

• 独自のURLを持つ実在のページのみを含め、抽象的なカテゴリは除外します。

• BreadcrumbList JSON-LD でマークアップし、Rich Results Test で検証します。

• モバイルでは、パンくずを直近の親ステップのみ表示する形に簡略化します。

出典

• Google Search Central — Breadcrumb (BreadcrumbList) structured data

• schema.org — BreadcrumbList

• Nielsen Norman Group — Breadcrumbs: 11 Design Guidelines for Desktop and Mobile

• Nielsen Norman Group — パンくずナビゲーションの有用性がますます高まる