パンくずリストを構造化データにする方法とSEO効果

SEO対策 > SEO内部対策 > クローラー対策 > パンくずリストを構造化データにする方法とSEO効果

2016年05月18日 2020年12月09日

パンくずリストを構造化データにする方法とSEO効果

ほとんどのサイトで目にするようになった、「パンくずリスト」ですがSEO対策などを意識して設置していますか？

パンくずリストはユーザビリティはもちろん、内部リンクにもなり、さらに構造化データを用いることによってクローラーにページの内容をより詳しく伝えることも可能です。
パンくずリストに構造化データを設置するためのマークアップは簡単なので、テストツールで正しく設置されているか確認して対策しておきましょう。

パンくずリストを構造化データにするメリットについては下記の記事も参考にしてみてください。

seopack.jp/internal-seo

構造化データで記述する目的とメリットについて

https://seopack.jp/internal-seo/crawler-measures/structured-data-benefits.php

Googleは、schema.org（スキーマ）のサポートを去年から開始しています。そして、GoogleはData-Vocabulary.orgの開発を終了していることから、すでに構造化データをschema.orgで記述しているサイトも多いのではないでしょうか？schema.orgを導入するメリットとしては、Google、Yahoo、Bingの3社が共同で取り組んでいることが挙げられると思います。それによって、それぞれの検索エンジンにサポートされ、検索結果に表示されるスニペットを装飾することができます。（リッチスニペット）ということで、これから構造化データを導入する場...

では、今回はパンくずリストを構造化データでマークアップする方法や、そのSEO効果などについてお話したいと思います。

SEO Packで揃う「SEO対策」について

1 パンくずリストを設置する理由
- 1.1 ユーザビリティ
- 1.2 クローラビリティを考慮した内部リンク
2 パンくずリストを構造化データで設置する
3 パンくずリストを構造化データにする方法まとめ

PR【申込増加中】SEO競合比較は無料診断を活用

パンくずリストを設置する理由

まず、パンくずリストを設置する目的とその理由についてご説明します。
それは大きく分けて、ユーザビリティとクローラビリティの二つから考えられます。

では、ひとつずつご説明します。

ユーザビリティ

パンくずリストを設置する理由として、はじめに考えられるのがユーザビリティではないでしょうか。

ユーザーがサイトに流入してくるページ（ランディングページ）はトップページだけではありません。コンテンツの多いサイトでは下層ページからの流入の方が多くなるため、現在どのページを見ているのか？ということをユーザーに伝えて、サイト内をわかりやすく巡回してもらうための指標となります。

また、カテゴリページやトップページなどの親ページへの導線にもなり、ユーザーがページを全て読む前に、カテゴリ名だけで簡単な内容を把握できることから、大切なのはユーザーのためになるようにパンくずテキストを設定するということです。

SEOだけを考えてキーワードを詰め込んだパンくずではダメということですね。

クローラビリティを考慮した内部リンク

次に、パンくずリストは内部リンクになるため、クローラー対策にも有効です。
クローラーは、このパンくずリストのリンクを辿ってページを巡回するため、カテゴリ名もわかれば内容も伝わりやすくなります。

ユーザビリティを考慮した上で、簡潔にキーワードを入れて対策しましょう。

PR外部・内部・コンテンツ状況を競合比較で弱点がわかるSEO無料診断

パンくずリストを構造化データで設置する

パンくずリストをより効果的にクローラーへ伝えるには、構造化データで設置することをおすすめします。このマークアップによって、そのページがどのようなカテゴリのコンテンツなのかが把握されやすくなります。

構造化データとは、検索エンジンが内容を把握しやすいように、テキストに対してタグ付け（マークアップ）を行うことで、検索結果にもリッチスニペットとして表示されるというメリットがあります。

その構造化データでパンくずを設置するには、現状のパンくずリストに追加でschema.orgに定義されているボキャブラリーをマークアップする必要がある訳ですが、その記述方法を以下のシンタックスと呼ばれる3つのマークアップ形式から選びます。

どの方法でも認識される構造化データに変わりはありませんので、どれでも構いません。
Googleは最近までmicrodataを推奨していましたが、JSON-LDもソースコードをそのままで構造化データにすることができるため、今後推奨されるシンタックスです。

microdata
RDFa（RDFa Lite）※ここではLiteを説明します。
JSON-LD

構造化データ：microdataの書き方

