パンくずリストとは？

Webサイトで、ページが「今どこにいるか」を示してくれるナビゲーションをパンくずリストと呼びます。名前の由来は、童話「ヘンゼルとグレーテル」で森に落とした「パンくず」から取られています。ユーザーが迷わず戻れる道しるべという意味で、Webサイトでも同じ役割を果たします。

ホーム > カテゴリ > サブカテゴリ > ページ名

パンくずリストの利点は、ユーザーにとってはサイト内での位置が分かりやすいことと、SEOにとっては、Google検索結果に表示される可能性があがり、クリック率アップにつながることができます。

HTMLでのパンくずリストの実装

パンくずリストは<nav>タグ+<ol>タグで実装します。SEOに対応するために、検索結果にパンくずが出るようにするには、構造化データを追加します。

<nav class="breadcrumb" aria-label="breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumb__list">
    <li
      itemprop="itemListElement"
      itemscope
      itemtype="https://schema.org/ListItem"
      class="breadcrumb__item"
    >
      <a itemprop="item" href="/" class="breadcrumb__link">
        <span itemprop="name">HOME</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li
      itemprop="itemListElement"
      itemscope
      itemtype="https://schema.org/ListItem"
      class="breadcrumb__item"
    >
      <a itemprop="item" href="/components" class="breadcrumb__link">
        <span itemprop="name">Components</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li
      itemprop="itemListElement"
      itemscope
      itemtype="https://schema.org/ListItem"
      class="breadcrumb__item"
    >
      <span itemprop="name">記事タイトル</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

SEOに対応するために追加した構造化データを含めて解説します。

nav

navタグを使用することで、ナビゲーション領域であることを示します。
aria-label="breadcrumb"属性を追加することで、スクリーンリーダ向けの名前を指定しています。

ol

通常、パンくずリストは順序があるのでolタグで実装しています。
itemtypeにhttps://schema.org/BreadcrumbListを指定することで、検索エンジンにパンくずリストであることを伝えることができます。

li

パンくずリストはリストになるのでliタグで実装します。
itemprop="itemListElement"とitemtype="https://schema.org/ListItem"を指定することで、検索エンジンにパンくずリストの項目であることを伝えることができます。

a

<a>タグはパンくずリストのリンクを表します。
itemprop="item"を指定することで、パンくずリストのリンク先であることを伝えることができます。

span

<span>タグはパンくずリストのテキストを表します。
itemprop="name"を指定することで、ユーザーに見せるテキストを伝えることができます。

meta

<meta itemprop="position" content="1">とすることで、パンくずリストの順番を伝えることができます。contentには1,2,3...と連番で指定してください。

パンくずリストの実装デモ

最後にCSSで見た目を整理したデモをお見せします。このサイトのパンくずリストのように、区切りには「＞」の文字をCSSの擬似要素で配置します。

パンくずリストの2個目以上のリストの左側に「＞」が配置するようにするので、.breadcrumb__itemにnth-child(n+2)を適用して擬似要素として「＞」を配置します。

参考サイト

• パンくずリスト（BreadcrumbList）の構造化データ - Google for Developers