パンくずリストの設置方法

参照しているページが、どの階層に位置するのかを示すことができます。

本ページでは、パンくずリストの設置方法や確認方法について説明します。

パンくずリストとは

パンくずリストは、本サイトでも設置していて、以下のように左上に表示されている部分です。

パンくずリストは、ページがどの階層に位置しているかを示しており、一つ上の階層などをクリックすることで、上位の階層に行きやすくしています。

検索サイトから訪れた人は、必ずしもトップページに訪れるとは限らないため、他のページに行きやすい配慮をすることができます。

また、検索エンジンでパンくずリストを検知した場合、検索結果で以下のようにページタイトルの上に、階層構造が表示されたりします。

上記では、ドメイン名で表示されたトップページの下にSEO対策の階層があって、その階層の中にあるページというのがわかります。

簡単なパンくずリストの設置方法

簡単なパンくずリストの設置方法は、HTMLのbody内に以下のように記述します。

【簡単なパンくずリストの書き方】

<ol class="breadcrumb">
<li><a href="../index.html">ホーム</a> ></li>
<li><a href="index.html">テント</a> ></li>
<li>A社製テント</li>
</ol>

CSSは、以下です。

【パンくずリストで使うCSS】

.breadcrumb li {
  list-style-type: none;
  display: inline;
}

上記は、以下のように表示されます。

これで、検索エンジンがパンくずリストと認識してくれれば、検索結果でもパンくずリストが表示されます。

microdataによる設置方法

先の記述方法では、明確にパンくずリストを示せていないため、検索エンジンがパンくずリストと認識してくれない可能性もあります。

明確にパンくずリストを示すためには、HTMLのbody内にmicrodataを利用して記述します。

【microdataを利用したパンくずリストの書き方】

<ol class="breadcrumb" itemscope
 itemtype="http://schema.org/BreadcrumbList">
 
  <li itemprop="itemListElement" itemscope
   itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="../index.html">
      <span itemprop="name">ホーム</span></a>
    <meta itemprop="position" content="1" />></li>

  <li itemprop="itemListElement" itemscope
   itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="index.html">
      <span itemprop="name">テント</span></a>
    <meta itemprop="position" content="2" />></li>

  <li itemprop="itemListElement" itemscope
   itemtype="http://schema.org/ListItem">
    <span itemprop="name">A社製テント</span>
    <meta itemprop="position" content="3" /></li>

</ol>

長いので、コピーされることをお薦めします。また、以下は修正が必要です。

赤字の../index.htmlと「ホーム」: トップページのURLとタイトル(またはトップなど)です。
青字のindex.htmlと「テント」: このページが属する階層トップページのURLと、ページタイトルです。
緑字のindex.htmlと「A社製テント」: このページのタイトルです。

先に示したCSSを使うと、同じように表示されます。

content="1"などは、階層を示します。階層が多い場合は、コピーして追加します。その際、content="2"とcontent="3"では記述内容が異なるため、content="2"の内容(li要素全体)をコピーしてcontent="3"とします。content="3"はcontent="4"に変更する必要があります。

JSON-LDによる設置方法

ブラウザ上に表示させずに、検索エンジンにパンくずリストを示すこともできます。

この場合、以下のようにHTMLのhead内に、JSON-LDを利用して記述します。

【JSON-LDを利用したパンくずリストの書き方】

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "ホーム",
    "item": "https://example.com"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "テント",
    "item": "https://example.com/tent"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "A社製テント"
  }]
}
</script>

nameやitemの部分は、microdataの時と同じで、自身のサイトに合わせて書き換えが必要です。

なお、microdataもJSON-LDも、検索エンジンにデータを正しく伝えるための構造化データの書き方を取り決めたものです。

リッチリザルトテスト

作成したパンくずリストに問題ないかは、リッチリザルトテストで確認できます。

サーバーにアップロードした後、リッチリザルトテストでURLを張り付けて「URLをテスト」をクリックします。問題なければ、「検出されたアイテム数」にパンくずリストと表示されて、緑のマークが表示されます。

また、「コード」を選択後、パンくずリストの部分だけコピーして貼り付けます。その後、「コードをテスト」をクリックしても確認できます。つまり、サーバーにアップロードしなくても、確認できるということです。

最初に示した「簡単なパンくずリストの設置方法」では、パンくずリストが検出されないと思います。また、赤のマークが表示された場合は、パンくずリストが検出されていますが、問題があります。マークをクリックすると、どこに問題があるか確認できます。

パンくずリストとは

簡単なパンくずリストの設置方法

microdataによる設置方法

JSON-LDによる設置方法

リッチリザルト テスト

リッチリザルトテスト