1. ホーム > 
  2. Webサイト集客 > 
  3. SEO（検索エンジン最適化） > 
  4. パンくずのSEO効果と構造化マークアップの方法

パンくずのSEO効果と構造化マークアップの方法

パンくずリストは検索結果に表示される事があり、構造化マークアップで検索結果のクリック率がよくなる可能性も。microdata、JSON-LDでのパンくずの構造化マークアップの方法を解説。

  • 2016/6/12
  • 2013/5/15

ウェブページには、そのページの階層構造を表す「パンくずリスト」が設置されているのが一般的です。多くのウェブサイトで使われていますので、見た事がある人も多いかと思います。

当サイトでもページのヘッダー部分のすぐ下に表示させています。

パンくずリストのサンプル

パンくずリストにはどのような効果があるのでしょうか。

パンくずリストの効果

パンくずリストには以下のような効果があると考えられます。

ユーザーがWebサイトの構造を把握しやすくなる

コンテンツをまじめに作り自然検索からのアクセス数が増えてくると、そのアクセスのほとんどがトップページ以外の下層のページヘのアクセスになります。

下層のページにアクセスした場合、パンくずリストがあると「そのページがどのカテゴリに入っているページなのか」ということもすぐに分かり、Webサイトの構造の理解を手助けしてくれます。

クローラーがWebサイトの構造を把握しやすくなる

Webサイトの構造を理解する手助けになるのは、クローラーに対しても同じです。
検索エンジンもパンくずリストを使って、そのWebサイトの構造を理解しようとしますので、他にどんなページがあるのかを検索エンジンに伝えやすくなるものと考えられます。

検索結果にパンくずリストが表示されユーザーにページの内容を伝えやすくなる

パンくずリストは、検索結果画面のそのページのURLが表示されている箇所に、Webサイト内での階層構造として表示される場合があります。

検索結果画面に表示されるパンくずリストのサンプル

このように表示されることで、そのページがどんなカテゴリに含まれているのかが検索結果画面上で理解できるようになりますので、検索結果からのクリック率が変化する可能性があります。

例えば「パンくずリストに関するページ」が、SEOというカテゴリに含まれている事が分かる場合と、その他というカテゴリに含まれている場合では、前者のほうが「他にもSEOに関する情報が含まれているWebサイトである可能性が高いな」と判断されるでしょう。

このように検索結果にパンくずリストを表示させることは、SEOにおいても非常に重要なポイントであると言えます。

では、検索結果画面にパンくずリストを表示させるにはどのようにしたらいいのか？これが今回ご紹介する「構造化マークアップ」というテクニックです。

microdataによるパンくずリストのマークアップ

パンくずリストをWebサイトに設置しておけば、Googleが自動でその内容を理解して表示してくれる事もありますが、正しくパンくずが表示されない事も多いので、「これがパンくずリストであり、それぞれの構成要素がこれである」というパンくずの構成データをGoogleが理解できるようにマークアップする必要があります。

パンくずリストのHTMLタグを構成要素ごとにラベル付けしてGoogleにも理解できるようにする方法には、「microdata（マイクロデータ）」、「JSON-LD（ジェイソンエルディー）」、「RDFa（アールディーエフエー）」などいくつかあります。

まずは「microdata」を使って、パンくずリスト部分のマークアップを行う方法をご紹介しましょう。

例として、以下のようなソースコードで記述されたパンくずリストをmicrodataでマークアップしてみます。

<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/fruit/">フルーツ</a></li>
<li>リンゴ</li>
</ul>

microdataでマークアップすると、以下のようになります。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/">
      <span itemprop="name">ホーム</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/fruit/">
      <span itemprop="name">フルーツ</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/fruit/apple/">
      <span itemprop="name">リンゴ</span>
    </a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

まず、パンくず全体を囲むタグにmicrodataで記述する宣言部分を加えます。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">

次に、liタグがパンくずの一つ一つのアイテムだということを示すタグを追加します。
パンくずのリンク部分（aタグ）がURLを示すタグ、タイトル部分を示すタグも加えます。

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
  <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/">
    <span itemprop="name">ホーム</span>
  </a>

最後に、それぞれのアイテムが何番目にあたるのかを示すタグと、その番号を加えます。

  <meta itemprop="position" content="1" />

これをパンくずの数だけ繰り返します。

JSON-LDによるパンくずリストのマークアップ

シンタックスにJSON-LDを使って、パンくずリストのマークアップをすることもできます。
JSON-LDでパンくずリストを構造化マークアップする場合は、<head>〜</head>タグ内に記述します。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/",
"name": "ホーム"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/fruit/",
"name": "フルーツ"
}
},{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://example.com/fruit/apple/",
"name": "リンゴ"
}
}]
}
</script>

当サイトではJSON-LDでパンくずリストをマークアップしていますので、参考にしてみてください。

microdata、JSON-LDのどちらのシンタックスでマークアップする場合でも、それほど難しい設定ではありませんが、WordPressなどのCMSを使っている場合、多少面倒な作業が発生するかもしれません。制作会社や社内のシステム部門に確認してみましょう。

当サイトで利用している、WordPressでパンくずリストを表示する自作関数をWordPressで簡単にパンくずを表示させる方法でご紹介していますので、よろしければこの関数をベースにご利用ください。

参考ページ
Breadcrumbs | Search | Google Developers（リンク先は英語ページ）

構造化データテストツールで確認しよう

構造化テストツールの検証結果画面

パンくずリストのマークアップが完了したら、正しく設定できているか「構造化データテストツール」を使って確認してみましょう。

構造化データテストツールは、パンくずだけでなく著者情報など、構造化マークアップに関してテストして、実際にGoogle検索上でどのように表示されるかを確認できるツールです。

使い方は簡単で、構造化データテストツールにアクセスして、テストしたいURLを入力して「取得して検証」ボタンを押すだけです。

「コードスニペット」を使えば、構造化マークアップをしたコード単体でテストをすることもできます。

左側には取得したHTMLソースコードが表示され、右側に検証した構造化データの結果が表示されます。

構造化データをマークアップした後は、Googleのクローラーがページを訪問して再インデックスされるのを待つ事になりますので、意図した通りにGoogleに認識されるかどうかを構造化データテストツールで確認しておきましょう。

また、SearchConsoleのFetch as Googleを使うと、ページの再インデックスを促進することもできますので、あわせて活用しましょう。
参考：Fetch as Googleでクローラーに登録する方法

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

WebCampPro（3ヶ月の超ガッチリ型）

3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。

しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします

▲