パンくずリストとは？ 設置のメリットと SEO 効果、構造化データの書き方

パンくずリストはサイト上における現在地を教えてくれるものです。パンくずリストが表示されていれば、ユーザーは移動したいページにワンタッチで移動することができます。サイト全体の構造を理解しやすくなり、ユーザビリティの向上が期待できます。また、パンくずリストはSEOにも良い影響を与えるので、サイトに設置すると様々な効果が期待できます。

パンくずリストとは

パンくずリストという名前は、童話「ヘンゼルとグレーテル」に由来します。主人公の兄弟が、迷わないようパンのくずを道に落として目印にしていたことから、その名前がつきました。

パンくずリストは通常、サイトの上部に表示されています。なお、上記画像はサングローブ株式会社のSEM事業を紹介するページで表示されているもので、赤枠で囲われている部分がパンくずリストです。これを見ると、閲覧しているページがサイトの階層構造においてどこの位置にあるかが分かります。表示されているページ名を選択すれば、トップページや別の階層に1回で移動することができるので、ユーザーは直感的にページを行き来することができます。

パンくずリストには3つの種類がある

パンくずリストには「位置型パンくずリスト」「属性型パンくずリスト」「パス型パンくずリスト」の3種類があります。それぞれについて説明します。

位置型パンくずリスト

ユーザーが閲覧しているページがサイトの階層構造においてどこの位置かを示すパンくずリストです。同じページであれば、どんな導線でアクセスしても表示されている階層のリストが同じで、上位の階層に戻りやすくなります。例えば、ユーザーがトップページ以外のページにアクセスした場合に、他のページも閲覧してくれる確率が高まるでしょう。

例：トップページ>〇〇特集>〇〇記事
このパンくずリストは静的で、どのような形でサイトにアクセスをしても表示が変わることはありません。

属性型パンくずリスト

ユーザーの操作によって変化するパンくずリストです。ユーザーが閲覧しているページがサイト内でどのカテゴリーなのかを示すもので、ジャンルやカテゴリー検索を行うECサイトなどに適しています。

位置型とは反対的に動的なので、ユーザーの行動によってパンくずリストが変動します。例えば、「新商品」→「家電」→「暖房」と検索すれば下記のように表示されます。
例：新商品>家電>暖房

一方で、新商品、家電、冷蔵庫と検索すれば下記のように表示されます。
例：新商品>家電>冷蔵庫

位置型のように前に戻ることはできませんが、疑似商品を探したい場合などに役立ちます。

パス型パンくずリスト

ユーザーがどのようにしてページに辿り着いたかを示すパンくずリストです。辿り着いた経路によってリストの表示が変わります。現在ではブラウザバックで履歴から過去ページに戻れることから、あまり使われていません。

属性型同様に動的で、ユーザーが閲覧しているページまでの行動がパンくずリストとして表示されます。例えば検索で「家電」と調べてページに辿り着いた場合、下記のように表示されます。

例：検索結果「家電」>商品ページ

パンくずリストを設置するメリット

SEOの効果が向上する

Googleなどの検索エンジンは、Webサイトの情報を収集（クローラー）し、結果をデータベースに登録します。パンくずリストを設置していると、検索エンジンのクローラーがサイト構造を理解しやすくなります。これにより、サイトが正しい評価を受けやすくなり、検索順位の向上が期待できます。

ユーザビリティの向上

「閲覧しているページがサイト内のどこにあるのか」「別のページには何があるのか」ということが認識しやすくなるので、ユーザーは欲しい情報を見つけやすくなります。

パンくずリストの構造化データとは

パンくずリストの構造化データとは、パンくずリストをGoogleのクローラーが認識しやすいような形式にしたメタ情報です。ページの意図を明確的に伝えるようにするためのもので、コンテンツを分類するために標準化されたデータ形式にすると、Googleがサイトのことをより把握しやすくなります。

構造化データをマークアップすることのメリット

クリック率の上昇につながる

