パンくずリストとは、ホームページを閲覧しているユーザーが自分がいま閲覧しているページを理解しやすくなる目印となるものです。
これは童話「ヘンゼルとグレーテル」で、ヘンゼルが森の中で道に迷わないようにパンくずを道しるべに落としていった物語が名前の由来となっています。
パンくずリストの役割
-
ユーザーナビゲーションの向上
パンくずリストは、ユーザーが現在のページがサイト内のどの位置にあるのかを一目で把握できるようにします。
これにより、ユーザーは他の関連ページや上位ページに簡単にアクセスできます。
-
SEO対策
パンくずリストを正しく設置することで、検索エンジンに対してサイトの構造を明確に示すことができます。
これにより、サイト全体のインデックス化が促進され、検索エンジンでの上位表示が期待できます。
具体的な例
パンくずリストは、通常次のように表示されます。
ホーム > キャスト一覧 > キャスト詳細 > 対象キャストの口コミ
このような形で、ユーザーは現在のページが「ホーム」から始まり、「キャスト一覧」を経て「キャスト詳細」内の「口コミ」ページにあることを一目で理解できます。
設置方法
-
CMSのプラグイン利用
多くのコンテンツ管理システム（CMS）には、パンくずリストを自動生成するプラグインが用意されています。
これを利用することで簡単に設定が可能です。
-
手動での設置
ウェブサイトの各ページにパンくずリストのHTMLコードを手動で追加する方法もあります。
この場合、サイトの構造に応じてコードを適切に記述する必要があります。
パンくずリストのHTML例
以下は、簡単なパンくずリストのHTMLコード例です
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">ホーム</a></li>
<li class="breadcrumb-item"><a href="/category">キャスト一覧</a></li>
<li class="breadcrumb-item"><a href="/category/electronics">キャスト詳細</a></li>
<li class="breadcrumb-item active" aria-current="page">口コミ</li>
</ol>
</nav>
【まとめ】
パンくずリストはユーザーの利便性を向上させるとともに、SEO対策としても効果的な重要なナビゲーションツールです。
正しく設置することで、ユーザーがサイト内をスムーズに移動できるようになるだけでなく、検索エンジンでの上位表示も期待できます。
電話をする