目次
グリム童話の中で、ヘンゼルとグレーテルが森の奥深くに入って行った時、ヘンゼルは家に戻るための目印としてパンくずを地面に落としていきました。でも…
残念なことに、夜になって家に戻ろうとした時には小鳥たちにパンくずを食べられてしまっていて、彼らは家に帰ることができませんでした。
この童話ではパンくずが家までの道標として役立つことはありませんでしたが、この話が由来となって、インターネット上で「パンくずリスト」なるものができました。あなたのwebサイトにパンくずを表示させておくと、あなたのところに来てくれたユーザーを露頭に迷わせなくて済むようになります…
パンくずリスト（英語でbreadcrumbs）とは、ユーザーがwebサイト内のどのページにいるのかを伝える階層順のリストのことです。次の画像にSuper Clear Contentsで設置しているパンくずリストの画像をサンプルとして挙げますが…
この赤字で囲ってある部分がパンくずリストです。最初の「ホーム」がwebサイトの最上位であるトップページを表します。その次の「ブログ」はプライマリーメニューにある「ブログ」のカテゴリー内、3番目の「SEO対策」がブログカテゴリー内の「SEO対策」というカテゴリーにいることを示しています。このうち「ホーム」と「ブログ」は青く色がついていますが、この青文字は内部リンクになっていて、ここをクリックすると通常のリンクと同じように該当するページに飛ぶことができます。
パンくずリストの設置には、訪問者の道案内の他にもいくつかの利点があります…
パンくずリストによるナビゲーションの恩恵は、ユーザーだけでなくGoogleも受けています。Googleは他の方法でもwebサイトの構造を把握できますが、パンくずリストも利用することがあります。その結果、webサイト内のコンテンツの内容をより早くGoogleが把握できるようになるので、あなたのコンテンツが適切に検索結果画面に現れるのを助けることになります。
また、構造化データをマークアップすることにより、Googleがパンくずリストを検索結果のリッチスニペットに表示できるようになります。
この例は大阪某所で「ランチ」と検索した時に現れた食べログのスニペットです。タイトルの下に…
ドメイン名 > 大阪 > 大阪ランチ > 大阪市ランチ
とパンくずリストが表示されています。このようにパンくずリストが検索結果画面に表示されると何が良いのかというと、ユーザーに対するwebサイトの紹介としての効果があるんです。
例えば、この例で1つ上位のカテゴリーに「大阪ランチ」とあります。ということは、このwebサイト内には「大阪市以外のランチ情報」も収められていると推測できますよね。同様に「大阪」というカテゴリーからは、大阪以外の京都や神戸など他地域のランチ情報も掲載されている可能性があるのがわかります。
もしこの人が別の機会に「神戸でランチスポットを探したい」と思った時に、もしかしたら食べログを開いてくれるかもしれません。可能性は高くないにしても、ゼロとは言い切れませんよね。少なくともあなたにとって損はないことですから、やっておく方が良いのではないでしょうか？
関連記事：
WordPressサイトでの上手なカテゴリーとタグの使い分け
カテゴリーページやタグページをどう最適化する？
先ほど例にあげたSuper Clear Contentsのパンくずリスト…この画面をスマホで開くとこうなります…
このスマホ画面のパンくずリストにある「ホーム」「ブログ」という青字が内部リンクになっていることはお伝えしましたね。ユーザーが他のページに移りたくなったとき、行きたいページがパンくずリスト内にあれば、この内部リンクをタップするだけで飛んでいくことができます。
もしパンくずリストがなかったら…ユーザーはひたすら「戻る」ボタンを押しまくるか、あるいはハンバーガーボタンと呼ばれる3本線をタップして目的のページを探さなければなりません。パンくずリストには、そんなユーザーの手間を省いてユーザビリティを上げる働きも持っているのです。
離脱率とは…今後機会があれば詳しく説明しますが、簡単に言うと「そのページを開いたユーザーがすぐに元のページに戻ってしまった割合」を指します。言い換えると、そのページがユーザーの検索意図とズレていたことを表す指標です。パンくずリストには、この離脱率を下げる効果があります。
例をあげて説明しましょう。次の画像はAmazonで本を購入する時のページです。本の表紙の上に「本 > 人文・思想 > 哲学・思想」と書かれたパンくずリストがあります。このリスト内にある「本」「 人文・思想」「哲学・思想」のそれぞれは、内部リンクとして働くことは前に説明しましたね。
もしユーザーがこのページを開けていて…
この本はイマイチだけど、同じ分野で面白そうな本ないかなぁ…
と感じていたら、パンくずリスト上の文字をクリックして類似本を探すことができますよね。結果として、お客さんがAmazonのwebサイトから離れていくのを防ぐ役割を果たしているわけです。
パンくずリストには、次にあげる3つの種類があることが知られています。
そのページにたどり着いた経路を示すパンくずリスト。ヘンゼルとグレーテルの逸話に最も近い形ですが、実際このタイプのパンくずリストはほとんど見られません。というのは、普通に「戻るボタン」のクリックで事足りるので、パス型パンくずリストの存在意義が薄いからです。
そのページがwebサイト全体のどの位置にあるのかを示すパンくずリスト。最もよく見られるパンくずリストで、ユーザーにとってwebサイトの構造を把握するのに便利です。
そのページがどんな属性で分類されているのかを示すパンくずリスト。通信販売などのショッピングサイトで好まれて使われています。ユニクロのwebサイトを例にあげると…
このように、各階層にその属性に当てはまる類似商品のページをまとめ、階層の下に行けば行くほど具体的な商品ページに行きつくようになっています。こんなパンくずリストがあると、お客さんがサイト内の商品を探しやすくなるので便利ですよね。
パンくずリストをwebサイトに設置する方法はいくつかあるのですが、最も簡単なのは、パンくずリスト自動生成機能のついたWordPressテーマを使うことです。そうすれば、あなたはブログコンテンツを適切にカテゴリー分けするだけで、webサイトの方が機能的なパンくずリストを適切なところに表示してくれるようになります。
そんなテーマにお金をかける余裕がない or 無料でやりたい…という場合には、Yoast SEOにはパンくずリストを自動で作成してくれる機能があります。Yoast SEOをインストールしていれば、下の画面と同じように設定すれば一発です。
また、僕は使っていませんが、Breadcrumb NavXTというプラグインの評判も良いようです。使い方はAdminWebというサイトに詳しく載っているので、適宜ご参照ください。
AWAI認定コピーライター
SEO contents institute認定コピーライター
何事も“超一流の専門家から学ぶ”をポリシーとしており、コピーライティング業界で世界最高の権威である全米コピーライター協会(AWAI)でライティングの基礎を習得後、SEOコピーライティングのパイオニアHeather-Lloyd Martin、コンテンツマーケティングの世界的第一人者Brian ClarkにWebコピーライティングを学ぶ。
さらにAWAIでビジネス用Webサイト作成スキルを習得、知識ゼロの状態から自社サイトSuper Clear Contentsを立ち上げる。その経験とインターネット業界の動向をふまえて、個人事業主や副業サラリーマンに向けて最新のビジネス用Webサイト構築方法を提供している。