SEO 2020.03.17

パンくずリストはSEOに効果アリ！作り方と気を付けるポイントをご紹介

pickup

SEOと一口に言っても内部対策、外部対策と大きく分かれ、かつその内容もいくつか種類があります。

パンくずリストはSEOの内部対策の一つです。パンくずリストを設置することでSEOに役立つというのが今回のテーマです。

パンくずリストを未設置の方、設置しているのにイマイチ効果を実感できない方や、改修を予定している方のために、この記事ではパンくずリストの作り方と気を付けたいポイントを紹介していきます。

この記事の目次

パンくずリストとは？

パンくずリストは、ユーザーがページを閲覧しているときに、そのページがWebサイト上のどの位置にいるかを示すリストです。

階層別のリストを表示して、上下階層が把握できるような形で表されます。ページの左上あたりに表示されているリンクがそれです。

パンくずリストの名前の由来は、童話「ヘンゼルとグレーテル」の中に出てくるエピソードです。自分たちが通ってきた道にパンくずを置いて、道に迷わないようにした兄弟の話です。

ユーザーも彼ら兄弟と同様に、いままで閲覧してきたページをパンくずリストとして表示してあげることで、多層的なWebサイトの中で迷わないようになるという仕組みです。

パンくずリストが必要な理由

パンくずリストが必要な理由は以下の通りです。

ユーザービリティを高めるため

先ほどもヘンゼルとグレーテルのところでお話ししましたが、ユーザーがどのページを閲覧しているのか、どのような経路をたどって現在のページにたどり着いたのかを把握してもらうため、簡単に言えばユーザービリティの向上に役立つ点が大きなポイントの一つです。

ページ数が多くなればなるほどユーザーは自分がどこのページにいるのか迷いやすくなりますから、パンくずリストはユーザーがサイトの構造を把握する意味でも有効な手段となります。

SEOで評価を高めるため

パンくずリストの設置はSEO上の効果もあります。

なぜかというと、以下の2つの点が有効だからです。

クローラーに内部リンクをクローリングしてもらうため

パンくずリストは、それ自体が内部リンクとなります。

また、SEOで強化したいキーワードをパンくずリストの中のアンカーテキスト（<a>タグの中に入る、リンクで表示される箇所のテキスト）に入れることによってそのキーワードの評価を上げる施策となります。

たとえばファッションアイテムを扱うネットショップの場合、

ホーム＞メンズ＞アウター＞ダッフルコートのように、アウターやダッフルコートをアンカーテキストにして、SEOを行うことができます。ホームなどをサイト名やショップ名にするなど、上位表示したいキーワードに変更することも可能です。

クローラーにサイトの構造を理解してもらうため

Googleをはじめとする検索エンジンにおいて、自分のページを検索結果画面に表示させるためには、検索エンジンのクローラーと呼ばれるロボットに自分のサイトをクローリング（情報収集）してもらわなくてはいけません。

その際パンくずリストを設置しようとサイト内を整理することで、必然的にサイト構造が体系的になっていくはずですが、このことが効率的にクローリングしてもらいやすくなる手だてになります。

クローリングして集められた情報は、検索エンジンのデータベースに格納され、それをもとにサイトの検索結果に反映されます。ですから、クローリングをスムーズに行えるようにサイト構造を整えることは、SEO上プラスになるというわけです。

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

では、パンくずリストの設置方法を紹介しましょう。

HTMLで設置する方法

HTMLで設置する場合、パンくずリストは<body>と</body>の間に置きます。

<body>
・・・
<a href="index.html">ホーム</a> >
<a href="tent/index.html">メンズ</a> >
<a href="tent/index.html">アウター</a> >
ダッフルコート
・・・
</body>

上記のように、<a href=にはリンク先を、</a>の前にページの内容を示すテキスト（アンカーテキスト）を</a>の背後に「> 」を設置します。

<a href=を増やすことで、階層が増えていきます。

こうしてパンくずリストを作れば、ページ上だけでなくユーザーが検索した場合に、検索結果のページURL下にパンくずリストが出ます。

構造化マークアップ’（microdata）で設置する方法

パンくずリストの設置方法にはもう一つ、構造化マークアップがあります。構造化マークアップをするメリットは、HTMLで記述するよりもパンくずリストがクローラーに効率的に伝わりやすくなる点です。

また構造化マークアップを行うことによって検索結果画面にリッチスニペットとして表示されやすくなることもメリットの1つです。

構造化マークアップでパンくずを設置する方法をご紹介します。

例）

<body>
・・・
<ol class="breadcrumb">

<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="index.html" itemprop="url"><span itemprop="title">ホーム</span></a>
</li>

<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="tent/index.html" itemprop="url"><span itemprop="title">メンズ</span>
</a>
</li>

<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="tent/index.html" itemprop="url"><span itemprop="title">アウター</span>
</a>
</li>

<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">ダッフルコート</span>
</li>

</ol>
・・・
</body>

パンくずリストを実装する際のポイント

パンくずリストを実装する際は、以下のポイントを抑えて行いましょう。

SEOで評価を集めたいキーワードをパンくずに入れる

特に力を入れている商品や、注力するキーワードがある場合は、そのワードをパンくずに入れましょう。もちろんそのワードはページの内容に関連していることが必須です。メリットは検索エンジンにページの内容を伝えやすくなり、かつサイト構造を把握してもらいやすくなる点です。

可能な限りカテゴリ構造を細分化する

コンテンツに関して分類基準の定義づけを行い、カテゴリーを明確にしておきましょう。カテゴリーが不明瞭だったり、どのように分類しているのかあいまいな場合、ユーザービリティは悪いですし、SEOの効果も期待できません。

ページの上部に設置する

パンくずリストの設置場所は自由ですが、サイトの上部に設置するのがベストです。というのもほかのサイトを見れば一目瞭然、ほとんどのサイトが上部に設置していて、ユーザーもそれに慣れているからです。なじみやすい位置に設置しましょう。

今いるページは表示してもしなくても良い

ユーザーが今見ているページをパンくずリストとして表示するのが正しいか、表示しないのが正しいのかということですが、これには正解はありません。含めると長くなってしまう場合は含めないほうが良いですし、そうでない場合は表示してかまわないでしょう。

ただし、今いるページを表示させない場合、そのすぐ上の階層のパンくずは忘れずにリンクにしましょう。

例えば今いるページが

「ランプ印ステンレス鋼製屑入投入口 AD-DH015 フタ付」

なら、長くなりすぎるので今いるページは表示させないで以下のようなパンくずリストにしましょう。

近藤金物店 > サニタリー > ラバトリー金物・屑入投入口 >

スマホページでも表示させる

スマホページでは画面サイズの関係上、パンくずリストの表示が難しい場合があります。肝心のコンテンツ部分が隠れてしまっては意味がないと考えている方も多いでしょう。

しかし今はPCでのサイト閲覧よりもスマホでの閲覧割合が圧倒的に高く、モバイルファーストでのインデックスを意識していく必要があります。つまりスマホサイトでもしっかりとパンくずリストが表示されるようにしておくことを、おすすめします。

まとめ

ここまで、パンくずリストのSEO上の効果についての説明と、実際の作り方、設置する際に気を付けるポイントについて紹介してきました。パンくずリストをまだ設置していない方、設置しているもののあいまいな分類になっている方など、ぜひこちらを参考にしてみてください。

執筆者：天野良香

株式会社ヒトノテのCMO兼グロースハッカー。データ分析をもとにしたCVRやUI/UX等のサイト改善が得意です。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。