URLの正規化、<h1>タグや<title>タグの設定など、SEOにおいては様々な重要なポイントがありますが、その中でもパンくずリストは重要なポイントの1つです。
今回はそのパンくずリストについての記事です。ぜひ、SEOでの参考になさってください。
目次
パンくずリストと聞いて、何? と思った方も多いのではないでしょうか。パンくずリストとは、今見ているページの構造(階層)にアンカーテキストを設定したページ内に設置されるリストのことです。一般的にページの上部(ヘッダー)か下部(フッター)に設置され、ユーザーはパンくずリストのリンクで、ルートページや上位階層にすばやく移動することができ、サイト内のナビゲーションの役割があります。
もちろんデジ研にも設置されています。普段みなさんが目にしているサイトにも、こういったパンくずリストが設置されていることが多いのではないでしょうか。
パンくずリストは、英語で「breadcrumbs list」や「breadcrumbs」とも呼ばれ、日本語ではなぜ「パンくずリスト」と呼ばれているのかというと、童話のヘンゼルとグレーテルが、パンくずを道しるべとして使用していたことが由来と言われています。
そんなパンくずリストですが、SEOという点においても重要な役割を担っていることをみなさんはご存知でしょうか。適切に設定することで、ユーザーにも、クローラ(検索エンジン)にも有益な情報となります。
ユーザーは必ずしもサイトのトップページから来てくれるとは限りません。
ユーザーにとってのパンくずリストは、検索エンジンの検索結果などからトップページ以外のページに来たユーザーが、いま自分がサイト内のどこの階層にいるのか、そのページがどのカテゴリに属しているのかが、一目でわかる情報です。
上記のように、ランディングした(検索結果などから来た)ページが「新宿区」で、そのページを見終えたあと、他のエリアの情報も知りたいと考えた場合、パンくずリストがあれば、「東京都」へすぐ移動できるというメリットがあります。つまり、サイト内の回遊率(1訪問あたりのページビュー数)をアップさせることができます。
さらに、CV数(コンバージョン数)の増加も期待できます。なぜなら、回遊率が上がることにより、CVポイントとなるページへ訪れる可能性がアップするからです。
このように、パンくずリストは、ユーザーの要望に応え、サイト内の回遊率・CV数をアップさせる重要な要素なのです。
パンくずリストをリンクにすることで、内部リンクにもなるため、クローラに対しても大きな効果を発揮します。
クローラとは、インターネット上の様々なサイトの情報を自動的に収集するプログラム(ロボット)のことです。
クローラによって収集されたデータを基に、インデックスが生成されます。そして、クローラはサイトを巡回する際に、サイト内の階層構造にしたがってリンクを巡回し、ページ内容を解釈し、そのページ内部のアンカーテキストやテキスト本文からページの主要キーワードを認識します。
そのため、クローラの巡回効率と巡回する頻度がSEO的には重要になってきます。パンくずリストがあることで、クローラはサイト内を効率よく巡回できるようになります。巡回効率を改善させることで、クローラに正しい情報が伝わりやすくなり、ページの内容に対して正しい評価を得ることができます。正しい評価を得ることができると、ページの検索結果の順位の向上にもつながる可能性があります。
パンくずリストは内部SEOにとって、かなり重要と言えます。
パンくずリストは適切に設置することで、内部SEOにおいて重要であるtitleタグと、descriptionメタタグとともに検索結果へ表示させることができるのです。
このように検索結果にパンくずリストが表示されるため、ページ内容がわかりやすく、ユーザー自身が探しているページかを判断することができ、クリック率を向上させることにつながるのです。
扱うコンテンツが豊富であればあるほど、パンくずリストを活用しない手はありません。検索結果で自身のサイトの取り扱いコンテンツをアピールし、流入数増加を目指しましょう。
パンくずリストをアンカーテキストで作成しページ内に設置するだけでは、クローラがそれをパンくずリストだと認識しても、検索結果にうまく表示されないこともあります。
クローラに「これはパンくずリストです」ということを示すには、構造化データでマークアップをする必要があります。構造化データとは、設定することで「ここにはこう言った内容があります」ということをクローラに伝わりやすくし、そのページの内容をより正確に理解してもらうことができるようになります。
検索結果で、通販ページの商品などが表示された際に価格や、★での評価が表示されているものを見かけたことはありませんか? あれは構造化データを用いて作られた「リッチスニペット」というものです。
リッチスニペットについてはこちらの記事を参考にしてください。
パンくずリストは、サイト内の階層構造にしたがって設定するものです。それにはまず、サイトの内部構造をきちんと把握しなければいけません。サイトの内部構造が把握できれば、階層構造の整理にもつながり、ユーザーにもわかりやすいサイト構造となるでしょう。
パンくずリストは通常、下記のように階層を表す形になります。
例えば、不動産売買のサイトで査定したい物件を検索できるページのディレクトリを設定する場合は下記のようになります。
それぞれを実際に落とし込んでみると下記のようになります。
都道府県 (大カテゴリ) |
市区町村 (中カテゴリ) |
各市区町村詳細 (小カテゴリ) |
物件詳細ページ (コンテンツ) |
---|---|---|---|
東京都 | 新宿区 | 大久保 | 「●●●マンション大久保」物件詳細ページ |
千葉県 | 浦安市 | 舞浜 | 「JR京葉線 舞浜駅 築38年の一戸建て」物件詳細ページ |
神奈川県 | 横浜市 | 鶴見区 | 「■■■シティハイツ」物件詳細ページ |
このように設定することで都道府県からだけではなく、市区町村の詳細からも探すことができるのです。
サイト内のページ数が多ければ多いほど、あとから階層構造を変更したり、整理することは難しくなってしまいます。
サイトを制作・運用する際には、あらかじめきちんとサイトのディレクトリ構造やカテゴリ設定のプランを練り、それにしたがってページを作成していきましょう。
階層構造の整理・見直しが完了したら、パンくずリストの設定スタートです!
不自然にキーワードを含めるとGoogleから「キーワードの乱用」として、手動による対策を受ける可能性があります。
また、パンくずリスト自体も長くなり、1行に収まらずに改行され見にくくなり、ユーザビリティを損ないます。
パンくずリストは、無理にキーワードを含めずにユーザビリティを意識した自然な内容となるよう設定することが大切です。
1つのページへたどり着くルートは、必ずしも1つとは限りません。
その場合、パンくずリストを複数設置することになるのですが、SEOに影響が出るかどうかが気になりますよね。
例えば、ECサイトを運営している際に下記のように設定したい場合もあるのではないでしょうか?
このように設置することで、ユーザーは「ランニングシューズ」「ブランド名」「売れ筋ランキング」からも再度商品を探すことができるようになるため、ユーザビリティの向上につながります。
では、Googleの見解はどうなのでしょうか?
結論から述べると、パンくずリストを複数設置していることで、サイトの評価を下げてしまうのではないか、というようなことを心配する必要はありません。
Googleの公式では、パンくずリストが複数存在した場合「1つ目を優先して採用する」と発表しています。つまり、1つ目にサイト構造を意識したパンくずリストを設置し、その他に設置するパンくずリストは、ユーザビリティを意識したパンくずリストを設置することが有効となるのです。
構造化データでパンくずリストを設置するには、Googleでは下記の形式の構造化データを使用することができます。
フォーマット | 詳細 |
---|---|
JSON-LD (推奨) |
<head>~</head>内、または<body>~</body>内に<script>タグを記述するJavaScript記法。<script>タグを記述しますが、何かしらのスクリプトが実行されるわけではありません。ユーザーには見えず、ブラウザのレンダリングにはまったく影響しません。そのほかのソースコードと独立しているので見やすく、あとからの修正も容易です。 |
microdata | HTMLタグ属性を使用して、構造化データとして公開するプロパティに名前を付けます。通常は、<body>~</body>内の記述に対してマークアップしますが、<head>~</head>内でも使用できます。 |
RDFa | HTMLタグ属性を使用して、リンクされたデータをサポートするHTML5拡張機能です。Microdata同様、<body>~</body>内または<head>~</head>内で使用できます。 |
この記事では、Googleが推奨しているJSON-LDを用いた構造化データマークアップについて説明いたします。
このような単一のパンくずリストの場合、JSON-LDを使用した構造化データマークアップは、下記のようになります。
<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "トップ", "item": "https://www.example.com/" },{ "@type": "ListItem", "position": 2, "name": "ランニングシューズ", "item": "https://www.example.com/running-shoes/" },{ "@type": "ListItem", "position": 3, "name": "ブランド名", "item": "https://www.example.com/running-shoes/●●●(ブランド名)/" },{ "@type": "ListItem", "position": 4, "name": "商品名", "item": "https://www.example.com/running-shoes/●●●(ブランド名)/■■■(商品名)/" }] } </script>
このような複数のパンくずリストの場合、JSON-LDを使用した構造化データマークアップは、下記のようになります。
<script type="application/ld+json"> [ { "@context": "https://schema.org/", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "トップ", "item": "https://www.example.com/" },{ "@type": "ListItem", "position": 2, "name": "ランニングシューズ", "item": "https://www.example.com/running-shoes/" },{ "@type": "ListItem", "position": 3, "name": "ブランド名", "item": "https://www.example.com/running-shoes/●●●(ブランド名)/" },{ "@type": "ListItem", "position": 4, "name": "商品名", "item": "https://www.example.com/running-shoes/●●●(ブランド名)/■■■(商品名)/" }] }, { "@context": "https://schema.org/", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "トップ", "item": "https://www.example.com/" },{ "@type": "ListItem", "position": 2, "name": "ブランド名", "item": "https://www.example.com/●●●(ブランド名)/" },{ "@type": "ListItem", "position": 3, "name": "商品名", "item": "https://www.example.com/running-shoes/●●●(ブランド名)/■■■(商品名)/" }] }, { "@context": "https://schema.org/", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "トップ", "item": "https://www.example.com/" },{ "@type": "ListItem", "position": 2, "name": "売れ筋ランキング", "item": "https://www.example.com/ranking/" },{ "@type": "ListItem", "position": 3, "name": "商品名", "item": "https://www.example.com/running-shoes/●●●(ブランド名)/■■■(商品名)/" }] } ] </script>
パンくずリストに構造化データを設定するには、少なくとも2つのListItemを設定し、BreadcrumbListを定義する必要があります。
パンくずリスト内のすべての情報をBreadcrumbList内に記述します。
プロパティ | 設定 | 説明 |
---|---|---|
itemListElement | 必須 | 決まった順番で記述されたパンくずリスト。 各パンくずリストを「ListItem」で設定します。 <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "トップ", "item": "https://www.example.com/" },{ "@type": "ListItem", "position": 2, "name": "ランニングシューズ", "item": "https://www.example.com/running-shoes/" },{ "@type": "ListItem", "position": 3, "name": "ブランド名", "item": "https://www.example.com/running-shoes/●●●(ブランド名)/" },{ "@type": "ListItem", "position": 4, "name": "商品名", "item": "https://www.example.com/running-shoes/●●●(ブランド名)/■■■(商品名)/" }] } </script> |
各パンくずリスト内のタイトルやURLなどの詳細情報をListItem内に記述します。
プロパティ | 設定 | 説明 |
---|---|---|
item | 必須 | 各パンくリストに設定されているページのURLを記述します。 URLの設定例を下記に記述します。 "item": "https://www.example.com/" または、 "item": { "@id": "https://www.example.com/", "name": "●●●" } パンくずリストの末尾(自ページ)に、itemプロパティは必須ではありません。最後のListItemにitemプロパティが設定されていない場合、Googleはそのページ(自ページ)のURLをitemプロパティの代わりに使用します。
|
name | 必須 | パンくずリストのタイトルを記述します。 実際にブラウザに表示されているパンくずリストと同じタイトルを記述します。 itemプロパティ内で、nameプロパティを設定している場合は、ListItem内でのnameプロパティは必須ではありません。 ●ListItem内でのnameプロパティの設定 {
"@type": "ListItem",
"position": 2,
"name": "ランニングシューズ",
"item": "https://www.example.com/running-shoes/"
}
●itemプロパティ内でのnameプロパティの設定 {
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://www.example.com/running-shoes/",
"name": "ランニングシューズ"
}
}
|
position | 必須 | パンくずリスト内のそのパンくずの位置を記述します。positionが1の場合、パンくずリスト内の最初のパンくずということになります。 |
パンくずリストの構造化データを設置したら、構造化データに問題がないかどうかを確認します。
Googleの提供している「リッチリザルトテストツール」を使用することで確かめることができます。間違った記述があった場合は、エラーや警告が表示されます。
このツールは、パンくずリスト以外の構造化データも確認することができるので、他の構造化データを設置した際にも活用してみてください。
Google Search Consoleにサイトを登録していなくてもGoogle検索結果に表示されますが、登録するとGoogleにサイトがどのように見られているかがわかり、問題点があれば改善できるようになります。
構造化データの実装で、エラーが発生した場合は、以下の項目を確認してください。
●リッチリザルトテストツールで、構造化データにエラーがある場合は、「構造化データエラーの一覧」を確認して、修正をしてください。
●構造化データが検出されない、もしくは構造化データの合計数がSearch Console上から減少している場合。
(回答)商品ページなどへの経路が複数ある場合は、複数のパンくずリストを設置することができます。その場合、メインの経路を1つ目のパンくずリストに設定してください。クローラは、パンくずリストが複数見つかった場合、現状では、1つ目を採用しています。
(回答)不用意にパンくずリストにキーワードを含めるとGoogleから「キーワードの乱用」として、手動による対策を受ける可能性があります。また、長すぎるパンくずリストは、1行に収まらずに改行されてしまい見にくくなり、ユーザビリティを損ないます。クローラにも階層構造が正しく伝わらなくなる可能性もあります。パンくずリストは、無理にキーワードを含めずにユーザビリティを意識した自然な内容となるよう設定してください。
(回答)ユーザビリティ(サイトの使いやすさ)が良くなります。サイト内のナビゲーションの役割があり、すばやく上位階層に移動することができ、回遊率が増します。また、いま自分がサイト内のどこの階層にいるのか、そのページがどのカテゴリに属しているのかが、一目でわかります。
クローラが効率よくサイト内をクロールすることができます。パンくずリストがあることで、クローラはパンくずリストのリンクをたどって、サイト内を効率よくクロールできるようになります。
パンくずリストは、ユーザーにも検索エンジンにもメリットがあります。デメリットはありませんので、ぜひ、設置してください。
(回答)ページ内にパンくずリストが設置できない場合、パンくずリストの構造化データの設定もお控えください。ページ内のコンテンツと構造化データが一致しないと、Googleのガイドライン違反となり、サイトは手動による対策を受ける可能性があります。手動による対策を受けると、一部のページまたはサイトすべてがGoogleの検索結果に表示されなくなります。
(回答)Googleが推奨するJSON-LD形式で、構造化データを実装してください。ただし、構造化データを実装したからといって、検索結果に必ず表示されるとは限りません。「リッチリザルトテストツール」で構文にエラーが無いか、Googleが公開している「構造化データに関する一般的なガイドライン」をご確認いただき、実装するようお願いいたします。また、data-vocabulary.orgの構造化データに関して、Googleのサポートは、2021年1月29日に廃止すると公式ブログ(英語版)でアナウンスされています。廃止後は、検索結果にパンくずリスト形式で表示されなくなるでしょう。data-vocabulary.orgで実装している場合は、廃止されるまでにGoogleが推奨するJSON-LD形式での構造化データに変更してください。
今回はパンくずリストがSEOにおよぼす影響についてと設置方法についてお伝えいたしました。
パンくずリストはページを移動する際に便利なだけではなく、使い方によってはユーザーにも検索エンジンにも大きな影響があります。メリットこそあれ、デメリットはありませんので、これを利用しない手はないですね。
ページへの流入は、検索結果でどれだけユーザーにアピールできるかに関わってきますので、パンくずリストを構造化データマークアップで設置することにより、流入を増やせるかもしれません。
また、パンくずリストを設置するには、サイトの内部構造をきちんと把握しなければいけないので、階層構造の整理にもつながりますし、整理することで内部リンクを上手く集中させることができれば、Googleからの評価も上がるかもしれません。
正しくマークアップしたパンくずリストを使って、ユーザーにも検索エンジンにも最適なサイトを目指しましょう!
<h1>タグとは、HTMLの1つで、きちんと記述することで人間にも検索エンジンにも、ページの内容を伝えやすくすることができます。…
これからWebマーケティングに取り組もうとしている方の中には何が有効な施策なのかが分からない方も多いのではないのでしょうか?ここではSEO対…
2018年1月18日、Googleのウェブマスター向け公式ブログにて、モバイル検索のランキング要素にページの読み込み速度が組み込まれるSpe…
ウェブサイトと立ち上げる際、ドメインの使い方として、サブディレクトリとサブドメインのどちらにするべきか、迷うことはないでしょうか?ドメインに…
ウェブサイトをリニューアルする際に「古いページから新しいページには301リダイレクト転送してください。」、存在しないページにアクセスされた際…
メタディスクリプション(meta description)とは、ページコンテンツを100文字程度の文章で表した「概要」や「要約」のようなもの…