Cocoonパンくずリストの最適設定とSEO効果|初心者向けガイド
パンくずリストは、読者が「今どこにいるか」を理解するための道しるべです。
特に初心者向けサイトでは、パンくずリストがあるだけで迷いが減り、離脱率が下がり、SEOにも良い影響 を与えます。
Cocoonはパンくずリスト機能が標準搭載されており、初心者でも簡単に設定できます。
この記事では、パンくずリストの意味・SEO効果・Cocoonでの最適な設定方法を、
IT初心者向けサイトに合わせてわかりやすく解説します。

この記事では、下記の悩みを解決します。
・パンくずリストの意味がよくわからない
・SEOに効果があるのか知りたい
・Cocoonでどこから設定するのかわからない
・表示位置はどこが最適なのか迷う
・固定ページと投稿ページで設定を分けたい
・カテゴリ構造とパンくずの関係を知りたい
等を分かりやすく解説します。
パンくずリストとは?(初心者向けのやさしい説明)
パンくずリストは、ページ上部に表示される「階層ナビゲーション」です。
過去に私は、パンくずリストの設定を手動でサイトに設置しました。
その時はレイアウトが崩れたり思うように履歴のページの値が取得できずとても苦い経験があります。
今回、Cocoonテーマでは標準搭載されているので、私にはこの機能を使わない選択肢は考えられませんでした。
以下にパンくずリストの有用性を解説します。
操作:管理画面⇒Cocoon設定⇒固定ページタブ(投稿タブ)それぞれより設定(詳しくは、下図赤枠を参照ください。)
●メリット
・読者は自分の位置をすぐ把握でき、迷わず上位ページに戻れます。
・初心者向けサイトでは、パンくずリストがあるだけで安心感が増し、記事の読みやすさが向上 します。
・UX(ユーザーの利便性)の向上: ユーザーがサイト内で迷子にならず、1クリックで上の階層(カテゴリ等)に戻れます。
・SEO(検索エンジン対策)の強化: Googleの検索ロボット(クローラー)がサイト構造を理解しやすくなり、検索結果にも階層が表示されやすくなります。
パンくずリストの設定では、「固定ページ」と「投稿ページ」で設定する場所が違うので注意してください。


なぜ「パンくずリスト」と呼ぶのでしょうか?

童話「ヘンゼルとグレーテル」が由来です。 主人公が森で迷子にならないよう、通り道にパンくずを落としたエピソードから名付けられました。

パンくずリストを設置した方が、良いサイト記事は何階層ほどのサイトが多いでしょうか?

大きなサイトはほぼ100%の確率で設置されています。例えば、不動産やネットショッピングのサイトなど。個人ブログなどでも3階層以上の物は設置してます。

通常のパンくずリストでは、PCとスマホで表示方法等を変えたりしますがCocoonにはそのようにPC用、スマホ用の設定等はないでしょうか?

Cocoonはレスポンシブ設計となっていますので、普通に設定するだけでスマホでも自動的に最適化されます。
パンくずリストがSEOに効果がある理由
パンくずリストは、Googleがサイト構造を理解するための重要なシグナルです。
私は当初Cocoonにパンくずの機能が標準で搭載されている事は知りませんでした。
本サイトでは、パンくずを諦めていました。
しかし、上記設定で簡単に使う事が出来助かっています。是非これからWordPressでサイトを作成しようとしている方の参考になれば幸いと思い記載しました。
Googleがサイト構造を理解しやすくなる
パンくずリストは「このページはどのカテゴリに属しているか」を検索エンジンに伝える重要なシグナルです。
階層構造が明確になるため、Googleはサイト全体を正しく評価できます。
内部リンクが自動的に増える
パンくずリストの各階層はリンクになっているため、上位カテゴリへの内部リンクが増え、サイト全体の評価が底上げされます。
内部リンクは SEO の基礎であり、
パンくずリストは“自動で内部リンクを増やす装置” と言えます。
回遊率が上がり、離脱率が下がる
読者が迷わず移動できるため、停滞時間が伸び敷いては、UX(ユーザーの利便性)が向上します。
Cocoonのパンくずリストを設置し、サイトの回遊率向上にお役立てください。
パンくずリストの表示位置の選び方
下記にCocoonでのパンくずリストの表示位置と特徴の一覧を作成しましたので記載します。
| 表示位置 | 特徴 |
| メインカラムトップ(本文上) | 階層がすぐわかる。情報量が多いサイト向け。 |
| メインカラムボトム(本文下) | 読了後の導線に最適。 |
| タイトル上 | 階層が明確で視認性が高い。 |
| タイトル下(固定・投稿ページ共おすすめ) | デザインが崩れず、自然に読める。 |
| 非表示 | ランディングページ(*)など階層が不要な場合。 |
(*):ランディングページ(LP)は一つの商品やキャンペーンを売ることに特化した「チラシ」や「営業マン」のような役割を持っているページの事です。
記事タイトルを含めるか
私も当初、パンくずに記事タイトルを含めるか迷いました。
タイトルが長いとスマホでは、醜くなりますので初心者の方は、「含めない」方をお勧めします。
- 含める:階層が明確になる
- 含めない:スマホでスッキリする(おすすめ)
初心者向けサイトでは「含めない」方が読みやすいです。

なぜ記事タイトルをパンくずリストに『含めない』方が良いのでしょうか?

