← すべてのガイド

ナビゲーションSEO：Googleがメニュー構造をクロールできるようにする

パンくずリストと構造化データ：検索エンジンのための階層マークアップ

パンくずリストのスキーママークアップを実装し、ナビゲーションメニューと連携させ、リッチリザルトを改善する方法。

パンくずリストは一見すると地味なインターフェース要素に思えますが、Googleがそれをどれほど重視しているかを理解すると、その価値が見えてきます。パンくずリストは商品ページとカテゴリページの上部に表示され（ホーム → 女性 → ドレス → サマードレス）、ユーザーがサイト階層のどこにいるかを理解するのに役立ちます。これがユーザー体験上のメリットです。SEOのメリットはさらに大きいもので、パンくずリストはサイト全体に権威を流動させる内部リンクを作成し、構造化データでマークアップすればGoogleの検索結果にリッチスニペットとして直接表示されます。

パンくずリストが表示された検索結果は目立ちます。プレーンなURL（example.com/products/12345）を表示する代わりに、Googleは完全なパンくずリストの経路を表示します（Example Store → 女性 → ドレス）。ユーザーはクリックする前にコンテキストを確認できます。その結果はより権威あるように見え、クリック率が上がり、Googleに対してあなたのサイトが強調する価値のある明確な階層を持っていることを示します。

しかし、パンくずリストはこうしたメリットを引き出すには正しく実装される必要があります。実際のHTMLリンク（単なるビジュアルスタイルではなく）、構造化データマークアップ（JSON-LD）、そしてメインナビゲーション構造との整合性です。多くのストアはパンくずリストをデザイン要素として追加していますが、マークアップを追加していないため、SEOの価値を完全に逃しています。

要点
  • パンくずリストは商品からカテゴリへの内部リンクを作成し、リンク評価を上方に流します。
  • 構造化データ（JSON-LD BreadcrumbList）はGoogleに検索結果でパンくずリストを表示するよう指示します。
  • パンくずリストの経路はURL構造とメインナビゲーション階層に一致する必要があります。
  • Googleのリッチリザルトテストでテストし、Search Consoleでエラーを監視します。

SEOにおけるパンくずリストが重要な理由

パンくずリストは3つのSEO機能を提供します。

1. 内部リンク構造

すべてのパンくずリストは内部リンクのセットです。「ホーム → 女性 → ドレス → 商品」というパンくずリストを持つ商品ページには、3つの内部リンクが含まれています。1つはホームページへ、1つは女性カテゴリへ、1つはドレスへです。

これらのリンクは商品ページから権威をカテゴリページにフィードバックします。商品ページが外部バックリンクを受け取ると（あるブログが商品をレビューして直接リンクする場合）、その権威の一部はパンくずリンク経由でカテゴリページにフローバックします。これは通常のナビゲーションフロー（ホーム → カテゴリ → 商品）の逆です。パンくずリストは双方向フローを作成します。

パンくずリストはGoogleが複数のページ発見パスも提供します。Googleはパンくずリストを上方（商品からカテゴリからホームへ）と下方（ホームからカテゴリから商品へ）の両方で追跡でき、クロール効率を改善し、ページが孤立する可能性を減らします。

2. サイト階層シグナル

パンくずリストはGoogleにあなたのサイトがどのように組織されているかを明確に伝えます。「ホーム → 女性 → ドレス → サマードレス」という経路は、サマードレスがドレスのサブカテゴリであり、ドレスが女性のサブカテゴリであり、女性がトップレベルカテゴリであることをGoogleに伝えます。

Googleはこの階層を使用して、どのページがハブ（多くのパンくずリストにリンクされているカテゴリ）であり、どのページがリーフ（個々の商品）であるかを理解します。ハブページはより重要と見なされ、より頻繁にクロールされます。

パンくずリストなしでは、GoogleはURL構造、内部リンクパターン、ナビゲーションメニューから階層を推測する必要があります。パンくずリストは階層を明確にし、曖昧性を減らします。

