パンくずリストの設置手順と表示崩れの直し方

パンくずリストを設置したいけれど、コードをどこにどう書けばいいのか、スマホで折り返して崩れるのをどう直せばいいのか、迷っていませんか。この記事では、パンくずリストの設置手順を「HTML」「CSS」「構造化データ」「WordPress」の4通りで、コピペして使えるコード付きで解説します。

あわせて、現場でよく起きる表示崩れやエラーの直し方も具体的にお伝えします。読み終わるころには、自社サイトに合った方法で自分の手で設置し、崩れも直せる状態になっているはずです。

Contents / 目次

1. パンくずリストの設置は「見た目」と「Google向け」の2点セットで考える
2. パンくずリストの設置手順を4ステップで解説
3. パンくずリストを正しく設置すると何が変わるのか
4. パンくずリストでよくある失敗と回避法
5. 設置してから気づく落とし穴と、現場での割り切り方
6. よくある質問
7. 自社サイトに合った形で整えたい方へ

パンくずリストの設置は「見た目」と「Google向け」の2点セットで考える

先に結論をお伝えします。パンくずリストの設置でつまずく原因のほとんどは、やるべきことが2つあるのに1つしか意識していないことにあります。

パンくずリストとは、ページ上部に「ホーム ＞ サービス ＞ Web制作」のように今いる場所を階層で示すナビゲーションのことです。つまり、来店客に「あなたは今、店内のこの売り場にいますよ」と案内板を出すようなものです。

このパンくずリストを正しく設置するには、次の2つを両方そろえる必要があります。ここを分けて考えると、一気に整理できます。

• 見た目のパンくず（HTML＋CSS）：訪問者の画面に実際に表示される部分。ページ上部に配置し、上の階層へ戻れるリンクを付ける
• Google向けのパンくず（構造化データ）：検索エンジンに階層構造を伝えるためのコード。検索結果にパンくずが表示されやすくなる

この2つは役割が違います。見た目のHTMLは人間のためのもの、構造化データはGoogleのためのものです。片方だけでは効果が半減するので、両方セットで用意するのが基本の考え方になります。

実装方法は主に3通りあります。自社の状況に合わせてどれを選ぶか、下の表で見比べてみてください。

実装方法	向いている人	メリット	注意点
HTML＋CSSを手書き	自作サイト・静的HTMLサイトの運用者	細かく調整でき、余計な機能が増えない	全ページに手作業で入れる手間がかかる
WordPressプラグイン	WordPressを使っていて手早く入れたい人	設定画面でオン・オフでき、構造化データも自動で付く	デザインの自由度がやや低い
テーマファイルに直接記述	WordPressで細かく作り込みたい人	デザインもコードも自由に制御できる	テーマの知識が必要で、更新時に消える場合がある

どの方法を選んでも、最終的なゴールは同じです。訪問者が迷わず上の階層へ戻れて、なおかつGoogleにも階層が正しく伝わっている状態を作ることです。次の章から、具体的な手順を順番に見ていきましょう。

パンくずリストの設置手順を4ステップで解説

ここからは実際に手を動かせるように、設置の手順を分解して説明します。HTMLで作る場合とWordPressで作る場合の両方に触れるので、自社に合う方を進めてください。

ステップ1。見た目のHTMLを書く

まず、画面に表示されるパンくず本体をHTMLで作ります。ここで大事なのは、タグの選び方です。ナビゲーションを意味するnavタグの中に、順序があることを示すol（順序付きリスト）を入れるのが、検索エンジンにも人にも意味が伝わる書き方です。

次のコードがそのままコピペで使える基本形です。リンク先や表示名は自社のページに置き換えてください。

<nav aria-label="パンくずリスト">
  <ol class="breadcrumb">
    <li><a href="/">ホーム</a></li>
    <li><a href="/service/">サービス</a></li>
    <!-- 今いるページはリンクにしない -->
    <li aria-current="page">Web制作</li>
  </ol>
</nav>

押さえておきたいポイントは、次の2つです。

• 今いるページ（一番右の項目）にはリンクを貼らない。自分がいるページへのリンクは意味がないうえ、押せそうに見えて押せないと訪問者が戸惑います。
• aria-current="page"を付ける。これは画面読み上げソフトなどに「ここが現在地」と伝えるための印です。

ステップ2。CSSで横並びにして表示を整える

次に、そのままだと縦に並んでしまうリストを、CSSで横一列に整えます。ここで最初から表示崩れ対策も入れておくのが、あとで慌てないコツです。

.breadcrumb {
  display: flex;
  flex-wrap: wrap;      /* 画面が狭いとき折り返しを許可 */
  list-style: none;     /* リストの黒丸を消す */
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  white-space: normal;  /* 長い項目名の折り返しを許可 */
}
/* 項目の間に区切り記号を入れる（最後の項目には付けない） */
.breadcrumb li:not(:last-child)::after {
  content: "＞";
  margin: 0 8px;
  color: #999;
}
@media (max-width: 600px) {
  .breadcrumb { font-size: 12px; } /* スマホは少し小さく */
}

