Webサイトを作っていて中身のコンテンツが増えてくると、目当てのコンテンツがどこにあるか見つけにくくなることがあります。そんなとき、もっとサイト内を見やすく整理したいと思ったことはありませんか?
サイト内を見やすく整理するものに「パンくずリスト」があります。今回はSEO効果も高い、パンくずリストについて紹介します。
知らないと損!パンくずリストの基礎知識
Webサイトを見ていると、サイトの上のほうに「>」などの記号でサイト内の現在地を示したものがあります。
これがパンくずリストです。まず、パンくずリストを基礎から説明します。
パンくずリストとは?
パンくずリストはWebサイト内のコンテンツをカテゴリごとに分けて整理するものです。
これによって、訪れたユーザーは目当てのコンテンツをより簡単に見つけることができ、興味のあるほかのカテゴリにも飛びやすくなります。
パンくずリストは基本的にサイト内の構造を垂直方向で示すものになるため、水平方向で示すものと併用すると良いでしょう。
例えば、
ファッション>レディース>靴>パンプス
というパンくずリストを作ったとします。
これだけでは、靴の下の階層、つまりそのサイトが扱っている靴の種類がパンプス以外に何があるのかわかりません。
こういう場合は、靴というカテゴリの中に「パンプス・ハイヒール・スニーカー」といった水平方向のナビゲーションを作るとサイト内がわかりやすくなります。
パンくずリストの名前の由来
パンくずリストとは変わった名前ですよね。なぜこんな名前なのかご存じですか?
名前の由来は、童話『ヘンゼルとグレーテル』です。童話の中で、主人公の兄弟が森の中で迷わないよう、道にパンくずを落としていくという描写があります。それと同じように、訪れた人がサイト内で迷わないための道しるべとして設置していることから、パンくずリストと呼ばれています。
パンくずリストの種類
パンくずリストには「ロケーションベース」「パスベース」「属性ベース」の3種類があります。
ロケーションベース
ロケーションとは、位置や場所のことです。これは階層によって分けられるパンくずリストのことで、例えば、
日本>関東>東京都>渋谷区
などがそうです。規模が大きく、階層の深いサイトで使われます。
パスベース
パスベースは実際にユーザーが遷移したページの過去の情報(パス)を表示するものです。訪れるユーザーごとに表示されるパンくずリストは違います。
ユーザーのクッキーからデータを取得して表示させる仕組みになっています。Webブラウザやファイルエクスプローラーの「戻るボタン」のように、ユーザーに対して自らがたどった道筋を表示させたい場合に使います。
属性ベース
属性ベースとは、文字通り「男性>20代」などそのページの属性を表すものです。主にサイトの階層が浅くなる場合に使います。
\文字より動画で学びたいあなたへ/
Udemyで講座を探す >なぜ必要?パンくずリストとSEOの関係
サイト内部を見やすくするという要素以外に、パンくずリストの設置には大きなメリットがあります。
それはSEOに有効だということです。それではここで、パンくずリストとSEOの関係について説明します。
パンくずリストのメリット
パンくずリストを設置するメリットは大きく分けて2つあります。
1つめは、ユーザーが迷子にならないことです。
パンくずリストを設置して、トップページからの道順を示すことによってユーザーがトップページからここまでどうやって来たのかがすぐにわかります。
また、Web検索で最初に下の階層のページにたどり着いた人が見ても、サイト全体の構造を理解しやすくなります。
2つめは、内部SEO対策として有効だということです。
パンくずリストを作成・整理することで検索エンジンでの上位表示につながります。SEO対策にはいろいろな方法がありますが、パンくずリストはサイト内の表示に1行程度で済むことを考えると、簡単にできるSEO対策と言えます。
なぜパンくずリストが必要なのか
Googleなど各検索エンジンは「クローラー」と呼ばれるWeb上のデータを収集するプログラムを持っています。このクローラーが各Webサイトを周回し、データを集めることによって検索エンジンが作られています。
検索エンジンのクローラーはWebサイトを発見するとそのサイト内を隅々まで巡回し情報を集めます。つまり、クローラーは最も熱心なユーザーなのです。
パンくずリストが設置してあるサイトは、クローラーにとっても、サイト内の構造を理解しやすいので、巡回しやすくなります。その結果、クローラーは「このWebサイトは優良」と判断し、検索で上位表示されやすくなるのです。
パンくずリストの作り方の基本
最後に、パンくずリストの作り方をお伝えします。
WordPressでの作り方
WordPressでパンくずリストを設置する方法を説明します。WordPressはブログを作る人に人気のプラットフォームです。
テンプレートタグ 例えば、
ファッション>メンズ>シャツ
というパンくずリストをつくりたいとします。今回は1階層のみ、親カテゴリ部分の「ファッション>」の表示のさせ方をお伝えします。
Webサイト内のパンくずリストを表示させたい箇所に下記のようなコードを書くだけでOKです。
<?php $cat=get_the_category(); ?>
<?php echo(get_category_parents($cat[0], true,’ > ‘,false)); ?>
それぞれの記述の意味についてですが、
<?php 〜 ?>は「この記述はPHP言語です」という記述です。
「get_category_parents」というテンプレートタグが、その名の通り親カテゴリを表示する関数で、カテゴリのさまざまな情報を配列というまとまった形で返してくれます。配列の情報には1つずつ順番に番号が振ってあり、最初は0です。
「get_category_parents」関数でカテゴリIDを使うので、ここから情報を取り出してあげます。
次にcatというのはカテゴリ(category)の最初の3文字をとって命名(何でもOKです)した「値を代入する箱」で、そこに一時的に入れてあげます。
カテゴリIDは「get_the_category」の最初、つまり0の位置に入っているので、[0]の値をとってあげます。その状態で「get_category_parents」関数に渡してあげるのです。
「get_category_parents」の後ろのカッコ内が引数(渡してあげる値)で、2つ目のtrueは「カテゴリへのリンクを出力するかしないか」です。しない場合はfalseを入れますが、リンクを出力したほうが使いやすいでしょう。
3つ目の’>‘はパンくずリストを表示するときの区切り文字に「>」を使ってほしいという意味です。
もちろん別のものでも構いません。
>は「”」でくくらないとPHP言語として認識してしまう(エラーになる)ので、「”」でくくることにより、これは文字として使ってほしいとコンピューターに教えてあげます。
4つめのfalseは、「カテゴリ名の代わりにスラッグ(URLの最後の部分を好きな文字列にできる機能)を出力しない」という意味で、出力する場合はtrueです。
そして「これをここに表示します」というPHP言語での記述がechoです。
Microdataでマークアップ
Microdataでマークアップすることで、検索結果表示の画面にもパンくずリストを表示することができます。
これは単純に以下の記述をHTML内に加えるだけです。
<itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
これによってクローラーが「これはパンくずリストなんだ」と認識してくれるようになります。
そして検索結果に表示されるようになるのです。
ページタイトルだけでなくパンくずリストも表示されることにより、検索する人が訪れやすくなるので、ぜひマークアップしておくことをおすすめします。
自社サイトに合わせたパンくずリストの設置を!
パンくずリストはサイト内の小さな表示ですが、その意味と効果は大きなものがあります。ユーザーのことを考えたわかりやすいサイトは、何度も繰り返し訪れたくなるものです。
サイトの質を上げ、SEO対策にもなる、一石二鳥のパンくずリスト。自社サイトに合わせて、最適なパンくずリストを設置しましょう。
最新情報・キャンペーン情報発信中