3. 検索結果のリッチリザルト

パンくずリストに構造化データマークアップを追加すると、Googleはそれらを検索結果に直接表示できます。プレーンなURLの代わりに、ユーザーは完全なパンくずリストの経路を見ます。

パンくずリストなしの検索結果例：

example.com › products › 12345-summer-dress

パンくずリスト付きの検索結果例：

Example Store › 女性 › ドレス › サマードレス

2番目の結果はより情報的でクリックしやすいです。ユーザーはページを訪問する前にカテゴリコンテキストを見ます。これはクリックスルー率（CTR）を改善し、より高いCTRはGoogleにとって正のランキングシグナルです。

パンくずリストの実装方法：HTML構造

パンくずリストは実際のHTMLリンクである必要があり、単にスタイル付きテキストではありません。パンくずリスト経路の各レベルは、適切なカテゴリページを指す_アンカータグである必要があります。

基本的なHTML構造

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/collections/women">女性</a></li>
    <li><a href="/collections/dresses">ドレス</a></li>
    <li><a href="/collections/summer-dresses">サマードレス</a></li>
  </ol>
</nav>

重要な要素：

  • <nav aria-label="Breadcrumb">：ラッパーはnav要素とARIAラベル付きで、スクリーンリーダーがそれをパンくずリストの経路として（単なるジェネリックナビゲーションではなく）告知します。
  • <ol>：順序付きリスト。パンくずリストはシーケンス（順序が重要）だからです。
  • <a href="...">：実際のURLを持つ実際のアンカータグ。各パンくずリストレベルはクリック可能でクロール可能です。

最後の項目（現在のページ）はリンクまたはプレーンテキストのいずれでもあります。Googleは両方を受け入れます。いくつかのUXガイドラインはそれをプレーンテキストにすることを推奨しています（クリックしても何もしないため—あなたはすでにそのページにいます）。一方、他のガイドラインは一貫性を保つためにそれをリンクとしておくことを推奨しています。どちらもSEOでは機能します。

CSSスタイリング

パンくずリストは通常、アイテム間に区切り文字（/や › や >）が付いたインラインの水平リストとしてスタイルされます。区切り文字はCSSの疑似要素で追加できます：

nav[aria-label="Breadcrumb"] ol {
  list-style: none;
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

nav[aria-label="Breadcrumb"] li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: #999;
}

区切り文字はビジュアルのみです—HTML構造の一部ではありません。Googleはそれらを無視します。

構造化データマークアップを追加する方法

HTMLパンくずリストは内部リンクを作成してユーザー体験を改善します。構造化データマークアップはGoogleに、これらのリンクがパンくずリストの経路を表し、リッチリザルトとして表示される必要があることを伝えます。

GoogleはJSON-LD形式のBreadcrumbListスキーママークアップをサポートしています。これはパンくず構造を説明するJSONデータを含むスクリプトタグです。

JSON-LD BreadcrumbList例

パンくずリストがある各ページ（商品ページ、カテゴリページ、記事ページ）の<head>または<body>の終わりにこのスクリプトを追加します：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "ホーム",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "女性",
      "item": "https://example.com/collections/women"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "ドレス",
      "item": "https://example.com/collections/dresses"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "サマードレス",
      "item": "https://example.com/collections/summer-dresses"
    }
  ]
}
</script>

主要フィールド

  • @context と @type：標準的なschema.org宣言。これらはGoogleにこれがBreadcrumbListであることを伝えます。
  • itemListElement：ホームページから現在のページまで、順序に並んだパンくずリスト項目の配列。
  • position：各項目の順序（ホームページは1、最初のカテゴリは2、サブカテゴリは3など）。
  • name：パンくずリストの表示テキスト（ユーザーが見るもの）。
  • item：ページの完全なURL（https://で始まる絶対パス）。

最後の項目（現在のページ）はitemフィールドを含む必要があります。古いGoogleドキュメントではそれを省略することを示唆していますが、現在のベストプラクティスはすべての項目に含めることです。

