今回は、ウェブサイトやブログなどに設置するパンくずリストについて解説します。「パンくずリストとは何？」というところから具体的な設置方法や、CSSのデザインサンプルまでまとめていきたいと思います。

パンくずリストとは

パンくずリストとは、ユーザーが今WEBサイト上のどこにいるのかを伝える階層順のリストのことです。英語では「breadcrumbs」と言われます。

モスバーガーのパンくずリスト

例えばこれはモスバーガーのパンくずリストです。サイトの階層が分かりやすく示されています。

パンくずリストの意味

上のパンくずリストは「今あなたはメニューカテゴリーのハンバーガーページにいますよ」ということを示しているのですね。

また、上位（親）の階層のテキストはリンクになっています。

クリックでメニューに戻ることができる

例えば「サイドメニューが見たいなぁ…」というときは、サクッと「メニュー」に戻って探すことができるのです。

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

パンくずリストの設置には２つの意味があります。1つはユーザーにとっての意味、2つめはSEO上の意味です。

ユーザーが迷いにくくなる

カテゴリーの構造が明確になるので「今どこにいるのか」がすぐに分かります。さらに前の階層のテキストはリンクになっているため、サイトを巡回しやすくなります。

検索エンジンに表示される

パンくずの構造化データはGoogleのパソコン向け検索結果で表示候補になりますが、表示は保証されません。上の画像は2017年当時の検索画面です。2025年1月以降、モバイル検索結果ではパンくず表示が終了しています。

パソコン向け検索結果に表示される場合は、アクセス前の検索ユーザーへカテゴリー構造を伝えられます。

検索エンジンにも階層を伝える

分かりやすいカテゴリー構造と移動先を示すリンクテキストは、ユーザーや検索エンジンがページの関係を理解する助けになります。キーワードを入れるだけで検索順位が上がるという意味ではありません。

例えば、ウェブサイトを以下のような理想的なカテゴリー構造で設計するとします。

正しいカテゴリー構造

「ハンバーガー」「デザート」「サイドメニュー」と分かれており、その下に個別の記事ページがぶら下がっています。ここにパンくずリストを設置してみましょう。

パンくずリスト

パンくずリストにより「ハンバーガー」のカテゴリーページにすぐ戻ることができます。

アンカーテキストにハンバーガーを含める

この例のリンクテキスト「ハンバーガー」は、移動先のカテゴリーの内容を伝えています。リンク先を具体的に表す名前を使いましょう。

カテゴリーページへ意味の分かるリンクをつなぐと、読者が移動先を判断しやすくなります。
検索エンジンのクロールにも役立ち、サイト構造の理解を助けますが、順位の向上を保証するものではありません。

カテゴリーを最適化することが重要

カテゴリーが分かりづらかったり、分類の基準があいまいだったりすると、せっかくパンくずリストを設置しても効果は期待できません。上記のメリットは、分かりやすいカテゴリー構造になっていることが前提となります。

パンくずリストについてのQ&A（設置場所など）

作成方法を解説する前に、パンくずリストの分かりづらい部分についてまとめておきます。

ページの上部にのせないとダメ？

下部にのせてもGoogleはパンくずリストを認識してくれます。とはいえ、ほとんどのサイトではページの上部に配置されています。ユーザーにとって馴染みがあり、分かりやすい位置は上部と言えるでしょう。

複数のパンくずリストを設置しても良い？

複数の経路があるページでは、複数のパンくずの経路を構造化データとして記述できます。最初の1つが必ず採用されるわけではありません。現在のGoogle公式仕様を確認してください。海外SEO情報ブログの記事は当時の参考資料です。

そのページ自体を含める？

現在のページやドメインの最上位ページは省略できます。この記事の例では現在ページを含めず、上位3階層を示します。Google向けには2個以上のListItemを用意し、name・item・positionを実際の経路と一致させてください。現在ページをリンクとして含める場合はaria-current="page"を付けます。

設置場所は？

bodyタグ内のユーザーにとって分かりやすい位置に設置しましょう。「h1タグの上に設置しなければいけない」というようなルールはないのでご安心ください。

Googleはどうやって認識している？

構造化データを使うと、パンくずの経路を検索エンジンへ明示できます。決められた項目を正しく記述しても、検索結果への表示は保証されません。以下で書き方を解説します。

