サイト・ブログで必須とも言える「パンくずリスト(breadcrumbs)」を正しく理解した上で設置していますか?
まず検索ユーザーは必ずしもトップページからランディングするわけではなく、様々な下層ページ・個別ページからも流入してきます。
“パンくずリスト”は、その検索結果に表示されるタイトルやdescription、さらに構造化データを用いたことで表示されるカテゴリ名によってクリック率にも影響する重要な要素のひとつです。
そのため、ユーザービリティといった意味で役立つもので、わかりやすいカテゴライズも当然必要となってきますし、あまりにも複雑化してしまうと…そもそもサイト内でユーザーが迷ってしまう・数クリックで閲覧したい目的のページへ辿り着けない…といった状況に陥ってしまいますのでサイト構造をよく練った上でカテゴリ・パンくずリストを用意する必要があります。
また、こういったユーザビリティ以外にも、パンくずリストは当然内部リンクにもなりますから、SEOやクローラビリティにも役立ち、その先にどういったコンテンツが存在するのか?何が書かれているのかといったことをクローラーにわかりやすく伝えることにもなります。
そういった意味では、検索結果に表示されているタイトルやdescription、または構造化データなども参考に一旦サイト内へ遷移したユーザーに対して、必ずしもページ上部にパンくずリストを表示させておく必要もなく、最近ではページ下部にパンくずリストを設置しているWordPressのテーマなんかも目にします。
ちなみに、構造化データをJSON-LDで記述する場合は各htmlにタグを付与する必要がありません(スクリプトのように記述するもので、ページ内のどこでも良い)ので、この場合は内部リンクとして設置しておきたい要素となります。
では、今回は内部対策としての基本のひとつ“パンくずリスト”について意味や設置方法などご詳しくご説明していきたいと思います。
目次
パンくずリストとは?
まず“パンくずリストとは”とは、その名の通りサイト内の現在地を的確に示すもので、ページに訪れた際にカテゴリ名から内容をある程度把握するためのユーザビリティに効果的な要素となり、下記の通り“パンくず”が由来となっています。
童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
ただ、先ほどもご説明した通り検索ユーザーは検索結果画面からどのページに的確な答えが記載されているのかをじっくりと選んで訪問します。
その際、ヒントとなるのが以下の各要素となり、構造化データによるパンくずリストもCTRに影響するため、時によっては非常に需要なポイントにもなり得ます。
- ページタイトル
- meta description
- パンくずリスト
- その他リッチスニペット
このように、閲覧ユーザーはなんらかの目的があって検索行動をしているため、検索結果に表示される文言は全てクリックを誘導させるために蔑ろにはできない要素で、当然パンくずリストもそのページが含まれるカテゴリが表示されるため、わかりやすく・正しく設置しておきたいところです。
そのため、パンくずリストはサイトに流入した時点では現在地の確認といった意味合いもありますが、内部リンクとしての要素の方が重要性としては高く、構造化データを用いた正しい方法はもちろん、キーワードを含む適切なカテゴリ名にすることが重要で、検索結果にしっかりとパンくずリストを表示させるべきということです。
パンくずリストの種類
主にパンくずリストには位置型・属性型・パス型の3パターンがあり、一般的に知られているのは検索ユーザーがランディングしたページや階層を意味する位置型のパンくずリストとなります。
他の属性型とはページの位置を示すというよりもどのカテゴリーに属しているのかを表示するパンくずリストで、ユーザーが他のカテゴリーを見たい時に便利な仕様となっており、一方のパス型とは単純に経路を示すパンくずリストで、サイト内を回遊する度に変化することから最近ではあまり使用されていません。
パンくずリストのメリット
次に、このパンくずリストを設置するメリットととしては、主に“ユーザビリティ”と“クローラビリティ”の2点が考えられます。
そして、実際に表示される場所も主に以下2箇所となっていて、検索ユーザーとクローラーともに利便性が高く、内部対策のひとつとしてぜひ行っておきたい要素となります。
- 検索結果(構造化データ利用時)
- 実際のページ内(多くの場合ページ上部)
このようにサイト・ブログは、ユーザーに役立つ情報をコンテンツ化するだけでなく使いやすさ・わかりやすさといった利便性にも考慮する必要があり、それは単純にユーザーに対してもそうですし、何よりページを評価するために情報収集しているクローラーのためでもあります。
検索エンジンに正しくコンテンツの内容を伝えることができなければ検索順位も思うように上昇しないため、ユーザーファーストとは言っても、それを掲げるGoogleに評価・認識されなければいけません。
そのため、カテゴリ名を“その他”などにしている場合は非常にもったいない状態とも言え、ユーザー・クローラーともにその先にどういったコンテンツが存在するのかわかりませんし、興味を持たれることもないでしょう。
つまりパンくずリストが持つメリットを最大限に活かすためにも、コンテンツ内容の主従関係や今後の運用を考慮した上でカテゴライズし、適切なキーワードでカテゴリを構築していくことが重要だということです。(場合によってはタグも利用してコンテンツをうまくまとめていきましょう。)
ユーザビリティ
ではまず、ユーザビリティについてのメリットを考えてみたいと思います。
これは先ほどもご説明した通り構造化データを利用してパンくずリストを設置した際、検索結果にも下記のようにカテゴリ名が表示されるため、どういった内容の記事がそこに書かれているのか?より一層明確化され、CTR(クリック率)に良い影響を及ぼすことが考えられます。
ちなみに、パンくずリスト以外でクリック率を改善する方法については「CTR(クリック率)改善でトラフィックを増加させる方法」にも書いたように、ページタイトルとmeta descriptionを再考してみるのが早いと思われます。
しかし、ページタイトルの変更は検索順位にも大きく影響するため、慎重に行いましょう。
また、今回はパンくずリストを中心にご説明していますが、他にも構造化データによって追加できるようなリッチスニペットがあれば記述して、検索結果の画面でご自身のページを大きくアピールしましょう。
そしてユーザビリティといった意味では、実際ページに訪問した際に表示されるパンくずリストも内部リンクとなるため、同じカテゴリで情報収集している方にとっても利便性に期待できるかもしれません。
ただ、そこはグローバルメニューやコンテンツ内に設置した内部リンクの方で気を使うべきでしょう。
というのも…ページに遷移したということは、検索ユーザーが検索結果画面に表示されているページの中から目的の内容・コンテンツであると判断したことに違いありませんから、とりあえずは読み進めてもらうことが重要で、この場合ページ上部に設置したパンくずリストはそこまで重要ではありません。
※もし構造化データを使用していない場合だと検索結果にカテゴリが表示されないため、現在地の確認としてはわかりやすい指標となるでしょう。
クローラビリティ
続いて、パンくずリストはユーザビリティだけでなく、Googleのデータベースにインデックスするためのクローラーに対しても良い影響を及ぼします。
まずクローラーは文字やタグを情報として処理し、そこに何が書かれているのか?何に対しての説明なのか?といったコンテンツ内容をクロールすることによって理解します。
そしてその情報を元に、検索クエリに対する適切なページをランキング形式で検索結果に反映させているわけです。(画像よりもテキストベースでサイトを構築するべきというのは、こういった理由があるからです。)
そのため、このパンくずリストに設置したリンクを辿ることによって、クローラーはリンク先にあるコンテンツを理解しやすくなり、先ほどもご説明した通り適切なカテゴライズによるカテゴリ名にすることが非常に重要となります。
サイト・ブログを管理していて、後になればなるほどカテゴリ名の変更といった大幅なサイト構造の再構築はアクセスにも大きく影響する可能性があるので注意しましょう。(もちろん適切なカテゴリに修正することで大幅にアクセスが伸びる可能性はあります。)
内部リンクになる
このパンくずリストのメリットは主に上記に挙げた2点ですが、クローラビリティと若干重複するものの…内部リンクになるというメリットも考えられます。
ただ、最近ではカテゴリやタグページ(特にタグページ)を“noindex”扱いにするサイトやブログも非常に多く、そもそもパンくずリストの内部リンクそのものが劇的に順位に大きく影響する要素というわけでもないため、そこまでSEOにこだわって対策キーワードを詰め込むといったカテゴリ名の選定はむしろ検索ユーザーにとって利便性が低くなってしまいます。
あくまでカテゴリの上下・相互関係をよく考慮し、どうしてもまとめきれない別からの視点でカテゴライズが必要な場合はタグをうまく利用するようにしましょう。それはそれで検索ユーザーにとって価値があれば正しくインデックスさせることによって上位化に成功すると思われます。
このように、カテゴリページやタグページをインデックスさせるのであれば、パンくずリストも内部リンクとしてわずかながら効果が期待できるというもので、この辺りを考慮するとパンくずリストは必ずしもページ上部になければいけない、というわけではないことがわかります。
また、インデックスさせないように“noindex,follow”を記述しても、いずれ価値のないページと判断しそのページを辿らなくなるため、カテゴリページをしっかりとインデックスさせる場合に内部リンクとして重要視すると良いでしょう。
参考:English Google Webmaster Central office-hours hangout
パンくずリストの作り方
では、続いて“パンくずリスト”の作り方についてです。
これはいくつかのサイトを参考にしてみるとわかるように、トップページ(ホーム)を元に現在閲覧しているページまでのカテゴリをアンカーリンクで表示します。
ここでは具体的なタグの記述方法については割愛しますが、リスト(li)などのタグを使い、カテゴリ同士の間にわかりやすく矢印のアイコンなどを挟み、メインコンテンツの邪魔にならない程度に設置しましょう。
また、このパンくずリストに現在閲覧中のページタイトルを含むかどうか(リンクを付与も含めて)については非常に悩むところかと思いますが、この辺りはユーザーに対して前のカテゴリがあると誤解されない自然な表示を心がけると良いでしょう。
- 最終的に含まれるカテゴリまでを表示
- 閲覧中のページタイトルまでを表示
- 閲覧中のページにリンクを含んで表示する(誤クリックに注意)
そして、あくまでWebページのメインはコンテンツとなる本文です。
そこまで目立たせる必要もありませんので、重要なコンテンツを優先して見せるために自然な形で設置することが大切です。
構造化データを使用する
次に、上記でご説明した通り、検索結果にカテゴリを表示させるためには、設置したパンくずリストにそれぞれ意味を持たせるメタタグの付与によって構造化していく必要があります。
そもそもWebページは様々なタグを使用してページを構築していくかと思われますが、それぞれのタグは意味を持っています。
例えばh1タグに記述されたテキストなら、検索エンジンは重要な見出しタグだと認識できますし、<p>タグなら本文、<strong>なら強調しているということなどを理解します。(装飾だけの目的で適当なタグを利用しないというのは、こういった理由があるためです。)
しかし、検索エンジンはテキストを理解できても、それが一体何を意味する単語なのか?詳細に知ることができません。
そこで構造化データと呼ばれるメタタグを適宜追加することによって、テキストに意味を持たせることができ、どういった内容がそこに書かれているのか理解しやすくなるというものです。(こういったわかりやすいページの構築をセマンティックウェブと呼びます。)
また、このメタデータは主に“schema.org”で定義されているボキャブラリーといったメタタグを使用し、以下のシンタックスと呼ばれる記述方法によってページを構造化データに対応していきます。
- Microdata
- RDFa
- JSON-LD
中でも以前は各htmlにメタタグを付与する“Microdata”が主流でしたが、現在はスクリプトのようにページ内のどこに記述しても構造化データとして認識させることのできる“JSON-LD”をGoogleは推奨しているようで、htmlを複雑化することなく構造化データに対応できるため、取り入れているサイト・ブログも多いのではないでしょうか?
構造化データでパンくずリストを記述する方法
記述方法については、現在主流のボキャブラリー“schema.org”の“パンくずリスト”に該当するページ“https://schema.org/BreadcrumbList”にもサンプル(シンタックス3種)が記載されているので、参考にしてみてください。
例えば、下記の例で言うと…まずolタグがひとかたまりであることを“itemscope”の付与によって意味付けされ、何についてのデータなのかを“http://schema.org”から探して、そのurlを「itemtype=”(url)”」の形で記述します。
次に“itemprop”を使用してそこに何が書かれているのかを指定します。
この場合だと“https://schema.org/BreadcrumbList”から該当するプロパティを探します。(この場合“itemListElement”)
さらに続いてolタグの中に存在するliタグを「itemscope itemtype=”http://schema.org/ListItem”」によって意味付けていき、aタグとspanタグそれぞれに「itemprop=”(該当するプロパティ)”」を追加記述していきます。
最後にパンくずリストの順番を「<meta itemprop=”position” content=”1″ />」といった記述方法によってタグ付けしていきます。
<ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://example.com/dresses"> <span itemprop="name">Dresses</span></a> <meta itemprop="position" content="1" /> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://example.com/dresses/real"> <span itemprop="name">Real Dresses</span></a> <meta itemprop="position" content="2" /> </li> </ol>
それによって見た目としてはなんら変わりありませんが、タグを見てわかるように逐一そこに書かれているものの意味がタグ付けされています。
この辺りは少し複雑なので、主要のボキャブラリーとして使用されている“schema.org”に記載されているサンプルを参考に記述してみると良いかもしれません。
参考:構造化データ テストツール
プラグインを利用する
上記のように手作業でパンくずリストを構造化データにする方法以外に、WordPressをお使いの場合だとプラグインを利用する方法も考えられます。
しかし、最近では多くのテンプレート(テーマ)に“パンくずリスト”以外にも本文などページ内のあらゆる箇所が構造化データとして実装済みのものも多いため、上記のツールで対応済みかどうかチェックしてみると、どういった項目が構造化データとして認識されているのかがわかります。
そのため、現状のテーマが構造化データに対応していないのであれば、テーマの変更やプラグインを利用してみるのもひとつの手です。(構造化データによるSEO効果はそこまで期待できませんが、検索エンジンが理解しやすくなるという点で言うと間接的に効果的と言えるのかもしれません。)
パンくずリストの注意点
この“パンくずリスト”で注意したいのは、テキストで記載するという点です。
というのも…画像を使用したパンくずリストによっても構造化データに対応することが可能ですが、そもそも検索エンジンは文字やタグを情報として読み取ってクロールしていくため、単純に画像よりもテキストの方が理解しやすいということが挙げられます。
特に内部リンクとしての効果を最大限に活かしたいのであれば、画像にaltを記述する方法もありますが、最近のスマホ対応を考慮してテキストで設置しておきたい要素と言えるでしょう。(管理やカスタマイズといった意味で)
また、カテゴリとして簡潔にわかりやすくまとめるためにもテーマを絞り、ある程度記事を量産することも大切で、階層があまりにも複雑化してしまうような場合だと、そのカテゴリに一致する記事が数記事しかない…といった状態にも陥ってしまいます。
あくまでユーザーが探しやすい・見つけやすいといった利便性を考慮した上でカテゴリを設定するようにしましょう。その目印となるのがこの“パンくずリスト”です。
ちなみに、カテゴリ自体が複数に渡って属するケースも考えられるかと思います。こういった場合は“パンくずリスト”も複数設置しても構いませんが、最初に記述したパンくずリストを採用するというのが定説となっています。
ただ、しっかりと考え抜かれたカテゴライズだとそういったことは稀なケースと思われ、場合によってはタグをうまく利用して記事をグルーピングしていくと良いでしょう。(この場合は重複などを考慮した上で場合によっては“noindex”を付与して管理を行います。)
設置場所について
最後に、パンくずリストの設置場所については、先ほどもご説明した通り必ずしもページ上部に表示しなければいけないわけではありません。
というのも、パンくずリストはページ遷移する以前の構造化データによって表示させるカテゴリ名といった意味もあり、ページ遷移してしまえばそこまで重要度も低く、むしろ自然検索ではなく別の方法で訪問した際にサイト内の現在地を確認するために必要なのかもしれません。
どちらにしても、重要なのはコンテンツですので特にパンくずリストを目立たせる必要もなく、内部リンクを考慮してページ下部に設置しているテーマも見かけるのはこういったことが考えられます。
まとめ
今回はサイト内の現在地を意味する“パンくずリスト”について、設置方法や内部リンクの効果などを詳しくご説明しました。
さらにこのパンくずリストは“構造化データ”を用いて設置することによって検索結果にも表示・反映され、検索ユーザーに対してどういったカテゴリの記事なのか?瞬時に伝えることができます。
そういったユーザビリティ以外にもクローラーに内容を伝えやすくなる要素でもあり、セマンティックウェブを考えるには欠かせない内部施策のひとつと言えます。
実際の検索結果をチェックしてみて、カテゴリ名がしっかりと表示されているかどうか?ツールなども合わせて一度確認してみると良いでしょう。
「キーワードファインダー」
キーワード選定でお悩みですか?
「キーワードファインダー」なら、検索ボリュームから順位チェック、関連語や新しいキーワードの発見など、アクセスを伸ばすために重要なキーワード選定を自動取得、一括管理が可能!
また、自動取得したキーワードは、ご自身のサイトだけでなく競合の順位も取得します。この整理された情報を元にあなたの集客経路の拡大にお役立てください!
関連記事
検索順位を改善するには正しいSEOの知識が必要です