構造化データをマークアップすると、テキストに意味を持たせることができます。Googleのクローラーがサイトを認識しやすくなるので、SEOの評価が上がりやすくなるでしょう。また、検索結果にもパンくずリストが表示されるようになるので、ユーザーは検索結果のパンくずリストから、必要な情報があるかどうかを判断することもできます。

様々な検索方法の対象になる

Googleには、検索結果の表示方法が複数あります。記事などを大きく見せる「Article」や検索結果から直接書籍を購入できる「Book」、レシピや映画などの情報を表示させる「カルーセル」などです。これらは構造化データをマークアップすることによって実現できる表示方法で、検索結果にパンくずリストを表示させる仕組みも、このうちの1つです。これによってサイトがユーザーの目に留まりやすくなり、クリック率の向上が狙えるでしょう。

構造化データのマークアップ方法

構造化データのパンくずリストの設置方法には「JSON-LD」「RDFa」の2種類があります。GoogleではJSON-LDを推奨していますが、どちらの方法でも問題はありません。なお、WordPressをお使いの場合は、パンくずリストに特化したプラグインが複数あるのでこちらもお試しください。

ここでは、それぞれの方法で使用するコードを紹介します。

JSON-LD

<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “BreadcrumbList”,
“itemListElement”: [{
“@type”: “ListItem”,
“position”: 1,
“name”: “Books”,
“item”: “https://example.com/books”
},{
“@type”: “ListItem”,
“position”: 2,
“name”: “Science Fiction”,
“item”: “https://example.com/books/sciencefiction”
},{
“@type”: “ListItem”,
“position”: 3,
“name”: “Award Winners”
}]
}
</script>

RDFa

<ol vocab=”https://schema.org/” typeof=”BreadcrumbList”>
<li property=”itemListElement” typeof=”ListItem”>
<a property=”item” typeof=”WebPage”
href=”https://example.com/books”>
<span property=”name”>Books
<meta property=”position” content=”1″>
</li>
›
<li property=”itemListElement” typeof=”ListItem”>
<a property=”item” typeof=”WebPage”
href=”https://example.com/books/sciencefiction”>
<span property=”name”>Science Fiction
<meta property=”position” content=”2″>
</li>
›
<li property=”itemListElement” typeof=”ListItem”>
<span property=”name”>Award Winners
<meta property=”position” content=”3″>
</li>
</ol>

JavaScript を使用している場合

コンテンツでJavaScriptを使用している場合、「Googleタグマネージャー」と「カスタム JavaScript」という2種類の方法で、構造化データをマークアップすることができます。ここでは、Googleタグマネージャーの方法について説明します。

Googleタグ マネージャー

1.サイトにGoogleタグ マネージャーの設定とインストールを行います
2.新しいカスタムHTMLタグをコンテナに追加します
3.使用する構造化データのブロックをタグコンテンツに貼ります
4.コンテナ管理メニューから「Googleタグ マネージャーをインストール」に従って、コンテナをインストールします
5.Googleタグ マネージャーのインターフェースでコンテナを公開すれば、タグをWebサイトに追加できます。

構造化データの確認

構造化データのマークアップが完了したら、最後にリッチリザルトテストあるいはスキーマ マークアップ検証ツールを利用して正しく認識されているかを確認します。どちらも、サイトのURLを入力すれば簡単に調べることができます。

なお、構造化データが確認できない場合は、「構造化データに関する一般的なガイドライン」を調べてみてください。原因の究明に役立つと思います。

パンくずリストはユーザビリティとSEOに好影響をもたらす

パンくずリストは、ユーザーにとってサイトの目印となる存在であり、サイト利用を快適にするツールです。目的のページ以外にアクセスしてもらえる可能性が高まる、SEOの高評価にもつながると言われていることから、複数のメリットをもたらす有用な情報であると言えるでしょう。追加による大きなデメリットはないので、積極的に設置を検討してみる価値がありそうです。