SSB-C - パンくずリストの統一規格

定義

SSB-C標準は、パンくずリストのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています。

Schema.orgのマイクロマークアップ - 検索結果にパンくずリストを正しく表示するために、itemscope、itemtype、およびitemprop属性を使用します （リッチスニペット）での表示。

HTML構造 - 要素の論理的な順序：<nav> → <ol> → <li> → <a>（現在のページを表す最後の要素を除く）。

最後の要素 - 現在のページを示すリスト要素 <li>。リンクにしてはならず、aria-current="page" の使用が推奨されます。

テキストのスタイル設定 - リスト要素には、テキストの改行を防ぐ基本スタイル（white-space: nowrap）を適用し、リンクにも継承されるようにする必要があります。

水平スクロール - モバイルデバイスでは、コンテンツがはみ出した際にコンテナ <nav> が水平スクロール可能である必要があります（overflow-x: auto）。

構造とセマンティクス

パンくずリストには、セマンティックに正しいHTMLタグを使用する必要があります：

• ナビゲーションブロックを表すには <nav>；
• 順序付きリストには <ol>；
• パンくずリストの各要素には <li>。

HTMLの例（BEMに基づくクラス名付き）：

<nav class="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a href="/" class="breadcrumbs__link">ホーム</a>
    </li>
    <li class="breadcrumbs__item">
      <a href="/category" class="breadcrumbs__link">カテゴリ</a>
    </li>
    <li class="breadcrumbs__item breadcrumbs__item--current">
      現在のページ名
    </li>
  </ol>
</nav>

アクセシビリティ

リストの最後の要素は現在のページを示します：

• これはリンクであってはなりません;
• アクセシビリティを向上させるために、aria-current="page"を追加する必要があります。

HTMLの例：

<li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">
  現在のページ名
</li>

インタラクティブ性と視覚的な反応

テキストとリンクのスタイル設定：

• <li> 要素には、リンク（<a>）に継承される基本スタイルが設定されています;
• テキストの改行を防ぐために、white-space: nowrap が使用されています。

CSSの例：

.breadcrumbs__item {
  font-size: 14px;
  color: #6c757d;
  white-space: nowrap;
}

.breadcrumbs__link {
  color: #007bff;
  text-decoration: none;
}

.breadcrumbs__item--current {
  font-weight: bold;
  color: #343a40;
}

モバイルデバイス向けの水平スクロール:

.breadcrumbs {
  overflow-x: auto;
  overflow-y: hidden;
}

.breadcrumbs__list {
  display: flex;
}

Schema.orgのマイクロマークアップ：

<nav class="breadcrumbs">
  <ol class="breadcrumbs__list" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/">
        <span itemprop="name">ホーム</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/category">
        <span itemprop="name">カテゴリ</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li class="breadcrumbs__item breadcrumbs__item--current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
      <span itemprop="name">現在のページ名</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>