パンくずリストの書き方

2022.3.3

パンくずリストの書き方

パンくずリストとは

パンくずリストとはトップページを基準にサイトのどの階層にいるかの現在地を記述したナビゲーションのことです。
「breadcrumb（ブレッドクラム）」や「topic path（トピックパス）」とも呼ばれます。

パンくずリストの書き方

<ul class="breadcrumb__list" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a href="https://○○○○.com/" itemprop="item">
      <span itemprop="name">○○</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a href="https://○○○○.com/○○" itemprop="item">
      <span itemprop="name">○○○○</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>
  <li class="breadcrumb__item">○○○○○○</li>
</ul>