パンくずリスト, 確認方法を初心者向けに詳しく解説します

2025 10/27

2025/10/27

はじめに

Webサイトにパンくずリスト（Breadcrumbs）を設置すると、訪問者が今いるページの位置を把握しやすくなり、サイト内の回遊性が向上します。本記事は、設置後にパンくずリストが正しく表示され、検索エンジンにも適切に認識されているかを確認する方法を分かりやすく説明します。

目的

Webサイトのユーザビリティを改善する
検索エンジンに正しく構造を伝える
問題があれば早めに対処する

対象読者

自分でサイトを運営している人
SEOやアクセス改善に関心がある人
制作会社とやり取りをする担当者

この章でのポイント

パンくずリスト確認の重要性を理解する
以降の章で実際の手順とチェックリストを順に確認できる

これから、具体的な設置方法や確認手順を丁寧に解説していきます。初心者の方でも進められるよう、手順はできるだけ実例ベースで紹介します。

パンくずリストとは何か

定義

パンくずリストは、Webサイト内で自分がどこにいるかを示す簡単なナビゲーションです。多くの場合「トップ > カテゴリ > 商品名」のように表示され、現在のページがサイト全体のどの位置にあるかを一目で分かるようにします。

種類と具体例

階層ベース（典型例）: トップ > サービス > 商品詳細 — サイトの階層構造をそのまま示します。
カテゴリーベース: トップ > ブログ > 料理 > レシピ — 記事や商品が属するカテゴリーを示します。
パス型（履歴型）: トップ > 検索結果 > ページ2 > 商品 — ユーザーが辿った経路を示すことがあります。

利点

ユーザーが現在位置を把握しやすくなります。
上位ページへ簡単に戻れるため操作が楽になります。
内部リンクが増え、クローラーが巡回しやすくなる利点もあります。

実装上のポイント

表示は簡潔にし、リンクテキストは分かりやすくします。
一貫した階層設計を心がけます。
モバイルでは省略や折りたたみを検討すると見やすくなります。

パンくずリストの設置方法（概要）

CMS（例：WordPress）での設置

プラグインを使うと手順が短くなります。代表例は『Yoast SEO』『Breadcrumb NavXT』などです。プラグインをインストールして有効化し、表示位置（ウィジェット・ショートコード・テーマ内）を設定します。テーマによっては最初から対応している場合もあります。

手動での設置（基本のHTML）

基本はnav、ol、li、aタグで構成します。アクセシビリティのためにnavにaria-label=”breadcrumb”を付け、現在のページはaria-current=”page”を付けます。

例：

実装時のポイント

表示位置はページ上部が一般的です。視認性を優先してください。リンク先を正しく設定し、パンくずが階層を正しく反映しているか確認します。モバイル表示で崩れないようCSSで調整してください。

構造化データ（任意）

検索エンジンにわかりやすくするため、JSON-LDでマークアップを追加できます。必須ではありませんが、表示が改善する場合があります。

パンくずリストの確認方法

パンくずリストは見た目と構造の両面で確認します。ここでは具体的な手順と注意点を分かりやすく説明します。

1. 見た目（表示）の確認

代表的なページ（カテゴリページ・詳細ページなど）をブラウザで開きます。
ファーストビュー直下など一般的な設置位置に表示されているか確認します。
階層の順番とページ名が正しいか、区切り記号（> や / など）が分かりやすいかをチェックします。
最終項目がリンクになっているかどうかを確認します（ユーザー体験を考えて決めます）。
モバイル表示でも崩れていないか、表示が重なっていないかを確認します。

2. 構造化データの確認（SEO視点）

GoogleのリッチリザルトテストでURLかHTMLを入力して検証します。
テスト結果に「認識可能なパンくずリスト」やBreadcrumbList型が表示されるか確認します。
JSON-LDの場合はListItemのposition,name,itemが正しく記述されているかを見ます。エラーや警告が出たら修正します。
マイクロデータやRDFaで実装している場合も同様に検証します。

3. サイト内部の確認ポイント

すべての該当ページにパンくずリストが設置されているか一覧で確認します。
階層の順序が一貫しているか、重複や飛び級がないかをチェックします。
リンク切れがないか、実際にクリックして遷移先を確認します。
最終階層のリンク有無は方針を統一します（非リンクにするなら全ページで統一すると親切です）。

これらを定期的に確認すれば、見た目の使いやすさと検索エンジンからの認識の両方を保てます。

実際の確認手順（まとめ）

手順1：ページを開いて目視で確認

ブラウザで対象ページを開き、パンくずが見えているか確認します。階層表示（トップ > カテゴリ > ページ）が正しいか、各項目がリンクになっているか、区切り記号や見た目に違和感がないかをチェックします。スマホ表示も必ず確認してください。

手順2：HTMLソースで構造化データを確認

ページのソース（Ctrl+Uや検証ツール）を開き、JSON-LD（）やMicrodataがあるか探します。JSON-LDなら”@type”:”BreadcrumbList”やitemListElementにposition/name/itemがあるかを確認します。リンク先URLが正しいか、positionが連番になっているかも見てください。

手順3：Googleのリッチリザルトテストで検証

GoogleのリッチリザルトテストにURLかHTMLを貼り付けて実行します。結果で「Breadcrumb」が検出され、エラーや警告がないか確認します。エラーが出たら該当行を修正して再検証します。

手順4：サイト内の他ページを巡回して確認

カテゴリ、商品、記事など代表的なページを複数選び、同様に①〜③の手順でチェックします。テンプレートの違いで抜けがないかを確認します。

簡単チェックリスト

表示とリンクの動作確認
JSON-LDまたはMicrodataの存在
GoogleテストでBreadcrumbが検出される
複数ページで一貫して機能する

以上を順に行うと、パンくずリストが正しく機能しているか確実に把握できます。

注意点とSEO効果

SEO面でのメリット

パンくずリストは検索エンジンにサイト構造を伝えやすくします。検索結果で「サイト名 > カテゴリ > 記事名」のように表示されると、視認性が上がりクリック率（CTR）が改善しやすいです。構造化データ（schema.orgのBreadcrumbList）を正しく付けると、リッチリザルトとして反映されやすくなります。