パンくずリストの作り方（HTML）

ここからは具体的な書き方について解説していきます。

【その前に】WordPressの場合

テーマによっては、はじめからパンくずリストが設置されていたりします。でなくとも、Breadcrumb NavXTというプラグインを使えば、簡単に設置ができます。使い方は下の記事が参考になるはずです。

参考Breadcrumb NavXTの使い方AdminWebさんの記事です。

ぱんくずリストの書き方

【2020年1月追記】Google検索がdata-vocabulary.orgのサポートを終了したため、schema.orgの書き方に変更しました。

今回はMicrodataでHTMLに情報を付け、schema.orgの語彙を使う方法を学びます。Microdataは記述方式、schema.orgは項目の意味を定める語彙です。GoogleはJSON-LDを推奨していますが、Microdataも対応形式です。以下の2つの構文枠は説明用の断片で、URLの説明語は実際のURLに置き換えます。

基本的な書き方

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <!-- 1つめ -->
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="ホームのURL">
        <span itemprop="name">ホーム</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>

  <!-- 2つめ -->
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="カテゴリーのURL">
        <span itemprop="name">カテゴリー名</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>

  <!-- 3つめ -->
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="子カテゴリーのURL">
        <span itemprop="name">子カテゴリー名</span>
    </a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

<li>〜</li>の1つのカタマリが1つのパンくず（階層）を表しています。そのため、カテゴリーの階層数によって<li>〜</li>の数は変わります。
少し長くて分かりづらいかと思うので、1つのパンくずを詳しく見てみたいと思います。

1つのパンくずを詳しく見る

<li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
  <a itemprop="item" href="カテゴリーのURL">
      <span itemprop="name">カテゴリー名</span>
  </a>
  <meta itemprop="position" content="2" />
</li>

青色の部分がポイントです。

itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"
ol全体がBreadcrumbListで、各liがその中の1項目（ListItem）を表します。

itemprop="item"
パンくずのリンク（aタグ）に指定します。

itemprop="name"
パンくずのタイトル（ホームやカテゴリー名）を含むタグに指定します。

<meta itemprop="position" content="数字" />
パンくずの順番（階層）を表します。いちばん上位のパンくずがcontent="1"で、それ以降は2、3、4...と増やしていきます。

書き方例

実際の書き方の1例を紹介します。例えば、この記事のパンくずリストは、以下のようになります。

HTML
<nav aria-label="パンくずリスト">
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://saruwakakun.com">
        <span itemprop="name">ホーム</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>

  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://saruwakakun.com/html-css">
        <span itemprop="name">HTML &amp; CSS</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>

  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://saruwakakun.com/html-css/basic">
        <span itemprop="name">入門講座</span>
    </a>
    <meta itemprop="position" content="3" />
  </li>
</ol>


</nav>

正しく機能するかテストしよう

Googleのリッチリザルトテストで、パンくずの構造化データを確認できます。schema.org全般の検証にはSchema Markup Validatorも使えます。以下の3画像は旧ツールの画面です。画像にあるdata-vocabulary.orgのコードは現在のGoogle検索には使えません。

リッチリザルトテスト

テスト手順は以下のようになります。

コードスニペットをクリック

現在のリッチリザルトテストでも、公開ページのURLかコードを入力して検査できます。下の画像の［コードスニペット］は旧画面の名称です。

コードを貼り付けて実行

現在のテスト画面のコード入力欄へ、上のschema.orgを使うHTMLを貼り付けてテストを実行します。旧画像内のdata-vocabulary.orgのコードはコピーしないでください。

エラー無しと出れば成功

現在の結果画面ではBreadcrumbListのitemListElementと、各項目のname・item・positionを確認します。旧画面のurl・titleや「階層数だけ箱が出る」という表示を基準にしないでください。エラーがなくても検索結果への表示は保証されません。

パンくずリストのCSSデザイン例12

ここからはパンくずリストのCSSデザイン例を紹介します。例として使用するHTMLコードは以下になります。CSSで指定するセレクタ（class名など）は、必要に応じて変更して頂ければと思います。 classとは セレクタとは コピー例はnavで囲み、aria-labelで用途を示します。区切りや家のアイコンは装飾です。疑似要素の読み上げは環境によって異なるため、実際に読み上げを確認し、重複する場合はaria-hidden="true"の装飾要素を用意するなどして調整してください。

