MENU
  1. ホーム
  2. SEO
  3. コンテンツ施策
  4. パンくずリストとは？基礎から設置方法、メリットまで詳しく解説

パンくずリストとは？基礎から設置方法、メリットまで詳しく解説

コンテンツ施策
パンくずリストとは？基礎から設置方法、メリットまで詳しく解説

パンくずリストは、SEOにとって非常に重要な要素であり、対策するのが必須とも言えます。

パンくずリストはユーザーがサイト内のどこにいるのかを明確に示し、目的のページへ効率的に誘導する役割を果た巣だけでなく、検索エンジンにとってもサイトの構造を理解する手がかりとなります。

そこで、この記事ではパンくずリストの基本概念から種類、設置方法まで、詳しく解説します。

目次

パンくずリストの基本

ここではパンくずリストについての基本的な事項を解説します。

パンくずリストとは？

パンくずリストは、ウェブサイトの階層構造を視覚的に表現し、ユーザーがサイト内のどの位置にいるかを一目で理解できるようにする役割を担っています。トップページからの階層を示すことで、ユーザーのサイト内ナビゲーションを助け、目的のページへ効率的に到達できるようサポートします。

パンくずリストの表示例

パンくずリストがあることで、現在位置がわかるだけでなく、上位ページ、画像でいう「コンテンツ施策」のアーカイブページへの移動ができます。また、サイト構造が一目でわかることで関連ページへアクセスすることも容易にできます。

パンくずリストの名称の由来

「パンくずリスト」という名称は、グリム童話の「ヘンゼルとグレーテル」に由来しています。物語の中で、主人公たちが森に迷い込まないよう、パンくずを落としながら歩いたことから、ウェブサイトにおいてユーザーの足跡を示すナビゲーションを「パンくずリスト」と呼ぶようになりました。

この童話では、残念ながらパンくずが鳥に食べられてしまい、道しるべとしての役割を果たせませんでしたが、ウェブサイト上のパンくずリストは、ユーザーを確実に目的地へと導いてくれます。

パンくずリストの表示方法と一般的な位置

パンくずリストは、通常、各ページの上部に表示され、リンクの区切り文字には「>」や「/」などが使用されます。階層の上位から下位へ向かって左から右に配置され、ユーザーがサイト内の位置を一目で把握できるようにします。

以下は、パンくずリストの一般的な表示例です。

  • ホーム > カテゴリー1 > サブカテゴリー1-1 > 商品A
  • トップページ / ニュース / 2023年 / 4月のイベント
  • TOP > 製品情報 > 新製品ラインナップ > 製品詳細

パンくずリストは、ページの主要コンテンツを妨げない位置に配置することが重要です。多くの場合、ヘッダーのすぐ下やメインコンテンツのすぐ上に表示されます。また、背景色を変えたり、枠線で囲んだりすることで、視認性を高める工夫がなされることもあります。

パンくずリストを設置するメリット

パンくずリストを適切に設置することで、ウェブサイトのユーザビリティとSEOの両面で多くのメリットが得られます。

ユーザビリティの向上

パンくずリストは、ユーザーがサイト内で迷子にならないように現在位置を示すことで、ユーザーが目的のページへ効率的に到達できるようになります。

以下のような状況で、パンくずリストはユーザーの役に立ちます。

  • 検索エンジンから直接深いページに到達した場合
  • サイト内リンクをクリックして、予期しないページに移動してしまった場合
  • 一度訪れたページを再度探したい場合
  • 同じカテゴリー内の他のページを探索したい場合

また、階層をたどることで、関連するページへの移動も容易になり、サイト内の回遊性が高まります。これは、ユーザーがサイトに長く滞在し、より多くのコンテンツに触れる機会を増やすことにつながります。

ウェブサイトの構造がわかりやすくなる

パンくずリストは、ウェブサイトの階層構造を視覚的に表現するため、ユーザーがサイトの全体像を把握しやすくなります。

特に、大規模なECサイトや企業サイト、ニュースサイトにおいてはパンくずリストの実装が必須と言っても過言ではありません。また、一般的なブログサイトや企業のコーポレートサイトをはじめオウンドメディアでも可能な限りパンくずリストを実装することがおすすめです。

規模が大きなサイトでも、パンくずリストがあることによってユーザーは現在位置を見失うことなく、スムーズにナビゲーションできます。

クローラビリティの改善

