パンくずリストの構造化マークアップ（JSON-LD,microdata）でSEO効果を高めましょう

皆さんは、サイトにパンくずリストを設置されていますか。パンくずリストは、かの有名な「ヘンゼルとグレーテル」が帰り道で迷わないようにパンをすこしずつちぎって残していったというエピソードに由来するこのパンくずリストは、その名の通りユーザーも検索エンジンも迷子にさせない、それはもう、必須といっていいサイトパーツでは無いでしょうか。今日は、SEOのパフォーマンスを高めるためのパンくずリストの構造化マークアップについて解説します。

パンくずリストの構造化マークアップとは

パンくずリストの構造化マークアップとは、サイトに設置されたパンくずリストの情報に、構造化データを（追加で）マークアップすることを言います。パンくずリストをWebサイトに設置するだけではなく、構造化データの情報をマークアップの記述で追加します。つまり、通常のパンくずリストにコードの追加記述がなされます。

上記画像のように、パンくず構造化マークアップは、検索結果にパンくずリストを表示することができますので、検索結果の露出エリアが増えるSEO効果があります。また、パンくずリストで表現された階層構造を検索エンジンに伝える役割も持ちます。

パンくずリストと構造化マークアップについての詳細な記事は以下を合わせてご確認ください。

⇒【設置推奨】パンくずリストの正しい書き方とSEOの意味
⇒SEO効果アリ！構造化マークアップのツールを用いた書き方を解説！

パンくずリストの構造化マークアップの書き方

では早速、パンくずリストの構造化マークアップの書き方を解説していきます。書き方は以下の手順となります。

1. パンくずリストをolタグで記述
2. JSON-LDかmicrodata形式でマークアップする
3. リッチリザルトテストツールでテストする

それぞれの手順を解説していきます。

パンくずリストをolタグで記述

パンくずリストを<div>タグのみでコーディングしているケースや<p>タグでコーディングしているケースを見かけますが、パンくずリストは<ol>タグで記述しましょう。パンくずリストに示された階層構造の順位を示すにはulタグよりolタグが適切です。

構造化マークアップの形式を選んで記述する

構造化マークアップを書く上で形式がいくつかありますので、ここでは構造化マークアップの種類を紹介します。

JSON-LDでの構造化データマークアップ記述例

以下のパンくずリストを想定とした構造化マークアップをJSON-LD形式で記述例の紹介をします。

このような単一のパンくずリストの場合、JSON-LDを使用した構造化データマークアップは、下記のようになります。

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "トップ",
    "item": "https://www.example.com/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "ランニングシューズ",
    "item": "https://www.example.com/running-shoes/"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "ブランド名",
    "item": "https://www.example.com/running-shoes/●●●（ブランド名）/"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "商品名",
    "item": "https://www.example.com/running-shoes/●●●（ブランド名）/■■■（商品名）/"
  }]
}
</script>

microdataでの構造化データマークアップ記述例

かつてはmicrodata、microformats、RDFaなど、仕様が乱立していましたが紆余曲折ありまして、現在はmicrodata形式か先ほど紹介したJSON-LD形式が主流になりつつあります。
下記はolタグを使用したパンくずリストのコードに構造化マークアップを適用したサンプルコードです。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://www.example.com/"><span itemprop="name">TOP</span></a>
    <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://www.example.com/category/"><span itemprop="name">カテゴリー名</span></a>
    <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://www.example.com/category/detailxxxx"><span itemprop="name">記事ページ</span></a>
    <meta itemprop="position" content="3" />
    </li>
</ol>

一見すると複雑に見えますが、以下でマークアップは構成されています。

1. liタグ内に「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」を
2. aタグ内に「itemprop=”url”」を
3. あとはアンカーテキスト部分をspanで囲んで「itemprop=”title”」とすればOK
4. ただしいずれも当該記事部分（自分がいるページのパンくず）には不要

リッチリザルトテストツールでテストする

パンくずリストの構造化データを設置したら、構造化データに問題がないかどうかを確認します。
Googleの提供している「リッチリザルトテストツール」を使用することで確かめることができます。間違った記述があった場合は、エラーや警告が表示されます。

このツールは、パンくずリスト以外の構造化データも確認することができるので、他の構造化データを設置した際にも活用してみてください。

パンくずリストの構造化マークアップの定義を理解する

より詳細な理解が必要だと感じる方は、構造化マークアップの定義を理解するとよいでしょう。先ほどの記述例から、パターンを理解すれば実装に支障はないと思いますが、定義を理解することで具体的な指示出しや間違った箇所を察知することに役立ちます。

パンくずリストに構造化データを設定するには、少なくとも2つのListItemを設定し、BreadcrumbListを定義する必要があります。

BreadcrumbList

パンくずリスト内のすべての情報をBreadcrumbList内に記述します。

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "トップ",
    "item": "https://www.example.com/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "ランニングシューズ",
    "item": "https://www.example.com/running-shoes/"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "ブランド名",
    "item": "https://www.example.com/running-shoes/●●●（ブランド名）/"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "商品名",
    "item": "https://www.example.com/running-shoes/●●●（ブランド名）/■■■（商品名）/"
  }]
}
</script>

ListItem

各パンくずリスト内のタイトルやURLなどの詳細情報をListItem内に記述します。

"item": "https://www.example.com/"

"item": {
  "@id": "https://www.example.com/",
  "name": "●●●"
}

{
  "@type": "ListItem",
  "position": 2,
  "name": "ランニングシューズ",
  "item": "https://www.example.com/running-shoes/"
}

{
  "@type": "ListItem",
  "position": 2,
  "item": {
    "@id": "https://www.example.com/running-shoes/",
    "name": "ランニングシューズ"
  }
}

Google Search Consoleで構造化データを監視する

Google Search Consoleにサイトを登録していなくてもGoogle検索結果に表示されますが、登録するとGoogleにサイトがどのように見られているかがわかり、問題点があれば改善できるようになります。

構造化データで発生した問題を解決する（トラブルシューティング）

構造化データの実装で、エラーが発生した場合は、以下の項目を確認してください。
●リッチリザルトテストツールで、構造化データにエラーがある場合は、「構造化データエラーの一覧」を確認して、修正をしてください。

●構造化データが検出されない、もしくは構造化データの合計数がSearch Console上から減少している場合。

最後に

パンくずリストの構造化マークアップは、SEOのパフォーマンスを高める役割がありますので、実装をおすすめします。もし、実装に不安がある方や実装の指示が欲しい！という方は、当社の「SEOコンサルティングサービス」をご検討ください。当社ではWebサイトに備わっているべき内部施策から、SEOの集客増支援を展開しております。

2023年 最新版 SEOセルフチェックリスト 無料プレゼント！

年間何百ものWebサイトを確認している当社でも、内部施策SEOが完璧にできているというサイトを見たことがありません。内部施策SEOに漏れがあるということは、自分でできることをやっていないということであり、それだけで機会損失を発生させている可能性があります。本書では、ご自身でセルフチェックと修正ができるよう、Googleが推奨する内部施策SEOのうち、重要なポイントをかいつまんでご紹介しております。

無料で資料をダウンロードする

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。

>最新記事 by digital-marketing (全て見る)

• カルーセル広告とは？Instagram、Facebookカルーセルについても解説 - 2023年3月23日
• Webマーケティングとは？Webマーケティングの注意点など - 2023年3月16日
• CTIシステムとは？主な機能や導入のメリットを解説。デジ研おすすめのCTIシステム5選も - 2023年3月7日