パンくずリストを構造化データにして検索結果の視認性を上げる方法

1. 構造化データとは
2. パンくずリストを構造化データにするメリット
3. 構造化データでのパンくずリストの設置方法
- 3.1. JSON-LDでの記述方法
- 3.2. microdataでの記述方法

構造化データとは

構造化データとは、ページ内のコンテンツを説明するための、標準化されたデータ形式のことです。

例えば、そのページの作成者やアップロードの日付、レシピに関するページであればカロリーや調理時間など、様々なものを設定することができます。

GoogleはWEB上にアップロードされたページを正しく分類するために、この構造化データを使います。

単なる文字列ではなくクローラに対して意味を持ったデータであるので、構造化データを設定することで、Googleがそのページをより正確に理解できるようになります。

パンくずリストを構造化データにするメリット

構造化データ自体は、ランキング向上につながる要素ではありません。ただ、構造化データがあることで、関連性がある場合に表示されやすくなったり、様々な検索機能の対象になったりします。

詳しくは、検索ギャラリーとリッチリザルトをご参照ください。

パンくずリストもリッチリザルトの対象になります。

通常、パンくずリストを構造化データとして設定していない状態では、Googleは以下のように、そのページのURLを基にリストを生成します。

しかし、構造化データとして設定することによって、以下のようなリッチリザルト表示の対象となり、そのページが何の説明をしているものなのかといったページの視認性を上げることができます。

これは、結果的にクリック率の向上などに貢献します。

構造化データでのパンくずリストの設置方法

構造化データでのパンくずの設置はschema.orgによる定義が主流となっています。data-vocabulary.orgによるマークアップもなされていましたが、

2021 年 1 月 29 日以降、data-vocabulary.org マークアップは Google のリッチリザルト機能でサポートされなくなるという公式の発表がありました。

またその記述方法としてはJSON-LD , microdata , RDFaの3種類があります。

今回はこのうちJSON-LD , microdataの2つについての記述方法を記載しておきます。

どちらで書いてもデータとしては同じですが、GoogleはJSON-LDでの記述を推奨していますし、data-vocabulary.orgからschema.orgへの移行時も変更点が少ないのでおすすめです。

JSON-LDでの記述方法

JSON-LDはページのヘッダー内にjsonというデータフォーマットで記述します。

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "<パンくず1階層目の名称>",
        "item": "<パンくず1階層目のサイトURL>"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "<パンくず2階層目の名称>",
        "item": "<パンくず2階層目のサイトURL>"
      }]
    }
</script>

パンくずのリッチリザルトはあくまでページの視認性を上げるためのものなので、必ずしもそのページのURLに従った構造にする必要はなく、そのページが何を表しているのかをカテゴリ分けして、階層的に表示させることが効果的です。

ちなみに、サイトのトップページのURLは自動生成されるので、リストに記載する必要はありません。

また、jsonはデータを送信するための言語なので、検索結果には反映されますが、ページ内にはパン屑の表示がされません。そのため、ページ内にもパン屑を表示させたい場合は、以下のようにHTMLとまとめて書くようにします。

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "<パンくず1階層目の名称>",
        "item": "<パンくず1階層目のサイトURL>"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "<パンくず2階層目の名称>",
        "item": "<パンくず2階層目のサイトURL>"
      }]
    }
</script>

<div class="pankuzu">
    <a  href="<#サイトURL>">
      <span>TOP</span>
    </a>
    <a href="<パンくず1階層目のサイトURL>">
      <span><パンくず1階層目の名称></span>
    </a>
    <a href="<パンくず2階層目のサイトURL>">
      <span><パンくず2階層目の名称></span>
    </a>
</div>

パンくずはページ内でも訪問者がサイトの階層を理解し、効率的に移動するのに役立つので、表示させるのがおすすめです。

microdataでの記述方法

microdataは通常のページ作成と同様、HTMLを用いて記述します。

<div class="pankuzu">
  <div itemscope="" itemtype="http://schema.org/BreadcrumbList">
      <a  href="<#サイトURL>">
      <span>TOP</span>
      </a>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="1" />
      <a href="<パンくず1階層目のサイトURL>"  itemprop="item">
      <span itemprop="name"><パンくず1階層目の名称></span>
      </a>
    </div>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="2" />
      <a href="<パンくず2階層目のサイトURL>"  itemprop="item">
      <span itemprop="name"><パンくず2階層目の名称></span>
      </a>
    </div>
</div>
</div>

ちなみにこのようにしてパン屑を設置した後は、リッチリザルトテストツールで正しく認識されているか確認してみましょう。

リッチリザルトの対象となっていれば、以下のような表示が出るはずです。