2016.11.07SEO記事一覧

パンくずリストの正しい設定方法とSEOとの関係性

  • このエントリーをはてなブックマークに追加

18_how-to-set-breadcrumbs

URLの正規化、<h1>タグ・<title>タグの設定など内部SEO施策（対策）において様々な重要なポイントがありますが、その中でもパンくずリストは重要なポイントの1つです。

今回はそのパンくずリストについての記事です。ぜひ、SEOでの参考になさってください。

パンくずリストとは

パンくずリストと聞いて、何？と思った方も多いのではないでしょうか。パンくずリストとは、今いるページを示すために、ページの構造をリストアップしてリンクにしたページ上部に設置されているリストのことです。

how-to-set-breadcrumbs-01

もちろんデジ研にも設置されています。普段みなさんが目にしているホームページにも、こういったパンくずリストが設置されているサイトは多いのではないでしょうか。

パンくずリストは、英語で「breadcrumbs list」や「breadcrumbs」とも呼ばれ、日本語ではなぜ「パンくずリスト」と呼ばれているのかというと、童話のヘンゼルとグレーテルが、パンくずを道しるべとして使用していたことが由来と言われています。

そんなパンくずリストですが、SEOという点においても重要な役割を担っていることをみなさんはご存知でしょうか。適切に設定することで、人間（ユーザー）にも、ロボット（検索エンジン）にも有益なコンテンツとなります。

人間（ユーザー）にとってのパンくずリスト

訪問ユーザーは必ずしもホームページのトップページ（index）から流入するとは限りません。

パンくずリストは、トップページ以外のページに訪問してきたユーザーが、いま自分がどのページにいるのか・そのページがどのカテゴリに属しているのかが、一目で理解しやすくなるコンテンツです。

how-to-set-breadcrumbs-02

上記画像のように、ランディングしたページが、「渋谷エリア」で、そのページコンテンツを見終えた後、他のエリアの情報も知りたいと考えた場合、パンくずリストがあれば、「東京都」へすぐ移動できるというメリットがあります。つまり、サイト内の回遊率をアップさせることができます。

さらに、CV数の増加も期待できます。なぜなら、回遊率が上がることにより、CVポイントとなるページへ訪れる可能性がアップするからです。

このように、パンくずリストは、ユーザーの要望をに応え、ホームページをの回遊率・CV数をアップさせる重要な要素なのです。

ロボット（検索エンジン）にとってのパンくずリスト

パンくずリストは内部リンクにもなるため、検索エンジンのクローラーに対しても大きな効果を発揮します。

巡回効率と順位向上への貢献

クローラーとは、インターネット上の様々なホームページの情報を集るプログラム（通称ロボット）のことです。

クローラーによって収集されたデータを基に、インデックスが生成されます。そして、クローラーはホームページを巡回する際に、ホームページ内の階層構造にしたがってリンクを巡回し、ページでどのようなコンテンツを扱っているのかを理解し、そのページ内部のアンカーテキストやテキスト本文からページの主要キーワードを認識します。

そのため、クローラーの巡回効率と、巡回する頻度がSEO的には重要になってきます。
パンくずリストがあることで、クローラーはページ内部を効率よく巡回できるようになります。

巡回効率を改善させることで、クローラーに正しく情報が伝わり、ページコンテンツに対して正しい評価を得ることが出来ます。正しい評価を得ることが出来ると、ページの順位の向上にもつながります。

そのため、パンくずリストは内部SEO対策にとって、かなり使えるツールと言えます。

検索結果への影響

パンくずリストは適切に設置することで、内部SEO対策において重要であるtitleタグと、descriptionタグと共に検索結果へ表示させることが出来るのです。

how-to-set-breadcrumbs-03

このように検索結果でカテゴリが一目で確認できるため、ホームページで扱うコンテンツもわかりやすく、クリック率を向上させることに繋がるのです。
扱うコンテンツが豊富であればあるほど、パンくずリストを活用しない手はありません。検索結果で自身のホームページの取り扱いコンテンツをアピールし、流入数増加を目指しましょう。

パンくずリストの設定方法

パンくずリストはただのアンカーテキストリンクで生成し、ホームページ内に設置しても構いませんが、クローラーがそれをパンくずリストだと認識し、正しく表示されるないこともあります。

クローラーに「これはパンくずリストです」という事を示すには構造化マークアップをする必要があります。構造化マークアップとは、設定することで「ここにはこう言った内容があります。」という事を検索エンジンのクローラーに伝わりやすくするものです。

検索結果で、通販ページの商品などが表示された際に価格や、☆での評価が表示されているものを見かけたことはありませんか？あれは構造化マークアップを用いて作られた「リッチペット」というものです。

