このワイヤーの特徴
今どこにいるかが、一目で分かる
ホームから今のページまでの道のりを1行で見せるため、検索から個別のページに直接来た人も、サイトの中での位置をすぐにつかめます。
1つ上の一覧へ、迷わず戻れる
今のページのすぐ左に親の一覧へのリンクがあるため、ほかの製品や記事を見たいときに、メニューを開かずに戻れます。
検索結果にも階層が伝わる
画面のパンくずと同じ階層を構造化データでも出しておくと、検索エンジンにもページの位置が伝わり、検索結果にURLの代わりに階層が表示されることがあります。
制作時のよくある失敗
今のページもリンクにしている
押しても同じページが開き直すだけで、今のページがどれかも分かりにくくなります。
今のページはリンクにせず、aria-current=”page” を付けて示します。
閲覧した順の履歴を並べている
見てきた順に並べると、同じページでも来た道によって表示が変わり、サイトの中の位置が伝わりません。
パンくずは、サイトの階層に合わせて固定します。
区切りの印を文字で入れている
「＞」を文字で入れると、読み上げで「大なり」と読まれることがあります。
区切りは CSS で描き、リストの順番で階層を伝えます。
文字が小さすぎて押しにくい
パンくずを目立たせないために文字や余白を削りすぎると、SPで指が隣のリンクに当たります。
リンクの上下には押せる余白を残します。
よくある質問
パンくずリストは、どのページにも必要ですか?
トップページには不要です。
階層が1段しかない小さなサイトでも、ヘッダーのメニューで現在地が分かれば省けます。
一覧から個別のページへ入る作りのサイトほど、置く意味が大きくなります。
区切りの印は、どれを使えばよいですか?
右向きの山形の印がもっとも広く使われていて、読み手が戸惑いません。
印の種類よりも、読み上げに含めないことと、リンクとの間に十分な余白を取ることが大切です。
構造化データも入れたほうがよいですか?
画面に出しているパンくずと同じ階層を、BreadcrumbList の構造化データでも出しておくのが一般的です。
画面と構造化データで階層が食い違わないように、同じデータから出力します。
