初心者でもわかるパンくずリストと実装の基本解説

2025 11/28

2025/11/28

はじめに

本記事の目的

本記事は、Webサイトにパンくずリスト（ナビゲーション補助）を分かりやすく実装する方法を解説します。具体的な手順をStudio、WordPress、HTMLの各環境ごとに示し、最後に検索エンジン向けの構造化データの重要性も説明します。初心者でも実行できるように、手順は丁寧に説明します。

読者対象

自分でサイトを作っている個人や小規模事業者
サイトの見やすさやSEOを改善したい担当者
制作を外注する前に基本を知りたい人

パンくずリストの役割

パンくずリストは、現在のページがサイト内でどこにあるかを示す道しるべです。訪問者が迷わず移動できるだけでなく、検索エンジンもサイト構造を理解しやすくなります。結果としてユーザー体験が向上し、間接的に検索順位改善につながることがあります。

本記事で学べること

各プラットフォームでの具体的な実装手順
見やすさを高める表示上のポイント
構造化データの基本と設定方法

次章から順に、具体的な手順を丁寧に説明します。

パンくずリストとは

定義

パンくずリストは、サイト内の現在位置を示すナビゲーション要素です。一般に「ホーム > カテゴリ名 > ページタイトル」の形式で表示し、ユーザーが今どの階層にいるか直感的に把握できます。

利点

迷子になりにくく、サイト内の移動が楽になります。
ページの文脈を示すので目的の情報にたどり着きやすくなります。
検索エンジンも階層構造を理解しやすくなるため、SEOに有利です。

主な種類（分かりやすく）

階層型：ページの親子関係を示す一般的な形式。
属性型：商品カテゴリーや条件で位置を示す場合に使います。

実例と注意点

例：ホーム > 商品一覧 > レディース > シューズ
– 最初は必ずホームを置く。区切りは「>」など視認性の高い記号を使います。
– 現在のページ（最後の項目）は非リンクにするのが一般的です。
– 名前は短く分かりやすくし、ユーザーが期待する語を使います。
– 検索結果での表示を良くするため、構造化データの併用を検討します。

これらを守ると、ユーザーにも検索エンジンにも優しい導線になります。

Studioでの実装方法

準備

Studioで作業する前に、該当のテンプレート（投稿ページやカテゴリページ）を開きます。CMSの項目名（例：カテゴリ名、ページタイトル）を確認しておくと作業がスムーズです。

1. ホーム（第一階層）の設定

テキストとアイコンを配置し、テキストに「HOME」と入力します。該当要素にトップページへのリンクを設定してください。視覚的には斜線などで区切りを入れると分かりやすくなります。

2. カテゴリ名（第二階層）の設定

テキストとアイコンを置き、テキストをCMSのカテゴリフィールドに紐付けます。カテゴリ名はCMS側で変更すると自動で更新されます。固定テキストにしない点が重要です。

3. 記事タイトル（第三階層）の設定

テキスト要素のみを配置し、ページタイトル（動的フィールド）を表示させます。タイトルはクリック不可にして現在位置を示す表示（aria-current=”page”など）を付けると親切です。

4. 構造化データの設定

テンプレートでJSON-LDを作成し、ページ設定パネルの「構造化データマークアップ」をONにして貼り付けます。例としてbreadcrumb用の簡単なJSON-LDをテンプレート変数で出力すると、各ページで正しい階層が反映されます。

チェックポイント

プレビューで各階層が正しく表示されるか確認し、リンク先と動的表示が意図どおりか必ず検証してください。

WordPressでの実装方法

概要

WordPressでのパンくずリスト実装は主に3通りあります。1) プラグイン利用、2) header.phpなどにHTMLを直接追加、3) functions.phpに関数を作って呼び出す方法です。用途やメンテナンス性に応じて選びます。

1. プラグイン使用（例：Breadcrumb NavXT）

手順：プラグインをインストール→有効化→設定で表示項目を調整します。テンプレートに挿入する場合は、shortcodeやPHP関数を使います。例：if ( function_exists('bcn_display') ) { bcn_display(); }。設定画面で区切り文字や階層表示を変えられます。

2. header.phpなどにHTMLを追加

編集場所：header.phpやsingle.phpなど、表示したいテンプレートファイル。シンプルなHTML例：<nav aria-label="breadcrumb"><a href="/">ホーム</a> > <span>現在のページ</span></nav>。静的なサイト構造向けで手早く導入できます。

3. functions.phpに関数を追加して呼び出す

functions.phpに独自のbreadcrumb()関数を作り、テンプレートで<?php breadcrumb(); ?>と呼び出します。関数内でホームリンク、親ページやカテゴリ、投稿タイトルを順に出力します。動的な階層取得はWordPressの関数（is_single, get_the_category, get_post_ancestorsなど）を使います。

実装時の注意点

レスポンシブとアクセシビリティ（aria-label）を確認してください。
キャッシュプラグインを使う場合は更新後にキャッシュをクリアしてください。
構造化データは第6章で詳しく扱います。

HTMLでの実装方法

基本構造

HTMLでパンくずを作るときは、navでナビ全体を囲み、olで順序を示します。各階層はliで表し、リンクがある箇所はaでつなぎます。わかりやすさと構造が重要です。

実装手順

navタグを書く（aria-labelで役割を明示）。
olタグで順序付きリストを作成。
各階層をliで追加。
その階層にリンクがある場合はaでリンクを設定。

具体的にはトップ→カテゴリ→記事の順でliを並べます。現在のページはリンクにせずテキストで示すと利用者に親切です。

実例コード

<nav aria-label="パンくずリスト">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/category/">カテゴリ名</a></li>
    <li>記事タイトル</li>
  </ol>
</nav>

アクセシビリティとSEOのポイント

navにaria-labelを使い、スクリーンリーダーに説明します。
olで順序を示すと検索エンジンも理解しやすくなります。
リンクテキストは短く具体的に書きます（例: “カテゴリ名”）。

注意点

同じページを示すリンクを重複して置かない。現在ページは通常テキストにする。

構造化データの重要性

構造化データとは

構造化データは検索エンジンにページの意味を伝えるための規格です。パンくずリストではBreadcrumbList型を使い、各階層をListItemとして明確に示します。これにより検索結果でリッチリザルトに表示されやすくなります。

なぜ重要か

パンくずを見た目で設置するだけでは、検索エンジンが階層を正確に理解できないことがあります。構造化データを設定すると、検索結果でパス表示されやすくなり、クリック率（CTR）向上やサイト内の理解度向上につながります。

実装例（JSON-LD）

下記は基本的な例です。ListItemごとにposition、name、item（URL）を必ず入れてください。

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "ホーム", "item": "https://example.com/"},
    {"@type": "ListItem", "position": 2, "name": "カテゴリ", "item": "https://example.com/category/"},
    {"@type": "ListItem", "position": 3, "name": "記事タイトル", "item": "https://example.com/category/post"}
  ]
}