リッチスニペットについてはこちらの記事を参考にしてください。

まずはホームページのディレクトリ構造を整理する

パンくずリストは、ホームページの階層構造に従って設定するものです。それにはまずホームページの階層構造、つまりディレクトリの構造が整理されている必要があります。

パンくずリストは通常、下記のように階層を表す形になります。

ホーム > 大カテゴリ > （中カテゴリ） > （小カテゴリ） > コンテンツ

例えば、不動産売買のサイトで査定したい物件を検索できるページのディレクトリを設定する場合は下記のようになります。

都道府県（大カテゴリ） > 市区町村（中カテゴリ） > 各市区町村詳細（小カテゴリ） > 物件詳細ページ（コンテンツ）

それぞれを実際に落とし込んで見ると下記のようになります。

都道府県
（大カテゴリ）
市区町村
（中カテゴリ）
各市区町村詳細
（小カテゴリ）
物件詳細ページ
（コンテンツ）
東京
千葉
神奈川		 新宿区
渋谷区
港区		 大久保
西新宿
高田馬場		 大久保周辺物件詳細A
大久保周辺物件詳細B
大久保周辺物件詳細C

このように設定することで都道府県からだけでなく、市区町村の詳細からも探すことができるのです。

ホームページのページ数が多ければ多いほど、後から階層構造を変更したり、整理することは難しくなってしまいます。

ホームページを制作・運用する際には、あらかじめきちんとホームページの構造やカテゴリ配置のプランを練り、それに従ってページを作成していきましょう。

ホームページの階層構造の整理・見直しが完了したら、パンくずリストの設定スタートです！

カテゴリに対策キーワードを含める

階層構造のプランを練る時に意識しなければいけないのは、大カテゴリなどのカテゴリページに対策キーワード（とくにビッグキーワード）を含めることです。カテゴリページには内部リンクが集中しやすくなるため、Googleに評価されやすくなるのです。

パンくずリストの複数設置

ページへの辿り方は1つとは限りません。
その場合、パンくずを複数設置することになるのですが、SEOに影響が出るかどうかが気になりますよね。

例えば、ECサイトを運営している際に下記のように設定したい場合もあるのではないでしょうか？

トップページ > サッカーシューズ > ブランドA > 商品詳細ページ
トップページ > ブランドA > 商品詳細ページ
トップページ > 売れ筋ランキング > 商品詳細ページ

このように設置することで、ユーザーは「サッカーシューズ」一覧からも、「ブランドA」からも、「売れ筋ランキング」からも再度商品を探すことができるようになるため、ユーザビリティを向上することができる可能性があります。

では、Googleの見解はどうなのでしょうか？

結論からの述べると、複数並んでいることでサイトの評価を下げてしまう心配はありません。

Googleの公式では、パンくずリストが複数存在した場合、1つ目を優先して認識すると公式に発表しています。つまり、1つ目に構造を意識したパンくずリストを設置し、その他に設置するパンくずリストはユーザビリティを加味したパンくずを設置することが有効となるのです。

構造化マークアップでパンくずリストを設置する

構造化マークアップでパンくずリストを設置するには、schema.orgのボキャブラリーの中に定義されている値を、パンくずリストへマークアップしていきます。その値はシンタックスと呼ばれる下記3つの記述方法によってマークアップできます。

  • microdata
  • JSON-LD
  • RDFa

Googleはその中でもmicrodata（マイクロデータ）での構造化マークアップを推奨していますので、この記事ではmicrodataを用いた構造化マークアップをご説明いたします。

パンくずリストのHTML

ホーム > 大カテゴリ > （中カテゴリ） > （小カテゴリ） > コンテンツ

このようなパンくずリストを作ろうとした場合、HTMのリストタグ<ol>を使用したコーディングのソースは、以下のようなものになるかと思います。

HTMLの例

<ol>
<li><a href=”トップページのURL”>トップ</a></li>
<li><a href=”大カテゴリページURL”>大カテゴリ名</a></li>
　　<li><a href=”中カテゴリページURL”>中カテゴリ名</a></li>
　　<li><a href=”小カテゴリページURL”>小カテゴリ名</a></li>
<li>コンテンツ</li>
</ol>

microdata（マイクロデータ）で構造化マークアップする

先ほどのHTMLでの記述をmicrodata（マイクロデータ）を用いて記述した場合、このような記述になります。

microdataの例

<ol itemscope itemtype=”http://schema.org/BreadcrumbList”>
<li itemprop=”itemListElement” itemscope
itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”トップページのURL”>
<span itemprop=”name”>トップ</span></a>
<meta itemprop=”position” content=”1″>
</li>

<li itemprop=”itemListElement” itemscope
itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”大カテゴリURL”>
<span itemprop=”name”>大カテゴリ名</span></a>
<meta itemprop=”position” content=”2″>
</li>