HTML
<nav aria-label="パンくずリスト">
<ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://saruwakakun.com/">
        <span itemprop="name">ホーム</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>

  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://saruwakakun.com/html-css">
        <span itemprop="name">カテゴリー1</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>

  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://saruwakakun.com/html-css/basic">
        <span itemprop="name">カテゴリー2</span>
    </a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

</nav>

それでは早速紹介していきます。

ベーシックなデザイン

デザイン1

CSSを表示
CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li::after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #52b5ee;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

まずはシンプルなデザインから。>は疑似要素を使って表示しています（一番最後のパンくずに対しては、非表示にするようにしています）。文字色は（color:~の部分）はサイトの雰囲気に合わせて変えて頂ければと思います。
また、フォントは太字にしていますが、font-weight: normalとすれば通常の太さになります。

家のアイコンを表示

家のアイコン

CSSを表示
CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li::after {
  /* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: gray;
}

.breadcrumb li:first-child a::before {
  /*家アイコン*/
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  content: '\f015';
  font-size: 1.1em;
  color: #2e7fea;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

Font Awesome 7 FreeのSolidをWeb Fonts方式で読み込むと、ホームの前に家アイコンを表示できます。CSSのfont-familyだけでなくfont-weight: 900とfont-style: normalも必要です。導入方法は下の記事を参照してください。

あわせて読みたい【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

以下のアイコン使用7例はfont-family: "Font Awesome 7 Free";とSolid（900）を前提にしています。旧結果画像と現在のアイコンの字形には違いがあります。

> の代わりに

daga-7.png

CSSを表示
CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li::after {/* ▶を表示*/
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  content: '\f0da';
  padding: 0 0.2em;
  color: silver;
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #888;
}

.breadcrumb li:first-child a::before {
  /*家アイコン*/
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  content: '\f015';
  font-size: 1.1em;
  color: #f3948f;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

Font Awesome 7 Freeのcaret-right「」で区切りを表示し、家アイコンの色も変えています。
font-family: "Font Awesome 7 Free";に加え、Web FontsとSolid（900）の読み込みが必要です。

パンくずの背景を塗りつぶし

円で囲むデザイン

CSSを表示
CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li::after {
  /* ▶を表示*/
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  content: '\f0da';
  padding: 0 0.3em;
  color: #72a1f7;
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb li a {
  display: inline-block;
  padding: 0.2em 0.8em;
  border-radius: 15px;
  text-decoration: none;
  color: #72a1f7;
  background: #c6e2ff;
  font-size: 0.9em;
}

.breadcrumb li a:hover {
  background: #c9dbfb;
}

それぞれのパンくず部分を薄い水色で塗りつぶし、押せるボタンらしくしています。区切りのcaret-right「」はアイコンです。
font-family: "Font Awesome 7 Free";に加え、Web FontsとSolid（900）が必要です。

FontAwesomeを使わない場合

別のデザインに

CSSを表示
CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li::after {
  /* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #72a1f7;
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb li a {
  display: inline-block;
  padding: 0.2em .8em;
  border-radius: 15px;
  text-decoration: none;
  color: #72a1f7;
  background: #c6e2ff;
  font-size: 0.9em;
}

.breadcrumb li a:hover {
  background: #c9dbfb;
}

さきほどとほぼ同じですが、アイコンフォント「」の代わりに「>」を使っています。

フローなデザイン

フローチャート風

CSSを表示
CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  position: relative;
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  margin-right: 0.8em;
}
.breadcrumb li::after {/*三角の部分*/
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  border-style: solid;
  border-color: transparent;
  border-left-color: #aedfc6;/*背景色*/
  border-width: 14px 12px;
  width: 0;
  height: 0;
}

.breadcrumb li a {
  display: inline-block;
  padding: 0 3px 0 7px;
  height: 28px;
  line-height: 28px;
  text-decoration: none;
  color: #747772;
  background: #aedfc6;/*背景色*/
  font-size: 13px;
}

.breadcrumb li a:hover {
	color: #FFF;
}

右角を尖らせて、フローチャート風にしてみました。もっと派手にすることも考えたのですが、あまりに目をひくパンくずリストも目障りかなと考えたので、このくらいでおさえました。

吹き出し風

吹き出し風デザイン

CSSを表示
CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  position: relative;
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  margin-right: 0.3em;
}
.breadcrumb li::after {
  content: "";
  position: absolute;
  top: 7px;
  right: -19px;
  border-style: solid;
  border-color: transparent;
  border-left-color: #feebcc;
  border-width: 7px 12px;
  width: 0;
  height: 0;
}

.breadcrumb li a {
  display: inline-block;
  padding: 0 7px;
  height: 28px;
  line-height: 28px;
  text-decoration: none;
  color: #9b9b9b;
  background: #feebcc;
  font-size: 13px;
  border-radius: 20px;
  transition: 0.3s;
}

.breadcrumb li a:hover {
  transform: translateY(-3px);
}

吹き出しが並んでいくようなユニークなデザインにしてみました。

吹き出し風その2

吹き出しその2

CSSを表示
CSS
.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  position: relative;
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  margin-right: 0.2em;
}

.breadcrumb li::after {
  content: "";
  position: absolute;
  top: 7px;
  right: -19px;
  border-style: solid;
  border-color: transparent;
  border-left-color: #e2e2e2;
  border-width: 7px 12px;
  width: 0;
  height: 0;
}

.breadcrumb li:last-child::after {
  content: none;
}

.breadcrumb li a {
  display: inline-block;
  padding: 0 0.3em;
  height: 28px;
  line-height: 28px;
  text-decoration: none;
  color: #9b9b9b;
  background: #e2e2e2;
  font-size: 13px;
  border-radius: 3px;
  transition: 0.3s;
}

.breadcrumb li a:hover {
  transform: translateY(-3px);
}

さきほどのものから背景色を控えめにし、さらに角を少し直角に近づけてみました。このくらい控えめなものがちょうど良いかもしれませんね。

背景をダークカラーで塗りつぶし

ダークテーマのパンくずリスト

CSSを表示
CSS
.breadcrumb {
  margin: 0;
  padding: 1em;
  list-style: none;
  background: #555;
  overflow: hidden;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li::after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #828282;
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #a8a8a8;
}

.breadcrumb li:first-child a::before {
  /*家アイコンに*/
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  content: '\f015';
  font-size: 1.1em;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

背景全体を暗く塗りつぶしています。家アイコンはfont-family: "Font Awesome 7 Free";とWeb Fonts・Solid（900）が前提です。不要なら.breadcrumb li:first-child a::beforeのルールを削除してください。

明るめの配色に

パンくずをオレンジに

CSSを表示
CSS
.breadcrumb {
  margin:0;
  padding: 1em;
  list-style: none;
  background: #fef2d6;
  overflow: hidden;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li::after {
  /* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #8e8270;
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #feaa23;
}

.breadcrumb li:first-child a::before {
  /*家アイコンに*/
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  content: '\f015';
  font-size: 1.1em;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

さきほどのものから配色を明るめに変えてみました。

爽やかな配色に

濃い水色テイスト

CSSを表示
CSS
.breadcrumb {
  margin: 0;
  padding: 1em;
  list-style: none;
  background: #51a8ff;
  overflow: hidden;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li::after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
}

.breadcrumb li:first-child a::before {/*家アイコンに*/
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  content: '\f015';
  font-size: 1.1em;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

配色を水色系統にして爽やかな雰囲気がでるようにしてみました。

やっぱりシンプル

おしゃれなパンくずリストデザイン

CSSを表示
CSS
.breadcrumb {
  margin: 0;
  padding: 1.1em 1em;
  list-style: none;
  background: #e9edf5;
  overflow: hidden;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
}

.breadcrumb li::after {
  /* >を表示*/
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  content: '\f101';
  padding: 0 0.2em;
  color: #8186a0;
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #273376;
}

.breadcrumb li:first-child a::before {/*家アイコンに*/
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  content: '\f015';
  font-size: 1.1em;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

配色を控えめにしたシンプルな例です。家と二重矢印にはfont-family: "Font Awesome 7 Free";とWeb Fonts・Solid（900）が必要です。

デザイン指定がうまくいかないときは…

CSSがうまく反映されないときはこちらの記事を参考にしてみてください。

あわせて読みたいCSSが効かない・反映されないときの対処法まとめ

こちらの記事もどうぞ

あわせて読みたいCSSで中央寄せする9つの方法（縦・横にセンタリング）