ホームページの上のほうに、「ホーム › ブログ › 記事名」のような小さなリンクの列があるのを見たことはないでしょうか。
あれが今回の主役、「パンくずリスト」です。
こんにちは、三重県でホームページ制作を行っているMYコンサルティングです。
このブログでは、制作の現場で実際にお客様へ説明している内容を、そのまま記事にしています。
今まさにこのページの上にも、パンくずリストがあります。
スクロールして戻ってみると「ホーム › ブログ › パンくずリストとは」と表示されているはずです。実物を見ながら読み進めてください。
パンくずリストとは
サイトの中で「自分が今どこにいるか」を階層で示すナビゲーションのことです。
「ホーム › ブログ › 記事名」のように、トップページから現在のページまでの道のりをリンクで並べます。
英語では breadcrumbs（パンくず）。童話『ヘンゼルとグレーテル』で、森で迷子にならないようにパンくずを落として道しるべにした話が名前の由来です。
パンくずリストの役割は「迷子防止」
パンくずリストの一番の仕事は、訪問者を迷子にさせないことです。
検索から来た人は、トップページではなく記事や商品ページに直接着地します。
つまり、サイトの入口が玄関とは限りません。いきなり2階の部屋に入ってくるようなものです。
そのときパンくずリストがあれば、「ここは何のサイトの、どのカテゴリの、何のページか」が一目でわかります。
そして1クリックで上の階層に移動できるので、「他の記事も見たい」「このお店のトップページを見たい」という行動につながります。
💡 スマホ時代こそ効果があります
スマホには画面の広いメニューがないため、サイト内の移動手段が限られます。
パンくずリストは1行に収まる省スペースのナビゲーションなので、スマホとの相性が特に良いのです。
SEOに効く3つの理由
パンくずリストは見た目が地味なわりに、SEOでは定番の施策です。
理由は3つあります。
理由1. Googleがサイトの構造を理解しやすくなる
Googleのクローラー（サイトを巡回するロボット）は、リンクをたどってページ同士の関係を把握します。
パンくずリストは「このページはブログというカテゴリに属している」という階層関係をリンクで明示するので、クローラーにとって最高の道案内になります。
理由2. 内部リンクが自動的に増える
全ページにパンくずリストを置くと、すべての下層ページからカテゴリページやトップページへリンクが張られることになります。
重要なページにサイト内のリンクが集まる構造は、SEOの基本形そのものです。
理由3. 検索結果の表示が変わる
後述する「構造化データ」をあわせて設定すると、検索結果でURLの代わりに「サイト名 › カテゴリ名」という階層が表示されるようになります。
英数字が並んだURLよりも、日本語の階層のほうが内容が伝わり、クリックの安心感につながります。
パンくずリストの3つの種類
教科書的には3種類ありますが、結論から言うと使うのはほぼ1種類だけです。
| 種類 | 表示例 | 使いどころ |
|---|---|---|
| 階層型（位置型） | ホーム › ブログ › 記事名 | これが標準。ほとんどのサイトはこれ一択 |
| 属性型 | ホーム › 赤 › Mサイズ | 絞り込み条件を表示。大規模ECサイト向け |
| パス型（履歴型） | ホーム › ページA › ページB | 閲覧履歴を表示。ブラウザの「戻る」と重複するため現在はほぼ使われない |
普通のお店や会社のホームページなら、迷わず階層型を選んでください。
この記事の作り方も階層型を前提にしています。
作り方（コピペ用コード付き）
HTMLで作る場合
パンくずリストの本体は、リストとリンクだけのシンプルなHTMLです。
当ブログでも実際にこの形を使っています。
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/blog/">ブログ</a></li>
<li>パンくずリストとは</li>
</ol>
</nav>ポイントは2つです。
順序に意味があるので箇条書きはol（番号付きリスト）を使うこと。そして現在のページ（最後の項目）にはリンクを付けないことです。
構造化データ（検索結果に階層を出すための設定）
検索結果の表示を変えるには、Googleにパンくずの内容を機械的に伝える「構造化データ」を追加します。
以下をページのhead内に貼り、階層とURLを自分のサイトに合わせて書き換えるだけです。
<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/blog/"},
{"@type": "ListItem", "position": 3,
"name": "パンくずリストとは"}
]
}
</script>💡 この記事自体が実例です
このページのHTMLには、上とまったく同じ形の構造化データが入っています。
当サイトの全ページに設定してあり、検索結果に階層が表示される状態になっています。気になる方はページのソースを見てみてください。
WordPressで作る場合
WordPressなら、自分でコードを書かなくても導入できます。
多くのテーマ（Cocoon、SWELLなど）にはパンくずリスト機能が最初から入っているので、まず設定画面を確認してください。
テーマになければ、Yoast SEOなどの定番プラグインで追加できます。構造化データも自動で出力されます。
置き方の定石とよくある間違い
設置するときの決まりごとはシンプルです。
定石は3つ。
ページの上部（タイトルの上あたり)に置く。必ず「ホーム」から始める。現在のページはリンクにしない。これだけ守れば大丈夫です。
⚠ よくある間違い
① トップページにも置いてしまう
トップは階層の頂点なので、パンくずリストは不要です。「ホーム」1つだけのパンくずには意味がありません。
② 階層をURLと食い違わせる
パンくずの階層は、サイトの実際の構造と一致させてください。実態と違う階層を見せると、訪問者もGoogleも混乱します。
③ スマホで2行3行に折り返す
長いページ名をそのまま入れると、スマホで場所を取りすぎます。長い場合は記事名を省略するか、横スクロールにする調整が必要です。
よくある質問
パンくずリストを付けると順位は上がりますか？
パンくずリスト単体で順位が大きく動くものではありません。ただ、サイト構造が伝わりやすくなる・内部リンクが整う・検索結果の見た目が良くなるという積み重ねは確実に効きます。手間が小さいわりに効果が残る、費用対効果の良い施策です。
トップページにも必要ですか？
不要です。パンくずリストは「今いる場所までの道のり」を示すものなので、出発点であるトップページには道のりが存在しません。下層ページにだけ設置してください。
スマホでは非表示にしてもいいですか？
表示したままをおすすめします。Googleはスマホ版のページを基準に評価するため（モバイルファーストインデックス）、スマホで消すと構造を伝える効果が薄れます。場所を取る場合は、消すのではなく1行に収まるよう省略する形が良いです。
構造化データは必ず入れないとダメですか？
必須ではありません。パンくずリスト自体はHTMLだけでも機能します。ただし検索結果に階層を表示させたい場合は構造化データが必要です。コピペで済む作業なので、入れておいて損はありません。
まとめ
パンくずリストは、訪問者には「現在地と帰り道」を、Googleには「サイトの構造」を伝える小さくて働き者のナビゲーションです。
作るのに特別な技術はいりません。
HTMLならリストを書くだけ、WordPressならテーマの設定かプラグインで済みます。構造化データまで入れれば、検索結果の見た目も良くなります。
当社で制作するホームページには、パンくずリストも構造化データも標準で組み込んでいます。
「自分のサイトにパンくずが無い」「検索結果にURLの英数字がそのまま出ている」という方は、お気軽にご相談ください。