2019/07/11)パンくずリストとは、今見ているページがどの階層にいるのかをわかりやすく伝えるためのリストのことです。英語でパンくずリストを表す「breadcrumbs(ブレッドクラム)」と呼ばれることもあります。「パンくずリスト」と言う名前は、童話「ヘンゼルとグレーテル」で、森で迷わないように目印としてパンくずを置いたことから名付けられたと言われています。パンくずリストの例パンくずリストがどう言うものか知るために、実際のサイトの例を見てみましょう。引用元:食べログページ上部に表示されているリンクのリスト部分がパンくずリストです。パンくずリストとは、このような階層をたどるためのリンクの集まりです。例のように、パンくずリストはユーザーのすぐ目につく場所、基本的にはサイトの上部に設置されていることが多いです。パンくずリストの必要性パンくずリストには2つの重要な役割があります。1つは、サイトの構成をユーザーにわかりやすく伝えるという役割、もう1つは、クローラーにサイトの階層を正しく伝えるという役割です。クローラーとは、googleなどの検索エンジンがサイトの情報収集するために使っているプログラムのことです。ユーザーにわかりやすく伝える役割ユーザーはTOPページにランディングするとは限りません。下層ページに最初にランディングすることのほうが多いです。なると今自分がサイトのどの辺りにいるのかは、直感的には分かりづらい事が多いです。訪問者が最初にアクセスするページをランディングページとよびます。パンくずリストがあることで、自分がどこの階層にいるかすぐに分かりますし、リンクになっているので好きな階層に移動することも出来流ようになります。クローラーにわかりやすく伝える役割パンくずリストが効果を発揮するのは人に対してだけではありません。クローラーもパンくずリストをたどるとで、サイトの構造を正しく把握することが出来ます。パンくずリストによって、ページ間には内部リンクがはりめぐらされます。クローラーにとっては、内部リンクを辿ることでサイト全体にアクセスできるようになるため、取りこぼしなく効率的にインデックスされることにつながるでしょう。同じサイト内のリンクのことを指します。まとめパンくずリストの書き方・使い方パンくずリストの書き方パンくずリストは、リストタグを使って表します。</ol>TOPページWEB全般html入門パンくずリストとは?リストを知っている人にとってはとてもシンプルで、リストタグを使って上の階層から順にリンクを指定していくだけです。リストについては下記記事が参考になります。参考記事HTMLでリストを作ろう!内容によって3種類のリストを使い分けるリストとは箇条書きのことです。「やることリスト」や「好きなフルーツの一覧」などのように、項目が多い内容を伝えたい場合、箇条書きをうまく使うことで普通の文書よりも分かりやすく伝える事ができます。[...]olかulのどちらか迷うところですが、olタグを使うことが多いです。リストの順番に意味があるため、番号付きリストを表すolのほうが適切でしょう。googleのパンくずリストの例でもolタグが使われています。(https://developers.google.com/search/docs/data-types/breadcrumb?hl=ja)現在のページは含めた方が良いか?パンくずリストには、現在のページを含めるパターンとか含めないパターンがあります。現在のページタイトルこの書き方についてはどちらも間違っていないので、どちらを選んでも構いません。最近ではスマホの小さい画面を考慮して、パンくずリストが長くなりすぎないように、現在のページタイトルを含めないパターンが増えてきています。パンくずリストの構造化パンくずリストをサイトに設置する際は、構造化データに対応するのがおすすめです。構造化データとは、クローラーに対しHTMLで書かれている内容が何を意味するのかを伝えるための記号です。構造化データに対応することで、googleの検索結果にリッチスニペットが表示されるというメリットがあります。リッチスニペットとはgoogleの検索結果などはタイトルと文章が並びますよね。このテキストをスニペットと呼びますが、リッチスニペットはこれらがリッチになったものです。パンくずリストを構造化データに対応することで、検索結果にパンくずリストを表示してくれるようになります。パンくずが出ているとそのサイトのおおまかなカテゴリーがわかるため、ユーザーがどのサイトを見るか迷った際に、選ばれる確率が高くなる可能性があります。構造化データに対応するには、決まった書き方があるのでその通りに記述します。記述方式は複数ありますが、。google推奨しているのは「JSON-LD」になるので、そちらの書き方を解説します。https://developers.google.com/search/docs/guides/intro-structured-data?hl=jaJSON-LDの記述方法JSON-LDはjavascriptとして認識されるので、html内のどこに書いても構いません。head内でも問題なく認識されます。杉並区というようなパンくずリストのページの場合、JSON-LDは下記のようになります。</script>ちょっと複雑に見えるかも知れませんが、実は同じことを繰り返し記述しているだけなので、慣れてくるとシンプルです。基本の形は下記のようになります。ここに中身が入ります。</script>ここの部分は、「パンくずリストを構造化データです」と言うことを書いており、定型文のため毎回同じ内容になります。中身を見てみましょう。}このかたまりで一つのアイテムを表しています。ここで記載するのは、何番目かと、URLとタイトルです。@type...タイプを選びます。パンくずの場合はListItemと記載position...パンくずの中の何番目かを記載@id...URLを記載name...パンくずリストに表示される名前を記載このかたまりをパンくずリストの個数分、「半角カンマ」区切りで書いていけば完成です。見複雑そうに見えますが、書いて見るとシンプルなことがわかります。構造化データのテスト構造化データを記述したら、記述方法が間違っていないかテストしましょう。テストしたいページをURLで指定するか、該当部分のコードを貼り付けてテストができます。https://search.google.com/structured-data/testing-tool?hl=jaコードスニペットをクリックこのような画面になるので、コードスニペットを選んでコードを貼り付け、テストを実行をクリックしましょう。パンくずのアイテムが並びます。右上に「エラーなし」「警告なし」となっていればOKです。非常にシンプルですが、最もよく使うパターンのパンくずリストの例です。}TOPページWEB全般html入門パンくずリストとは?li:not(:last-child)::afterという部分が見慣れないかもしれませんが、「>」を最後の要素には表示させないための記述です。:not(:last-child)は、最後の子要素以外という指定になります。::afterを使って最後の子要素以外に擬似要素で「>」を表示しています。まとめパンくずリストとは、今見ているページがどの階層にいるのかをわかりやすく伝えるためのリストのこと本的にはサイトの上部に設置ユーザーおよび、クローラー向けに重要olを使って書く構造化データに対応するとリッチスニペット表示がされるすずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。行間を整える「line-height」(ラインハイト)の使い方html&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。