理由は、スマホの画面幅が狭いからです。
初心者のうちは、クリックされやすいように記事タイトルを30文字〜40文字と長めに書くことが多いです。
もしタイトルをパンくずリストに含めてしまうと、スマホ画面で3行も4行もパンくずリストだけで埋まってしまい、肝心の本文が下に追いやられてしまいます。
だからこそ、スマホでスッキリ見せるために『含めない』にチェックを入れるのが、私の実践から得たおすすめの設定です。
パンくずリスト設定で注意すべきポイント
カテゴリ構造と一致させる
パンくずリストはカテゴリ構造と連動するため、カテゴリ階層が整理されていないとパンくずも乱れます。
また、私個人の見解ですがカテゴリ名を短くし、パンくずリストもスッキリさせると良いと思いました。
階層が深すぎないようにする
私の経験上2~3階層ほどが良いと思います。調べると3~5階層とありますが、階層が深すぎると読者が迷いやすく及びスマホでも見づらくなるので注意してください。(離脱に繋がります。)
また、仮に『ホーム > WordPress > Cocoon設定』なら3階層でスッキリしています。
しかし、これが『ホーム > パソコン > インターネット > ブログ > WordPress > Cocoon設定』のように5階層も6階層も深くなってしまうと、パンくずリストが長すぎて読者は自分がどこにいるか分からなくなります。
まずは大きな箱(親カテゴリ)を数個用意するだけの、シンプルな設計から始めましょう。
デザインが崩れたり見づらくなったりする
Cocoonテーマで標準にパンくずリストを設定しているだけでしたら、下記の現象はあまり考えられませんが念のため情報提供します。
- スマホ画面で改行されて見苦しくなるカテゴリ名が長い場合や階層が深い場合・タイトルが長い場合等は、スマホの狭い画面で2行・3行に改行され、見た目が悪くなることがあります。
- デザインの邪魔になることがある。ミニマル(極限までシンプル)なデザインを目指しているサイトの場合、テキストの羅列であるパンくずリストがノイズに感じられることがあります。
パンくずリストが初心者向けサイトに向いている理由
●初心者はサイト構造に迷いやすい
初めてサイトを訪れたユーザーは、自分が今どこにいるのかを見失いがちです。現在地がわからないストレスは早期離脱の大きな原因になります。パンくずリストは、いわば「Webサイトの地図」です。現在の階層が視覚的にわかるだけでユーザーに安心感を与え、サイトを探索しやすくなります。
●記事数が増えるほど迷いやすくなる
特化ブログなどで記事数が100本、200本と増えていくと、カテゴリ内の情報が複雑化します。パンくずリストがあれば、「この記事の上の階層(カテゴリ)には、他にどんな記事があるんだろう?」とワンクリックで戻れるため、1回の訪問で2ページ、3ページと読まれる「回遊率」の向上に直結します。
●SEOとUXの両方を改善できる
初心者向けサイトで最も重要なのはUX(ユーザーの利便性)ですが、パンくずリストは検索エンジン(SEO)にとっても非常に有益です。検索エンジンのロボット(クローラー)がサイト内を巡回しやすくなり、サイト全体の評価が正しく伝わります。また、検索結果に階層が表示されるため、クリック率の向上も期待できます。
●関連記事への導線が自然に作れる
手動で関連記事へのリンクを貼るのは手間がかかりますが、パンくずリストを導入するだけで、すべてのページから親カテゴリへ自動的に「内部リンク」が設置されます。これにより重要なカテゴリページの評価が高まり、サイト全体のSEO構造が自然と強化されます。
まとめ:パンくずリストはSEOとUXを同時に改善する必須設定
最後まで記事を見ていただきありがとうございました。
この記事では、下記のようにWordPress初心者がつまずきやすいパンくずリストを解説しました。
必要な場面に遭遇しましたらご活用いただけると幸いです。
パンくずリストは、
- 読者の迷いを減らす。
- サイト構造を明確にする。
- 内部リンクを強化する。
という非常に重要な要素です。
Cocoonなら、投稿タブと固定ページタブで簡単に設定できますので、
初心者向けサイトでは必ず設定しておきましょう。
「Cocoonで必ず設定すべき基本機能まとめ|初心者向けWordPress設定ガイド」の関連記事を下記リンクしてますのでご覧ください。
【BackWPup】WordPressの自動バックアップ設定ガイド(子記事)
CSSでブログの操作性を向上!戻るボタン・横スクロールの書き方(子記事)
【Cocoon】初心者が最初に設定すべき基本機能と重要項目まとめ(親記事)
YouTube埋め込みパラメータとプラグイン活用法(子記事)
【Yoast】記事を一瞬で複製!Duplicate Postの使い方(子記事)
【UX改善】ブログカード最適化と吹き出しを使った読者獲得術(子記事)
Cocoonのコメント欄を非表示にすべきケースと正しい設定手順(子記事)
【UX向上】内部リンクと外部リンク(画像)の開き方使い分け術(子記事)
【Cocoon】読者が迷わないグローバルメニュー&サイドバー設計(子記事)
【保存版】WordPressメジャーアップデート安全移行ガイド(子記事)
【WPvivid】サイトのバックアップと移行(移転)の操作ガイド(子記事)
全体の流れを詳しく知りたい方は、まず「【Cocoon】初心者が最初に設定すべき基本機能と重要項目まとめ」からご覧ください。