<div class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/internal-seo/"><span itemprop="name">SEO内部対策</span></a><meta itemprop="position" content="1" /></span>
>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/internal-seo/crawler-measures/"><span itemprop="name">クローラー対策</span></a><meta itemprop="position" content="2"></span>
>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">パンくずリストを構造化データで設定する方法とSEO効果</span><meta itemprop="position" content="3"></span>
</div>

1行目のdivにある「itemscope」は、microdataを宣言してそのdivをひとかたまりにするという意味で、「itemtype」によってどういった構造データを表示するのかを伝えます。
ここには該当する内容をschema.orgから探してそのurlを記述します。

今回はパンくずに絞った設定方法なので、例のようにパンくずを意味する「http://schema.org/BreadcrumbList」を設置してください。

次にリストを意味するitemtype=”http://schema.org/ListItem”を記述し、そのページに記載されているPropertyの中から適切なものを記述します。この場合は、itemprop=”itemListElement”を記述します。

あとは、入れ子になっているaタグとそのタイトルに対してそれぞれ、itemprop=”item”とitemprop=”name”を記述します。

ここでのプロパティの選び方はitemtypeで指定したページから選択します。

最後にmeta itemprop=”position” content=”1″で、パンくずの順番を記述します。
また、http://schema.org/BreadcrumbListにも設置サンプルが載っているので、参考にしながら設置してください。

構造化データ：RDFa Liteの書き方

<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="/internal-seo/" class="home"><span property="name">SEO内部対策</span></a><meta property="position" content="1"></span>
>
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="クローラー対策のカテゴリーアーカイブへ移動" href="/internal-seo/crawler-measures/" class="taxonomy category"><span property="name">クローラー対策</span></a><meta property="position" content="2"></span>
>
<span property="itemListElement" typeof="ListItem"><span property="name">パンくずリストを構造化データで設定する方法とSEO効果</span><meta property="position" content="3"></span>
</div>

こちらは、microdataと書き方が似ているため説明は省略します。
詳細については下記ページを参考にしてみてください。
→RDFa Lite 1.1 和訳

構造化データ：JSON-LDの書き方

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "/internal-seo/",
        "name": "SEO内部対策トップ"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "/internal-seo/crawler-measures/",
        "name": "クローラー対策"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item":
      {
        "@id": "/internal-seo/crawler-measures/breadcrumbs-structured-data.php",
        "name": "パンくずリストを構造化データで設定する方法とSEO効果"
      }
    }
  ]
}
</script>

このJSON-LDは、先ほど説明したmicrodataとRDFa Liteのように既存のタグに追加することなく、ヘッダーなどページのどこかに記述してあれば構造化データとして認識されます。

ぱっと見、scriptと書いてあるせいか難しそうに見えますが、パンくずだけの指定ではかなりシンプルで簡単なため今後注目のシンタックスです。

構造化データをプラグインで簡単に設置する

WordPressをお使いの場合は、Breadcrumb NavXTというプラグインを利用すると簡単にRDFaを単純化したRDFa Liteの形式でパンくずリストを構造化データで設置することができます。

このプラグインはパンくずの出力に対してカスタマイズが可能です。詳しいRDFa Liteについてはこちらを参考にしてみてください。
→RDFa Lite

こちらを利用するには、プラグインの追加ページで「Breadcrumb NavXT」と検索してインストールしてください。

そして、パンくずリストを設置したい場所に以下のタグを記述します。
※1行目のvocab=”http://～は、プラグインでは吐き出されません。このように手動でタグを記述する必要があります。

<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

このプラグインの使い方については下記の記事を参考にしてください。
→WordPressでパンくずリストを簡単に設置する方法

また、設置したパンくずリストの構造化データが正しいかどうかテストツールも用意されているので、正しく認識されているかどうか確認しましょう。
→構造化データテストツール

下記が、構造化データを導入したパンくずリストです。

<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="/internal-seo/" class="home"><span property="name">SEO内部対策</span></a><meta property="position" content="1"></span> &gt; 
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="クローラー対策のカテゴリーアーカイブへ移動" href="http://seopack.jp/internal-seo/crawler-measures/" class="taxonomy category"><span property="name">クローラー対策</span></a><meta property="position" content="2"></span> &gt; 
<span property="itemListElement" typeof="ListItem"><span property="name">パンくずリストを構造化データで設定する方法と効果</span><meta property="position" content="3"></span>
</div>

そして、クローラーが巡回することによって検索結果にもパンくずリストが表示されます。
パンくずリスト以外にも設定によっては、画像や評価などのリッチスニペットが検索結果に表示され、それによりクリックされる確率が高くなりますね。