このflex-wrap: wrap;とwhite-space: normal;の2行が、スマホでの表示崩れを防ぐ肝です。理由はあとの章でくわしく説明しますが、この2行を入れておくだけで、長いページ名がはみ出して横スクロールになる事故のほとんどを防げます。区切り記号は好みでスラッシュ（/）や矢印（»）に変えても構いません。

ステップ3。Google向けの構造化データ（JSON-LD）を追加する

見た目ができたら、Googleに階層を伝える構造化データを追加します。Googleが最も推奨している形式はJSON-LDというもので、HTMLのどこに書いても動き、後から管理しやすいのが利点です（この点はGoogle検索セントラルの公式ドキュメントでも案内されています）。

構造化データとは、ページの内容をコンピューターが理解できる形で書いた「注釈」のことです。これを入れておくと、検索結果にパンくずの階層が表示され、クリック率の向上につながることがあります。

次のコードを、ステップ1のHTMLと同じ階層になるように書き換えて、ページ内に貼り付けます。

<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/service/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Web制作"
    }
  ]
}
</script>

書き換えるのはname（表示名）とitem（URL）、そしてposition（階層の番号）です。https://example.com/の部分は自社の実際のURLに直してください。見た目のHTMLと、この構造化データの階層と順番は必ず一致させます。表示と中身がズレていると、Googleに不正確な情報を渡すことになるからです。

最後の項目にitemを付けない。今いるページ（一番深い階層）には、URLを示すitemを書きません。現在地にはリンクを貼らないという見た目のルールと、ここで揃えておくと考え方がシンプルになります。

ステップ4。公開前にリッチリザルトテストで確認する

コードを入れたら、公開前に必ず検証します。ここを飛ばすと、記述ミスに気づかないまま「なぜか検索結果に出ない」と悩むことになります。

確認にはGoogleが提供している「リッチリザルトテスト」を使います。URLかコードを貼り付けると、構造化データが正しく認識されるか、エラーや警告がないかを判定してくれます。エラーが出たら、次の章の失敗パターンを見ながら直しましょう。問題がなければ、Google Search Consoleからインデックス登録をリクエストし、数日から数週間、検索結果への反映を待ちます。

WordPressの場合は、ここまでの手順を自分で書かなくても、パンくず機能を持つプラグインを入れれば設定画面から追加できます。プラグインの多くは見た目のHTMLと構造化データの両方を自動で出力してくれるため、コードが苦手な方はこちらが手軽です。

WordPress自体の基本設定に不安がある方は、初心者向け！WordPress初期設定の完全ガイドもあわせて読むと土台が整います。

パンくずリストを正しく設置すると何が変わるのか

パンくずリストを整えると、訪問者の使いやすさとサイトの見つけられやすさの両方が良くなります。ここでは、取り組んだ結果として期待できる変化を具体的にお伝えします。

まず訪問者側の変化です。パンくずがあると、今どの階層にいるか、どうやって上位ページに戻ればいいかが一目で分かります。とくに検索から特定のページにいきなり来た人にとって、パンくずは「このサイトには他にどんなカテゴリーがあるか」を知る入り口になります。結果として、1ページ見て離脱するのではなく、関連ページへ回遊してもらいやすくなります。

効果が特に大きいのは、ページ数が多く階層が深いサイトです。次のようなサイトでは、パンくずを整えることで訪問者が現在地とサイト全体の構造を把握しやすくなります。

• 商品カテゴリーが何段にも分かれるECサイト
• 職種・地域で細かく分かれる求人サイト

逆に、トップと数ページしかない2階層程度のシンプルなサイトでは、パンくずはやや冗長になりがちで、グローバルナビゲーションだけで十分カバーできることも多いです。

成果が出るサイトの共通点。うまくいっているサイトは、パンくずの階層と実際のサイト構造・URL構造がきれいに一致しています。表示だけ整えて中身がバラバラだと効果は出にくいので、設置を機にカテゴリー分けそのものを見直すと、回り道のようで一番効きます。

表示速度が落ちるとせっかくの回遊も止まってしまいます。パンくず設置とあわせてページの体感速度も気になる方は、表示速度は自分で測って直せる｜Core Web Vitals改善の3手も参考にしてください。

パンくずリストでよくある失敗と回避法

ここでは、現場で実際にやりがちな失敗を具体的に取り上げます。どれも一度は見かけるものばかりなので、設置後のチェックリストとして使ってください。

失敗1。JSON-LDが全角記号や末尾カンマでエラーになる

一番多いのが、構造化データの記述ミスです。JSON-LDは記号ひとつの間違いでも動かなくなるほど厳密で、よくあるのが全角記号の混入と末尾カンマの付けすぎです。

読み取れなくなる原因は、たとえば次のようなものです。

• コードをコピペした際に、ダブルクォート（”）が全角の「”」に化けている
• 日本語入力のまま、全角スペースが紛れ込んでいる
• リストの最後の項目のうしろに、余計なカンマが残っている

これらがあると、見た目は正常でも検索結果にパンくずは出ません。防ぐには、公開前に必ずリッチリザルトテストにかけ、エラーが1件でも出たら該当箇所の記号を半角に直すことです。