一般的なパンくずリストスキーマのミス

ミス1：相対URLではなく絶対URL

Googleは構造化データで絶対URLを要求しています。これは検証に失敗します：

"item": "/collections/women"

これは成功します：

"item": "https://example.com/collections/women"

ShopifyテーマがLiquidを使用してパンくずリストマークアップを生成する場合、urlフィルターをabsolute_urlで使用していることを確認してください：

"item": ""

ミス2：HTMLとJSON-LDの不一致

HTMLパンくずリストとJSON-LDマークアップは同じ経路を説明する必要があります。HTMLが「ホーム → 女性 → ドレス」を表示しているがJSON-LDが「ホーム → クロージング → ドレス」を表示している場合、Googleはマークアップを無視するか、エラーとしてフラグを立てる可能性があります。

これはテーマがURL構造に基づいてパンくずリストを動的に生成しているときに発生しますが、JSON-LDマークアップをハードコーディングしています。常に両方を同じデータソースから生成します。

ミス3：パンくずリスト以外のリンクを含める

一部のテーマは現在のページタイトルをパンくずリストに含めています（ナビゲーション可能なリンクでない場合でも）：

<li>商品：サマーコットンドレス</li>

これはHTML（ユーザーにコンテキストを提供する）では問題ありませんが、対応するJSON-LD項目は依然としてカテゴリまたはセクションページを表す必要があり、商品自体ではありません。最後の項目は親カテゴリである必要があります：

{
  "position": 3,
  "name": "ドレス",
  "item": "https://example.com/collections/dresses"
}

商品を最終的なパンくずリスト項目として含める場合、実際のURLがあることを確認してください：

{
  "position": 4,
  "name": "サマーコットンドレス",
  "item": "https://example.com/products/summer-cotton-dress"
}

ミス4：ナビゲーションに一致しないパンくずリスト

メインナビゲーションにカテゴリ「女性用衣類」がある場合でもパンくずリストが「女性」を表示している場合、Googleはこれらが同じカテゴリかどうかについて混乱する可能性があります。

ナビゲーション、パンくずリスト、URLで一貫した命名を使用してください。ナビゲーションが「女性用衣類」と言っている場合、パンくずリストも言う必要があります。URLが/collections/womens-clothingの場合、構造化データのカテゴリ名は一致する必要があります。

パンくずリストマークアップのテスト方法

Googleリッチリザルトテスト

Googleは構造化データを検証するための無料ツールを提供しています。リッチリザルトテスト（「Googleリッチリザルトテスト」を検索してURLを入力してください）です。

ツールはあなたのページをクロールし、構造化データを抽出し、それが有効かどうかを表示します。パンくずリストの場合、以下を表示する必要があります：

  • 「BreadcrumbList」が検出されました
  • アイテム数
  • 各項目の名前とURL

ツールが（「Missing required field: item」または「Invalid URL」などの）エラーを表示する場合、展開する前に修正してください。

手動View Sourceチェック

ブラウザで商品またはカテゴリページを開き、View Source（Ctrl+U / Cmd+Option+U）を選択し、BreadcrumbListを検索してください。すべてのパンくずリスト項目がリストされたJSON-LDスクリプトが表示されます。

確認：

  • すべてのURLは絶対パス（https://で始まる）です。
  • パンくずリストの経路はページに表示されるHTMLパンくずリストと一致しています。
  • position値は順序立てられています（1、2、3、…）。

Google Search Console

パンくずリストマークアップを展開した後、Google Search Console → 拡張機能 → パンくずリストをチェックしてください。このレポートは以下を表示します：

  • 有効なパンくずリストマークアップを持つページ数
  • エラーまたは警告があるページ数
  • Googleが見つけた特定のエラー

Googleはあなたのページをクロールしてこのレポートを入力するのに数日かかる可能性があります。エラーが現れた場合、エラー詳細をクリックして、どのページが影響を受けているか、またエラーメッセージが何であるかを確認してください。

