パンくずリストのHTMLと構造化データの書き方【自動生成プラグインも紹介】

2023/10/05 著者:牧野健人

パンくずリストのHTMLと構造化データの書き方を、具体的なコードを示しながら解説します。

株式会社リラクス代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

パンくずリストのHTMLの書き方
- アクセシビリティ
パンくずリストの構造化データの書き方
パンくずリストを自動生成するWordPressプラグイン

パンくずリストのHTMLの書き方

パンくずリストのHTMLは、リスト要素（<ol>や<ul>）で書くのが一般的です。また、ナビゲーションとしての役割を考慮すると<nav>も用いて下記のようにするのが望ましいでしょう。

<nav>
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/blog/">ブログ</a></li>
    <li>パンくずリストのHTML（構造化データ対応）の書き方【自動生成プラグインも紹介】</li>
  </ol>
</nav>

最下層（最後の<li>）は現在表示されているページを指すので、リンクを貼る必要はありません。

また、パンくずリストの区切り文字（ > や / など）はHTMLに書くよりも、CSSで擬似要素として表示する方がコードはスッキリすると思います。

それも踏まえて必要なCSSを書くと、クラスを<ol class="breadcrumb"> <li class="breadcrumb__list">とした場合、下記のようになります。

.breadcrumb {
  display: flex; /* リストを横並びに */
  flex-wrap: wrap; /* リストが折り返すように */
  list-style: none; /* リストスタイルを無しに */
}
.breadcrumb__list:not(:last-of-type)::after {
  content: ">"; /* 区切り文字 */
  margin: 0 .6em; /* 区切り文字の左右の余白 */
}

アクセシビリティ

アクセシビリティを考慮するなら、HTMLには下記のようにaria-labelとaria-currentを付与しつつ、区切り文字のCSSはcontentよりもbackground-imageで背景画像として表示するのが望ましい（※）でしょう。

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/blog/">ブログ</a></li>
    <li aria-current="page">パンくずリストのHTML（構造化データ対応）の書き方【自動生成プラグインも紹介】</li>
  </ol>
</nav>

※ 参考：音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて

パンくずリストの構造化データの書き方

SEOの観点では、検索エンジンにパンくずリストを正しく理解してもらうために「構造化データ」という手法を用いることが有効です。

構造化データとは、ページ内の各要素が持つ意味を検索エンジンに正しく伝えるための記述方法です。パンくずリストに対してこれを用いることで、検索結果にパンくずリストを適切に表示させることができ、クリック率によい影響が期待できます。

以下で、パンくずリストをmicrodataという構造化データの記述方式で実装する方法を解説します。

まず、該当要素がパンくずリストであることを明示するために、<ol>にitemscope属性とitemtype属性を追記します。

itemscope: 構造化データによるマークアップであることを伝える属性。
itemtype: その要素が当てはまる種類を伝える属性。ここではパンくずリストという種類であることを伝えたいので、itemtype="http://schema.org/BreadcrumbList"と記載する。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
	[. . .]
</ol>

次に、<li>にもitemscope属性とitemtype属性、そしてitemprop属性を追記します。itemtypeには"http://schema.org/ListItem"を入れます。

itemprop: その要素の性質を伝える属性。ここではリスト項目であることを伝えたいので、itemprop="itemListElement"と記載する。

[. . .]
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> [. . .] </li>
[. . .]

最後に、<li>の中の<a>、<span>、<meta>の記述を行います。新しく出てくる属性は<meta>に入るcontentです。

content: パンくずリストにおける、その要素の順番を伝える属性。例えば最初の要素にはcontent="1"と記載する。

[. . .]
	<a itemprop="item" href="ホームのURL"><span itemprop="name">ホーム</span></a>
	<meta itemprop="position" content="1" />
[. . .]

以上をまとめると、最終的に以下の形になります。

<nav>
  <ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">ホーム</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="/blog/"><span itemprop="name">ブログ</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <span itemprop="name">パンくずリストのHTML（構造化データ対応）の書き方【自動生成プラグインも紹介】</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

これで、構造化データによるパンくずリストの作成は完了です。このような記述をすることで、検索エンジンがパンくずリストを正しく認識し検索結果に表示してくれるようになります。

パンくずリストを自動生成するWordPressプラグイン

パンくずリストはページごとに内容が異なり、そのそれぞれを手作業で書くのはよほどページ数が少ないサイトを除けば現実的ではないでしょう。

そのため、自動生成されるように実装する必要があります。

WordPressには構造化データに対応したパンくずリストを自動で生成する便利なプラグインが存在し、例えば下記の2つはおすすめです。

Yoast SEO: SEO用のプラグインで、パンくずリストの実装機能も備えている
Breadcrumb NavXT: パンくずリスト専用のプラグイン

ただし、Yoast SEOは本コラムのパンくずリストの構造化データの書き方で解説したmicrodata形式でなくJSON-LDの形式で構造化データが出力されます。得られる効果はどちらも同じです。