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

SEOならSEOパック
ご利用実績8837件 (2017/02/25現在)
2016年05月18日 2016年09月09日

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

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

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

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

構造化データで記述する目的とメリットについて
Googleは、schema.org(スキーマ)のサポートを去年から開始しています。そして、GoogleはData-Vocabulary.orgの開発を終了していることから、すでに構造化データをschema.orgで記述しているサイトも多いのではないでしょうか?schema.orgを導入するメリットとしては...

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

検索1位!のサイト多数!【月額固定】7,980円(税込)の低価格SEO対策

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

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

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

ユーザビリティ

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

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

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

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 property="position" content="2"></span>
>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">パンくずリストを構造化データで設定する方法とSEO効果</span><meta property="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で指定したページから選択します。

schema.orgからのプロパティの選び方

最後に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」と検索してインストールしてください。
別途ダウンロードする場合は下記からインストールします。
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>

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

パンくずリストに関する注意点

少し話しは逸れますが、下層ページのコンテンツは下記のように複数のカテゴリに含まれる場合があります。

  • example.com/category-01/item/content.php
  • example.com/category-02/book/content.php
  • example.com/category-03/pickup/content.php

このような場合で、例えばcontent.phpが全く同じページで複数のurlが吐き出されるようであれば、重複コンテンツとなるので何らかの対策をしなければいけません。

重複コンテンツについてはこちらの記事も参考にしてみてください。
コンテンツを増やす時のキーワード選定について
検索順位に満足していますか?SEO Packなら今すぐSEO対策することができます!

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

パンくずリストの構造化データとは、記述されているテキストが何を意味するのかをタグ付けによる補足によって、クローラーに内容をわかりやすく伝えるものです。
また、WordPressをお使いの場合は、こちらの「WordPressでパンくずリストを簡単に設置する方法」も参考にしてみてください。

パンくずリストは、内部対策と合わせて設定しておきたいところです。
ユーザーにもクローラーにもわかりやすく簡潔に設置しましょう。

SEO内部対策 トップに戻る
SEO内部チェックツール SEO内部チェックツール

SEO対策に
SEO Packをはじめませんか?

検索結果のランキングを決める重要な要素のひとつが「リンク」です。

SEO PackならSEOに重要なリンクをはじめ、SEOに関するノウハウやSEO対策をするための管理ツールが揃います。
また、内部対策の状態も確認することができ、改善方法などもご案内します。
  • 検索順位を上げたい
  • リンク対策をしたい
  • ある程度自分でSEO対策を把握したい
  • 対策中の順位推移を確認したい
  • 変動に強いSEO対策をしたい

上記にひとつでも当てはまる方は、SEO Packの導入をおすすめします。
お試しもご用意しておりますので、詳しくはサービスの内容・特長をご覧下さい。

SEOツールseodoor(せおどあ)に無料版が登場しました