失敗2。スマホで長いページ名がはみ出して横スクロールになる

2つ目は、パソコンでは問題ないのにスマホで崩れるパターンです。原因は、長いページタイトルが1行に収まらず、折り返しも許可されていないために画面からはみ出すことです。

これが起きると、パンくずの右端が切れたり、横スクロールが発生したりして見づらくなります。回避のポイントは、CSSでflex-wrap: wrap;とwhite-space: normal;を指定して、狭い画面では折り返しを許可することです。ステップ2のCSSにはこれを最初から入れてあります。

それでも長すぎる場合は、次のような調整を足すと収まります。

• 末尾を3点リーダー（…）で省略する
• スマホでは文字サイズを少し下げる

設置後は必ずスマホの実機やブラウザの検証機能で、複数の画面幅で表示を確認しましょう。

失敗3。カテゴリー名がページごとにバラバラで重複が生まれる

3つ目は、パンくず内のリンク設計が甘くて、同じ内容が複数のURLで表示される重複コンテンツを招くケースです。これは表示上は気づきにくく、あとからじわじわ効いてきます。

たとえば、あるページでは「サービス」、別のページでは「サービス一覧」とカテゴリー名がゆれていたり、パンくずのリンク先URLが末尾スラッシュあり・なしで混在していたりすると、Googleが別ページと誤解することがあります。回避には、カテゴリー名とラベルをサイト全体で統一し、リンク先URLの表記も揃えることです。あわせて、正規のURLを示すcanonicalタグを適切に設定しておくと、重複のリスクをさらに下げられます。

失敗4。現在地までリンクにしてしまう

4つ目は細かいですが見落としがちな点で、今いるページ自身をリンクにしてしまう失敗です。パンくずの一番右の項目は「現在地」なので、リンクにする必要はありません。

現在地にリンクがあると、押しても同じページに戻るだけで訪問者を混乱させますし、構造化データ側でも、最後の項目にはitemを付けないのがGoogle検索セントラルのパンくずリスト仕様で推奨されています。見た目のHTMLとJSON-LDの両方で、最後の項目だけリンク・URLを外す。これを設置後のチェック項目に必ず入れておきましょう。

設置してから気づく落とし穴と、現場での割り切り方

ここまで手順をお伝えしてきましたが、実際に運用してみると「教科書どおりにいかない」場面が出てきます。相談を受けるなかで見えてきた、現場ならではの妥協点を率直にお話しします。

まず、そもそも全ページに入れる必要があるのか、という問いです。パンくずは階層が深いサイトほど価値が高まりますが、ページ数が少ないサイトでは手間のわりに効果が薄いことがあります。「SEOに良いと聞いたから」という理由だけで、2階層のサイトに無理やり入れるのは、優先順位としては後回しで構いません。それより先に整えるべきことがあるケースは多いです。

次に、プラグインで入れるか手書きするかの割り切りです。WordPressでプラグインを使えば数分で設置できますが、プラグインが増えるほどサイトは重くなり、更新時の不具合リスクも上がります。すでにSEO系のプラグインを入れているなら、その機能にパンくずが含まれていることが多いので、新しく専用プラグインを足す前に、今あるもので出せないか確認するのが現実的です。

テーマファイルに直接コードを書き込む方法は自由度が高い反面、テーマを更新するとその変更が消えてしまうことがあります。直接編集するなら、子テーマを使うなど、更新で消えない形にしておかないと、ある日突然パンくずが消えて慌てることになります。

もう一つ、外注するときの見極めです。制作会社に頼む場合、「パンくずを付けてください」とだけ伝えると、見た目のHTMLだけ入って構造化データが抜けている、という納品を受けることがあります。発注時には「見た目の表示と、JSON-LDの構造化データの両方を入れて、リッチリザルトテストでエラーがないことまで確認してほしい」と、成果物の基準まで具体的に伝えるのが、やり直しを防ぐコツです。修正依頼の伝え方そのものに不安がある方は、制作会社への修正依頼でやり直しを防ぐ伝え方とコツもあわせてどうぞ。

コード自体はAIに書いてもらうこともできます。Claudeのデスクトップアプリやブラウザ版などに「このサイト構造でパンくずのHTMLとJSON-LDを作って」と自社の階層を渡せば、たたき台はすぐ出てきます。

ただし、出てきたコードのURLやカテゴリー名が自社の実態と合っているか、最後は人が必ず確認してください。AIは形は作れますが、あなたのサイトの正しい階層を知っているのはあなただけだからです。

よくある質問

自社サイトに合った形で整えたい方へ

ここまで読んで、コードは分かったけれど自社のサイト構造に落とし込む自信がない、崩れの確認まで手が回らない、と感じた方もいるかもしれません。コレットラボでは、AIを活用したサイト制作・運用の伴走支援を行っています。「自分たちで作りたい」「まるごと任せたい」のどちらにも合わせて設計できます。まずは現状を整理するだけでも構いません。AI業務システム化の詳細はこちらから、気軽にご相談ください。