パンくずリストは、検索エンジンのクローラーがサイトの構造を理解しやすくするため、SEO対策としても有効です。

第一に、サイトの階層構造が明確にわかるため、ユーザーだけでなくクローラーにとってもページの関連性が把握しやすくなります。その結果、SEOからも高評価を受けられる可能性が高まります。

パンくずリストの種類と使い分け

パンくずリストには、主に3つの種類があります。それぞれの特徴を理解し、サイトの目的や構造に合わせて適切に使い分けることが重要です。

位置型パンくずリスト

位置型パンくずリストは、サイトのトップページから現在のページまでの階層を示すもので、最も一般的なタイプです。

位置型パンくずリストには以下のような特徴があります。弊社では実際に位置型パンくずリストを採用しています。

  1. サイトの固定的な構造を反映している。
  2. ユーザーがサイト内のどの位置にいるかを明確に示す。
  3. 上位階層へ戻るためのナビゲーションを提供する。

位置型パンくずリストは、企業サイトやブログ、ポートフォリオサイトなどにおすすめです。

属性型パンくずリスト

属性型パンくずリストは、商品の属性やカテゴリー、絞り込み条件などを表示するタイプです。

属性型パンくずリストには、以下のような特徴があります。

  1. ユーザーが選択した条件を視覚的に示す。
  2. 動的に生成されるページに適している。
  3. 商品検索や絞り込みをスムーズに行えるようサポートする。

属性型パンくずリストは、主にECサイトで使用されます。ユーザーが選択したカテゴリーや属性、価格帯などを表示することで、現在の絞り込み条件を明示し、他の条件への変更を容易にします。

パス型パンくずリスト

パス型パンくずリストは、ユーザーが辿ってきたページの履歴を表示するタイプです。

パス型パンくずリストには、以下のような特徴があります。

  1. ユーザーの行動履歴に基づいて動的に生成される。
  2. ユーザーごとに表示内容が異なる。
  3. 直前のページに戻るための「戻る」ボタンのような役割を果たす。

ただし、パス型パンくずリストは、検索エンジンのクローリングには適しません。ユーザーごとに表示内容が異なるため、サイトの構造を一貫して伝えることができないからです。SEO対策としてはあまり推奨されません。

各タイプの特徴と適した用途

サイトの目的や構造に合わせて、適切なタイプのパンくずリストを選択することが重要です。

タイプ特徴適した用途
階層型固定的なサイト構造を反映
ユーザーの現在位置を明示
上位階層へのナビゲーション		企業サイト
ブログ
ポートフォリオサイト
属性型ユーザーの選択条件を視覚化
動的なページ生成に適する
検索や絞り込みをサポート		ECサイト
不動産サイト
求人サイト
パス型ユーザーの行動履歴に基づく
ユーザーごとに表示内容が異なる
直前のページに戻る機能		ユーザーの行動分析

このように、パンくずリストには種類があり、それぞれ特徴や適したサイトが異なっています。自社のサイトはどれが適しているか確認した上でパンくずリストを実装するようにしましょう。

パンくずリストの設置方法３パターン

パンくずリストを効果的に設置するには、適切な実装方法と注意点を理解することが重要です。

HTMLでの実装方法

パンくずリストをHTMLで実装する際は、<nav>要素内に<ol>要素を用いて階層構造を表現するのが一般的です。各階層は<li>要素で表し、リンクは<a>要素で囲みます。以下は、シンプルなパンくずリストのHTMLの例です。

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/category/">カテゴリー</a></li>
    <li><a href="/category/subcategory/">サブカテゴリー</a></li>
    <li>現在のページ</li>
  </ol>
</nav>

<nav>要素にaria-label属性を追加することで、アクセシビリティを向上させます。また、最後の<li>要素にはリンクを付けず、現在のページであることを示します。

CSS を用いて、パンくずリストの見栄えを整えることも重要です。以下は、基本的なスタイリングの例です：

nav ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
}

nav li + li::before {
  content: " > ";
  padding: 0 5px;
}

list-style: none;で<ol>要素のデフォルトのナンバリングを削除し、display: inline;で各<li>要素を横並びにします。nav li + li::beforeは、隣接するリスト項目の間に区切り文字（この例では” > “）を挿入するための擬似要素です。