<li itemprop=”itemListElement” itemscope
itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”中カテゴリURL”>
<span itemprop=”name”>中カテゴリ名</span></a>
<meta itemprop=”position” content=”3″>
</li>

<li itemprop=”itemListElement” itemscope
itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”小カテゴリURL”>
<span itemprop=”name”>小カテゴリ名</span></a>
<meta itemprop=”position” content=”4″>
</li>

<li itemprop=”itemListElement” itemscope
itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”コンテンツURL”>
<span itemprop=”name”>コンテンツ</span></a>
<meta itemprop=”position” content=”5″>
</li>
</ol>

最初に記述してにある「itemscope」には、microdataを宣言する意味があります。「itemtype」にはschema.orgから当てはまる要素を探してそのURLを記述します。

今回はパンくずリストですので、「http://schema.org/BreadcrumbList」を記述します。

次に、リストの要素だということを示すため、「http://schema.org/ListItem」を記述しましょう。「itemprop」には「itemListElement」を記述します。「itemListElement」を記述することで、全ての階層に1つ1つマークアップ要素を指定がすることができます。

そして、次に3つの要素をマークアップしていきます。

URL

パンくずが示すURLを「itemprop=”item”」で指定します。

ページ名

パンくずに記載するページ名を「itemprop=”name”」で指定します。

パンくずの順番

これは「itemprop=”position”」で指定します。パンくずの先頭から数えて、1つ目ならcontent=”1″、2つ目ならcontent=”2″…と言ったように数が増えていきます。この要素は、完全に検索エンジンに向けた記述ですのでmetaデータを使用してます。

WordPressでのパンくずリスト生成

WordPressでパンくずリストを生成するには、プラグインを使用する方法があります。

RDFa Liteでの記述方法でパンくずを簡単に生成する、「Breadcrumb NavXT」といったプラグインがあります。WordPressのプラグイン追加ページから検索してインストールが可能です。

インストールをしたら、パンくずリストを設置したい個所に下記のコードを記述します。

<div style=”border: 1px solid #c1c1c1; width: 340pix background-color: #fcfcfc; margin: 10px; padding: 20px;”>
&lt;div class=”breadcrumbs” vocab=”http://schema.org/” typeof=”BreadcrumbList”&gt;
&lt;?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?&gt;
&lt;/div&gt;
</div>

パンくずリストを設置したら

パンくずリストをテストする

パンくずリストを正しく設置できたかどうかは、Googleの提供している「構造化データテストツール」を使用することで確かめることができます。間違った記述をしている際には、エラーとして排出されます。

このツールは、構造化マークアップ全般の設置において重宝するツールですので、是非とも活用なさってください。

クローラーの巡回を促す

パンくずリストを生成してもそこで終わりではありません。パンくずリストを設置して放置しても、即時に検索結果には反映されないからです。

検索結果での表示は、クローラーが巡回してきた時の状態でインデックスされていますので、設置したページをクロールしてもらう必要があります。

それにはGoogle search consoleを用いた方法があります。search console内にある、「Fetch as Google」という機能を使います。これは、クローラーにページの巡回を促す（ページへ来てくださいと依頼をする）ことが出来ます。

how-to-use-searchconsole-08

「Fetch as Google」は、ページの更新を知らせるためだけでなく、新しくコンテンツを追加した際にも使えるツールですので活用をおすすめします。

さいごに

今回はパンくずリストがSEOに及ぼす影響についてと設置方法についてお伝えいたしました。

パンくずリストはページを移動する際に便利なだけではなく、使い方によってユーザにも検索エンジンにも大きな影響があるコンテンツです。メリットこそあれ、デメリットはありませんので、これを利用しない手はないですね。

ページへの流入は、検索結果でどれだけ検索ユーザにアピールできるかに関わってもきますので、パンくずリストを構造化マークアップで設置することで流入を増やせるかもしれません。

また、パンくずリストを設置するにはサイトの内部構造をきちんと整理しなければいけないのでディレクトリ構造の整理にも繋がりますし、整理することで内部リンクを上手く集中させることが出来れば、Googleからの良い評価も得ることができるでしょう。

正しくマークアップしたパンくずリストを使って、ユーザーにも検索エンジンにも最適なホームページを目指しましょう！
 

  • このエントリーをはてなブックマークに追加
The following two tabs change content below.
阿部 円佳

阿部 円佳

ディーエムソリューションズ株式会社 デジタルマーケティング事業部 シニアコンサルタントグループ SEOコンサルタント。 キーワードプランニングや内部施策の施策仕様書作成など、シニアコンサルタントグループを支える縁の下の力持ち。

この記事に関連する記事