パンくずリストを作成する

パンくずリストを利用する際は、フォルダを利用して、Webサイトのそれぞれのページのファイルをカテゴリーごとに階層構造にしておくとパンくずリストとの構造とディレクトリ構造が一致するのでわかりやすくなるとともに、Webサイトの管理が楽になります。

ページを沢山増やしていくと、サイトのどこにどんな内容のページが存在するか把握できなくなって来るので、ディレクトリで構成することは大切です。わたしは、100ページぐらいで、どんなページがあるか管理できなくなりました。

Webデザイン会社に依頼した場合のように、最初に、すべてのページを作成してから公開する場合、カテゴリーの階層構造は整合性が取れています。一方、少数のページのうちから公開を始め、日々、少しづつページを増やしていく個人が運用するWebサイトでは、カテゴリーの階層構造とファイルの階層構造が、少しづつ破綻していきます。

しかし、

後で、それぞれのページファイルの位置を変更することは、URLが変わるので、その対応に手間がかかりすぎます。

階層や分類を大まかに決め、カテゴリー名に ターゲット・キーワードを使用します。キーワードの内容も階層構造になるように構成することが大切です。

この判断は、検索エンジンが、パンくずリストをカテゴリー分けに利用しているのではないかという推測に由来しています。

１つのページに複数のパンくずリストが存在しても問題ありません。

しかし、検索エンジンは、複数のパンくずリストが存在する場合、最初に登場するパンくずリストを利用することに注意が必要です。

• 複数のパンくずリストを1つのページに設置することはSEOにおいて問題ないか？

パンくずリストのデザインは、特に拘ることろでは、ありません。

一般に、htmlは、olタグ（リストタグ）を利用し、デザインは、cssで指定し、クラスを利用して指定します。

パンくずリストは、それぞれの項目の順序に意味があるため、ulタグではなく、olタグを利用する方が適切です。

htmlの記述スタイルを同じにしておくと、クラス指定のみでデザイン変更できます。

• 最近のWebサイトで見かける、パンくずリストのデザイン・配置・機能のまとめ
• パンくずリストの作り方
• CSSでリストをパンくずリストにする

pタグを使って表現する

	<p class="topicPath">
	<a href="#">Home</a> &gt; 
	<a href="#">Category1</a> &gt;
	<a class="active" href="#">Category1-1</a></p>

連番付きリストを使用して表現する

    <ol class="topic-path">
      <li><a href="#">Home</a></li>
      <li class="active"><a href="#">Category1</a></li>
    </ol>

連番付きリストで表記する場合は、cssの設定が必要です。

クラス名は、breadcrumbか、topic-pathのどちらかが使われることが多いと思います

/* トピックパス */

/* リスト */
ol.topic-path {
  margin-top: 3rem; /* マージン */
  padding: 5px 0 5px 5px; /* パディング */
  background-color: #100386; /* 背景色 */
  font-size: 80%; /* 文字サイズ */
  height: 0.8rem;
  }
  /* リスト項目 */
  ol.topic-path li {
  padding-left: 5px; /* 左パディング */
  display: inline; /* 項目を横並び */
  }
  /* リンクエリア */
  ol.topic-path li a {
  padding-right: 10px; /* 右パディング */
  text-decoration: none;  /* リンクテキストの下線を非表示にする */
  }

  /* リンク色 */
  ol.topic-path li a {
  color: #2396f5;
  }
  /* リンク色（マウスオーバー） */
  ol.topic-path li a:hover {
  color: #23c8fa;
  }
  /* 現在の項目 */
  ol.topic-path li.active a{
    color:  #15eb92;
  }
  ol.topic-path li::after {
    content: "/";
   }

cssを使って、いろいろなデザインのパンくずリストを表現することができます。

• Bootstrap 4のデザインに、フッタとパンくずリストとgoogle検索窓を追加する
• いろんなパンくずリストを画像を使わずに CSS で再現してみた。
• CSSだけでシンプルなデザインのパンくずリストのコード
• デザインの勉強にもなる、CSSで実装するパンくずのまとめ

• schema.orgのパンくずリストをようやくGoogleがサポート開始
• パンくずリストがSEOに有効な理由