これらのHTMLとCSSを組み合わせることで、シンプルで効果的なパンくずリストを実装できます。サイトのデザインに合わせて、フォントサイズ、色、余白などを調整してください。また、レスポンシブデザインに対応させるために、メディアクエリを使用して、モバイル端末でのレイアウトを最適化することも忘れないようにしましょう。

CMSやプラグインを使った簡易設置

WordPress などの CMS を使用している場合は、パンくずリスト生成用のプラグインを活用することで、簡単に設置できます。

以下は、WordPressで人気のパンくずリストプラグインの例です。

  1. Yoast SEO
  2. Breadcrumb NavXT
  3. Rank Math

これらのプラグインでは、設定画面で表示位置や区切り文字などを指定するだけで、自動的にパンくずリストが生成されます。ただし、プラグインの選定には注意が必要で、信頼性の高いものを選ぶようにしましょう。

構造化データの活用

構造化データを使ってパンくずリストをマークアップすることで、検索エンジンにサイトの構造を明示的に伝えることができます。

以下は、JSON-LDを用いたパンくずリストの構造化データの例です。

&lt;script type="application/ld+json"&gt;
{
  "@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/category/"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "現在のページ",
    "item": "https://example.com/category/page/"
  }]
}
&lt;/script&gt;

この例では、@typeを”BreadcrumbList”として、パンくずリストであることを明示しています。各階層は”itemListElement”内の”ListItem”として表現され、”position”で順序を、”name”でアンカーテキストを、”item”でURLを指定します。

正しくマークアップされたパンくずリストは、検索結果でリッチスニペットとして表示される可能性があり、クリック率の向上にもつながります。

パンくずリストを設置する際の注意点とコツ

パンくずリストを設置する際は、いくつかの注意点とコツに留意することが大切です。

シンプルで分かりやすい構造にする

パンくずリストは、シンプルで分かりやすい構造にすることが重要です。階層が深すぎたり、複雑すぎたりすると、ユーザーが混乱してしまう可能性があります。

パンくずリストを作成する際には、以下のようなポイントに気をつけましょう。

  1. 階層は5段階以内に収める。
  2. 各階層の表現は簡潔で明瞭なものにする。
  3. ユーザーにとってわかりやすい階層構造にする。
  4. 不要な階層を省略する。

アンカーテキストにキーワードを含める

パンくずリスト内のアンカーテキストには、そのページに関連するキーワードを自然に含めるようにしましょう。これにより、検索エンジンがページの内容を理解しやすくなり、SEOにも好影響を与えます。

ただし、キーワードの詰め込みすぎや、関係のないキーワードを入れ込むなどは厳禁です。コンテンツの作成する際と同じく、過度な対策はむしろ逆効果となってしまいます。そのため、キーワードは自然な形で含めるようにし、ユーザーを惑わすような表現は避けましょう。

全てのページに一貫して設置する

パンくずリストは、サイトの全てのページに一貫して設置することが大切です。

ユーザーが混乱したり、検索エンジンがサイト構造を正しく理解できないことでサイトの信頼性が損なわれるのを防ぐためにも統一感のある設置を心がけましょう。

また、一部のページだけに設置していると、ユーザーが混乱したり、検索エンジンがサイト構造を正しく理解できなかったりする恐れがあります。

スマートフォンでの表示を最適化する

スマートフォンでの閲覧が増えている今、パンくずリストのモバイル表示にも気を配る必要があります。

具体的には、以下のような工夫をしましょう。

  1. 適切なフォントサイズと余白を設定する。
  2. 長すぎるパンくずリストは省略する。
  3. タップしやすいサイズのリンクにする。
  4. 横スクロールが発生しないようにする。

小さな画面でも見やすいよう、適切なフォントサイズや配置を選択しましょう。また、長すぎるパンくずリストは、省略記号を使って簡潔に表示するなどの工夫が求められます。

まとめ

パンくずリストは、ウェブサイトのユーザビリティとSEOを向上させる重要な要素です。ユーザーがサイト内を迷うことなく目的のページへ到達できるよう導き、検索エンジンにもサイトの構造を明確に伝えることができます。

サイトの目的や構造に合わせて適切なタイプのパンくずリストを選択し、シンプルで分かりやすい階層にすることが大切です。また、全てのページに一貫して設置し、モバイル表示にも配慮することで、ユーザーにとって使いやすいウェブサイトを実現できるでしょう。

この記事を参考にパンくずリストを効果的に活用し、サイトの価値を高めていきましょう。

コンテンツ施策
目次