パンくずリストとURL構造

パンくずリストはURL構造と一致すると最も効果的です。商品のURLが：

https://example.com/collections/women/products/summer-dress

パンくずリストはそのパスを反映する必要があります：

ホーム → 女性 → サマードレス

URLがパンくずリストの経路と一致していない場合（URLは/collections/womenと言っているがパンくずリストは「クロージング → 女性」を表示している）、ユーザーと検索エンジンはサイト階層について矛盾したシグナルを受け取ります。

Shopifyストアの場合、これは厄介です。Shopifyの商品URLはデフォルトでは平坦です：

https://example.com/products/summer-dress

URLにカテゴリはありません。商品は複数のコレクション（女性、ドレス、サマーセール）に表示される可能性があるため、単一の規範的なパンくずリストの経路はありません。

解決策：

1. プライマリコレクションを選択してください。 商品が複数のコレクションに属する場合、1つをプライマリに指定します。パンくずリストにそのコレクションを使用してください。Shopifyテーマはしばしばこれをユーザーがどのコレクションから来たか（HTTPリファラー経由）をチェックすることで行いますが、これはユーザーが検索結果から直接商品ページに着陸する場合には機能しません。

2. URLパラメーターを使用してください。 一部のテーマは商品URLにコレクションパラメーターを追加します。/products/summer-dress?collection=women。パンくずリストはそのパラメーターから生成できます。

3. Shopifyのコレクションベースの商品URLを使用してください。 Shopifyの管理画面で、商品のコレクションベースURLを有効にできます。設定 → 全般 → 商品のURL形式。これにより商品URLが/collections/women/products/summer-dressに変わります。コレクションはURLの一部になったため、パンくずリストの生成は簡単になります。

ファセット化されたナビゲーション用のパンくずリスト

ファセット化されたナビゲーション（サイズ、色、ブランドなどの属性でカテゴリページをフィルタリング）は、現在のフィルター状態を反映する動的パンくずリストを作成します：

ホーム → 女性 → ドレス → サイズ：M → 色：青

これらのフィルター選択はパンくずリスト構造化データに表示されるべきですか？

Googleのガイダンス：パンくずリストはサイト階層を表す必要があり、一時的なフィルター状態ではありません。構造化データは以下を表示する必要があります：

ホーム → 女性 → ドレス

HTMLパンくずリストはフィルターを含む完全な経路を表示できます（ユーザー体験のため）が、JSON-LDはフィルターを省略する必要があります。フィルターは安定したURL（ユーザーの相互作用のたびに変わる）ではなく、ナビゲーション可能な階層を表しません。

例外：フィルターの組み合わせが独立したカテゴリページとしてプロモートされている場合（たとえば、独自のURLとコンテンツを持つ「女性用青いドレス」コレクション）、これは実際のカテゴリであり、パンくずリストに表示される必要があります。

メインナビゲーションとのパンくずリストの相互作用

パンくずリストはメインナビゲーションの代わりにはなりません—それはそれを補完します。メインナビゲーション（ヘッダーメニュー）はトップレベルのカテゴリと主要セクションへの高速アクセスを提供します。パンくずリストは階層的なコンテキストと深いページからの上方へのナビゲーションを提供します。

両者は整合している必要があります：

  • メインナビゲーションに「女性」カテゴリがある場合、そのカテゴリの下の商品ページのパンくずリストには「女性」を含む必要があります。
  • メインナビゲーションが「男性用衣類」をラベルとして使用している場合、パンくずリストも「男性用衣類」を使用する必要があり、「男性」ではなく。

一貫性のない命名はユーザーを混乱させ（「『女性』は『女性用衣類』と同じですか？」）、SEOシグナルを希薄化させます（Googleは同じカテゴリに対して2つの異なるラベルを見て、それらが同じであることを推測する必要があります）。

