ウェブサイトのパンくずリストとは？
ウェブサイトのパンくずリスト
パンくずリストとは？マークアップと構造化データの作成ツール | We.Inc
パンくずリストとは何か、aria-currentを使ったアクセシブルなHTMLのパターン、GoogleのBreadcrumbListのルールを解説。両方を自動で書く作成ツール付きです。
パンくずリストとは、ページ上部近くにある短いリンクの連なりで、例えば「ホーム > 靴 > ランニングシューズ」のように、そのページがサイト内のどこにあるかを示します。訪問者は1つ上の階層に戻るために使います。BreadcrumbListの構造化データでマークアップすれば、Googleがサイトの階層構造を理解する助けにもなります。
パンくずリストの3つの種類
- 位置（階層）
- ホーム > 靴 > ランニングシューズ
- ショップ、ブログ、ほとんどのサイト
- 属性
- 靴 > サイズ 9 > 青
- 商品一覧で選んだフィルターの表示
- 経路（履歴）
- この訪問者がクリックしてたどったページ
- ほとんど役に立たない。ブラウザーの戻るボタンがすでに同じ役割を果たす
この名前は、童話に出てくるパンくずの道しるべに由来します。ウェブサイトでは補助的なメニューであり、メインのナビゲーションの代わりにはなりません。下では、W3Cによるアクセシブルなパターンと、Googleが読み取る構造化データ、そして自分の階層から両方を書き出す作成ツールを紹介します。
- 作成ツールに階層を入力します。1行に1階層ずつ、ホームページから現在のページまで書きます。
- 各名前の後に縦棒で区切って完全なURLを追加します。最後の行は省略できます。
- HTMLをページのテンプレートに、JSON-LDをページのheadにコピーします。
- サイト全体に展開する前に、Googleのリッチリザルトテストでページを確認します。
- 訪問者がたどった経路ではなく、サイト内でのページの位置を示す階層を表示しましょう。
- 現在のページ以外のすべての項目をリンクにし、現在のページにはaria-current="page"を付けましょう。
- 表示されるパンくずリストと構造化データを同一に保ち、マークアップが実際に見える内容を表すようにしましょう。
- W3Cの例のように区切り記号はCSSで描画し、スクリーンリーダーが矢印の列を読み上げないようにしましょう。
- 小さな画面では、横スクロールさせずに2行に折り返しましょう。
よくある質問
パンくずリストはSEOに効果がありますか？
Googleのパンくずリストに関するドキュメントによると、ページ本文のパンくずリストのマークアップは、そのページの情報を分類するために使われます。また、クローラーに階層を上へたどる内部リンクを増やすことにもなります。それだけで順位が上がる近道ではありません。
GoogleはBreadcrumbListに何を求めていますか？
2つ以上のListItemを含むitemListElement配列です。それぞれにname、1から始まるposition、ページのURLを指定したitemが必要です。最後の項目はitemを省略でき、その場合Googleはそのページ自体のURLを使います。
パンくずリストに現在のページを含めるべきですか？
W3Cのパターンでは、aria-currentをpageに設定した最後のリンクとして含めています。多くのサイトでは代わりにプレーンテキストで表示しています。スクリーンリーダーの利用者がどれが現在の項目かわかれば、どちらでも構いません。
パンくずリストはどの要素で囲むべきですか？
aria-label="Breadcrumb"などのラベルを付けたnav要素で囲み、その中に順序付きリストを置きます。リンクの順番に意味があるため、W3Cの例もまさにその形になっています。
1つのページに複数のパンくずリストを置けますか？
はい。Googleのページでは、2つのカテゴリーからたどれるページに2つのBreadcrumbListを置く例を示しています。マークアップとページを一致させるため、訪問者にも両方の階層を表示しましょう。
アクセシブルなパンくずリストのマークアップ
- WAI-ARIA Authoring Practicesのパターンには3つの要件があります。階層をナビゲーションのランドマークに入れること、そのランドマークにaria-labelかaria-labelledbyでラベルを付けること、現在のページへのリンクにaria-currentをpageで設定することです。MDNでは、aria-currentのpageという値を、パンくずリスト内の現在のドキュメントへのリンクを表すものと説明しています。
- W3Cの例では、リンクを順序付きリストとして構成し、区切り記号をCSSのボーダーで描画しているため、支援技術はページ名だけを読み上げます。
表示と一致する構造化データ
- Schema.orgによると、positionプロパティは項目の順番を再構成するために使われ、小さい数字が先になります。階層の最上位（通常はホームページかメインのカテゴリー）を1から始めましょう。
- JSON-LDはscriptタグに入れる構造化データのブロックで、表示されるHTMLとは別に置けるため、最も追加しやすい形式です。下の作成ツールは、表示用の階層と同じリストからJSON-LDを書き出します。
区切り記号のスタイル
このCSSは、最初の項目を除く各項目の前に小さな山形の記号を描画するため、区切り記号がスクリーンリーダーの読み上げるテキストに入ることはありません。
CSSの区切り記号を使ったパンくずリスト
名前を編集して試してみてください。山形の記号はHTML内の文字ではなく、::beforeのルールで描画しています。
パンくずリスト作成ツール
階層を1行に1つずつ入力：名前 | 完全なURL
プレビュー
HTML
JSON-LD構造化データ
コピー
コピーしました
GoogleはBreadcrumbListに2つ以上の項目を求めています。階層をもう1つ追加してください。
{n}行目にURLがありません。省略できるのは最後の項目だけです。
入力内容からブラウザー内で作成しています。何もアップロードされません。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る