Last Updated on 9月 16, 2021 by ART TRADING
皆さんはパンくずリストを知っていますか?見慣れない言葉かもしれませんが実はWebサイトを訪問する際に必ずと言って良いほど表記されてあり、ユーザビリティの向上やSEO対策上必要な要素です。この記事ではこの「パンくずリスト」について紹介します。是非参考にしてみてください。
この記事を書いた人
2002年に楽天市場へ出店したことをきっかけに、EC支援サービスの提供をスタート。
累計１８年、１５０社以上のサイト制作、運営経験を持つ。
一部上場企業のECサイトを１０年間運営した経験から、運営全般、フルフィルメントの知見が豊富。
現在は、Shopify Expert Partnerとして、ECサイトの新規出店支援はもちろん、
売上改善や業務改善などのコンサルティングを手掛けている。
Contents
まずパンくずリストとは何かを紹介します。パンくずリストとは、簡単にいうと誘導表示を指し、英語では「breadcrumbs list」のように表現されることがあります。具体的にはサイト訪問者がホームページ上のどこにいるのかを分かりやすくするために利用されます。基本的にはサイト上部箇所に表示されています。
パンくずリストはいらない?メリットについて紹介
今の段階ではパンくずリストを本当にサイトで表示するべきか、もしくは不要なのでは?と考えられる方に、ここではパンくずリストをサイト上に表示するメリットを2点紹介します。
①SEO対策
パンくずリストを表示することで検索エンジンのクローラーがサイト構造を理解しやすくなり、検索エンジンでサイトが上位表示される可能性が高くなります。Googleの公式ガイドリストにもパンくずリストの使用を推奨しているので是非活用しましょう。
②ユーザビリティの向上
Webサイト内でのユーザビリティとは「使いやすさ」を指します。つまりユーザーにとって使いやすいサイトを構築するためにはユーザビリティを高くしなければなりません。サイト内の情報が増えるほど訪問者が求める情報を瞬時に選択することが困難になります。
自分がサイトのどこにいるのか、欲しい情報がどこにあるのかを分かりやすく伝えるためにパンくずリストを利用することが求められます。
パンくずリストの書き方の例
パンくずリストを用いるメリットが分かったところで、次は書き方の例を紹介します。ここでは表示する際に心がけていただきたいポイントが2点あるので是非参考にしてみてください。
①関連性のあるワードを用いてパンくずリストを表示する
関連性のないワードでパンくずリストを表示してしまうと、サイト訪問者が内容を分かりにくく検索結果に悪い影響を与えてしまいます。例えば「スポーツ>サッカー>サッカーシューズ」といったパンくずリストは分かりやすいですが「スポーツ>サッカー>野球」といったパンくずリストはテーマがズレていて分かりにくいです。
訪問者がどういったテーマの下でサイトを訪問しているのかよく考え、関連性を意識して表示するようにしましょう。
②パンくずの中にSEO対策ワードを含める
SEO対策ワードをパンくずリストに含めると検索順位が伸びる場合があります。そのためパンくずリストを考える際には、GoogleAnalytics等を用いてなるべく検索頻度の多いキーワードを選択する必要があります。
ただし先ほども述べたようにサイト上部に表示されるものなので、あまりにキーワードを詰め込み過ぎてしますとかえって不自然な出来栄えになってしまうので注意が必要です。
Javaエディターを用いたパンくずリスト
Javaを用いてパンくずリストを作成することは可能なのかと疑問に思っている方が多いのではないでしょうか?ここではJavaエディターを用いた方法について紹介します。操作上でいくつかポイントがあるので注意しながら参考にしてみて下さい。
パンくずリストを有効にする方法
JavaエディターでAlt+Shift+Bを押すか、ツールバーの「Javaエディターのパンくずリストのトグル」を選択することでJavaエディターを用いてパンくずリストを有効化することが可能です。
パンくずリストでそれぞれ揃えた要素を選ぶ方法
Javaエディターを用いてAlt+Shift+Bを押して右か左の矢印キーを使用するか、パンくずリストをクリックすることでそれぞれ用意した要素を選択することが可能です。
ワークスペース内のその他の要素にナビゲートする方法
それぞれ揃えた要素のいずれか、もしくは矢印の1つをクリックしてドロップダウン・ウィンドウを開く必要があります。ドロップダウンには関連要素が全て表示されているので、関連要素を開くためにクリックします。
キーボードを使用してドロップダウンを開く方法
キーボードを使用する場合は上記の続きで、その要素をクリックし下矢印キーを押すことでドロップダウンを開くことができます。またパンくずリストはJavaパースペクティブでは無効にすることができ、デバッグ・パースペクティブでは有効にすることができます。
WordPressにパンくずリストを設置する方法
WordPressにパンくずリストを設置することでナビゲーションのサポートやUXの拡張ができ、よりSEO改善に役立ちます。今回は大きく2つの方法に分けて紹介するので、是非参考にしてみてください。
パンくずリスト対応テーマを挿入する
実はWordPressのテーマそのものに既にパンくずリストが装着されているケースがほとんどです。数あるWordPressテーマの中でもオススメは『STINGER』です。こちらのテーマは無料で利用可能なので、初めてパンくずリストを使用する方にとっておすすめです。
プラグインでパンくずリストを作成
WordPressではプラグインを利用することでパンくずリストの設置が可能ですWordPress管理画面のプラグイン検索から『Breadcrumb NavXT』と検索することでパンくず作成プラグインの導入が可能です。そこまで出来た場合にパンくずリストの作成が可能です。
WordPressのパンくずリストとは?
WordPressのパンくずリストはそれぞれ属性、履歴、階層の3種類のベースに分類でき、それぞれのベースが異なる場面で力を発揮します。これらがあることで検索エンジンのクローラーがサイト構造を理解しやすくなり評価が上がるというメリットがあるので是非参考にしてみてください。
属性ベース
このベースは主にECサイトで利用されます。サイト訪問者が検索した属性の商品がパンくずリストに表示されることになり現在何のグループに分けられた商品を検索しているのか把握することができます。
履歴ベース
このベースは、主に前のページに戻るためのリンクを表示するために利用されます。何故ならサイト訪問者はページを何度も行き来するので、その動きと連動して元のページに戻るための表示が必要です。この表示があることでUX効果もありサイトの質が上がります。
階層ベース
このベースは先ほど説明した通りサイト訪問者が現時点で、サイト内のどの位置にいるか把握するために必要なパンくずリストです。SEO対策としてページ内の情報量を増やすほど訪問者が構造を分かりにくくなってしまうことがあります。それを防ぐために階層ベースのパンくずリストを表示することは必須です。
まとめ
いかがでしたでしょうか。今回の記事ではパンくずリストについて紹介しました。インターネット普及率が増加したことで、EC化を促進する企業間の競争が激しくなっています。検索エンジンを最適化するために今後もパンくずリストを利用する機会が増えるのではないでしょうか。本記事がパンくずリスト作成を行う上で参考になれば幸いです。
関連記事
・サイト内検索ツールとは？検索ツールの開発方法から検索ができない際の対処法まで徹底解説！
・ランディングページ（LP）とは？売れるランディングページの作り方や構成も徹底解説。
・ファーストビュー（FV）とは？作り方から参考例までわかりやすく解説致します！
ECサイト制作ならアートトレーディング
世界170か国以上のNo.1シェアを誇るグローバルECプラットフォーム「shopify」を導入した自社ECサイト制作をご提案いたします！
当社は、10年以上の実績・100社以上のECサイト構築運用 経験でお客様のお悩みを解決してまいりました。
新規のECサイト制作、既存サイトからの移転・乗り替えだけでなく、運営代行・コンサルティング・在庫連携・物流まで幅広くサポートが可能です。
EC支援といってもお客様の状況はさまざまです。これからECサイトを展開したい、サイトはあるが販売促進のノウハウが欲しい、スタッフが足りなくて人手が欲しい等々…。
現在の状況を分析し、ニーズに合った提案を行い、実践し、ECサイトだけでなくお客様ともども成長していただけるような支援を行います。