実装チェックあなたのストアの商品ページを開いてください。View Sourceを選択し、「BreadcrumbList」を検索してください。何も表示されない場合、パンくずリスト構造化データはありません。追加してください—マークアップは実装に10分かかり、数日以内にクリックスルー率を改善できます。

クロール効率ツールとしてのパンくずリスト

リッチリザルトと内部リンク以外に、パンくずリストはGoogleがあなたのサイトをより効率的にクロールするのに役立ちます。Googleが商品ページをクロールするとき、パンくずリンクを含むすべてのリンクを抽出します。パンくずリストが3つのリンク（ホーム、女性、ドレス）を含む場合、Googleはクロールする3つの追加のURLを持っています。

大規模なストアの場合、これは重要です。Googleは有限のクロール予算を割り当てます—毎日すべてのページをクロールしません。より頻繁にリンクされているページ（より多くのページから）がより頻繁にクロールされます。数百の商品ページのパンくずリストに表示されるカテゴリは、メインナビゲーションのみにリンクされているカテゴリよりもはるかに頻繁にクロールされます。

これは在庫不足または季節ものの商品の場合に特に重要です。商品が在庫切れになった場合、検索結果を更新するためにGoogleにカテゴリページをすぐに再クロールさせたいです。商品ページからカテゴリページへのパンくずリンクは、Googleが週単位ではなく数時間または数日以内にカテゴリページを再クロールする可能性を高めます。

Shopifyでのパンくずリストの実装

ほとんどの最新のShopifyテーマはパンくずリストサポートを含めていますが、すべてが構造化データマークアップを含めているわけではありません。あなたのテーマドキュメンテーションをチェックするか、テーマのLiquidファイルのパンくずリストコードを検査してください。

あなたのテーマがJSON-LDマークアップを含めていない場合、それを手動で追加できます。テーマのtheme.liquidファイル（または商品ページとコレクションページに含まれているスニペット）に、これのようなスクリプトを追加してください：

{% if template contains 'product' %}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "ホーム",
        "item": "{{ shop.url }}"
      }
      {% if collection %}
      ,{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title | escape }}",
        "item": "{{ collection.url | absolute_url }}"
      }
      {% endif %}
      ,{
        "@type": "ListItem",
        "position": {% if collection %}3{% else %}2{% endif %},
        "name": "{{ product.title | escape }}",
        "item": "{{ product.url | absolute_url }}"
      }
    ]
  }
  </script>
{% endif %}

これは商品ページ用のパンくずリストマークアップを生成します。productをcollectionで置き換え、パンくずリストの経路を調整することでコレクションページ用に適応させてください。

Navi+ AI Menu Builderなどのアプリを使用しているストアの場合、パンくずリストマークアップはしばしばナビゲーションパッケージの一部として自動的に処理されます—あなたのアプリの設定またはドキュメンテーションを確認してください。

パンくずリストは実装できる最も高いROIの構造化データ実装の1つです。マークアップは簡単で、検証ツールは無料で、インパクト（リッチリザルト、内部リンク、クロール効率）は即座にあります。あなたのストアにまだパンくずリストがない場合は追加してください。パンくずリストはあるが構造化データがない場合は、JSON-LDを追加してください。増分的な労力は低く、SEOのメリットは時間とともに増加します。

This article is part of the larger guide on ナビゲーションSEO：Googleがメニュー構造をクロールできるようにする.

ナビゲーションSEO：Googleがメニュー構造をクロールできるようにする
シェア Facebook X

Navi+ AI Menu Builder で始めましょう

プラットフォームを選択してください — 無料でインストール、数分でライブ。

Shopify Shopify App Store からインストール — アカウント不要、シームレスな統合。
WordPress WordPress ディレクトリから公式プラグインをインストール。任意の WordPress サイトで動作。
任意のウェブサイト Wix、Squarespace、Webflow、またはその他のサイト — シンプルな埋め込みコードで追加。
すべてのプラットフォームで同じ料金と機能。  ·  質問がありますか? ドキュメントを表示