パンくず（矢印区切り）
このパーツは、ホーム > カテゴリ > 現在ページ という階層をたどる「パンくずリスト」です。 <nav aria-label="パンくず"> の中に <ol> でリンクを並べ、区切りの矢印は画像ではなく li:not(:last-child)::after の content:"›" で描…
このパーツの使いどころと実装ポイント
このパーツは、ホーム > カテゴリ > 現在ページ という階層をたどる「パンくずリスト」です。<nav aria-label="パンくず"> の中に <ol> でリンクを並べ、区切りの矢印は画像ではなく li:not(:last-child)::after の content:"›" で描いています。区切りを CSS で生成しているため、HTML 側はリンク文言だけで済み、項目を足しても矢印が自動でつくのが特徴です。
向いている場面
ページ階層が深いサイトで現在地を示したい場面に向きます。サービス紹介の下層ページ、記事カテゴリの深いブログやメディア、商品カテゴリが多い EC などです。最後の項目だけリンクにせず <span> にすることで、現在ページであることを明示しています。
カスタマイズの勘所
- 各
<a>に実際のhrefを入れます。サンプルはリンク先が空なので、本番では必ず URL を設定します。 - SEO 面では、見た目のパンくずに加えて
BreadcrumbListの JSON-LD 構造化データを別途<head>等に書くと、検索結果にパンくず表示が出やすくなります。
実装上の注意として、nav に aria-label が付いているので読み上げ環境でナビゲーションとして認識されます。区切り記号は装飾なので、スクリーンリーダーに読まれない ::after で出しているのも理にかなっています。レスポンシブでは flex-wrap により長い階層でも折り返して収まります。
よくある質問
矢印の区切りはどこで設定していますか
HTML には書かれておらず、CSS の li:not(:last-child)::after の content で出しています。最後の項目以外の後ろに自動で記号が付く仕組みなので、項目を増やしても矢印を手で追加する必要はありません。記号を変えたいときはこの content を書き換えます。
検索結果にパンくずを表示させるにはどうしますか
見た目のパンくずだけでは検索結果には反映されにくいため、別途 BreadcrumbList 型の JSON-LD 構造化データをページに記述します。表示しているリンクと同じ階層・URL を書くことで、検索エンジンが正しく階層を理解します。