Webサイト制作におけるパンくずリストの書き方

HTML CSS

Webサイト制作におけるパンくずリストの書き方はいくつかあるが、ベターな書き方を習ったのでまとめておく。

※パンくずリストとは：http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88

ポイントは以下の2点。

  • ページ名とページ名の間は「>」（不等号）を用いる ⇒ 検索エンジンが「>」が使われているとパンくずリストと認識するらしい
  • liタグを用いる場合は、左右のどちらかのページ名と同じliタグ内に「>」も書いてしまう
ベターな書き方

以下、サンプルコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>パンくずリストの書き方</title>
<style>
body, ul, li, p, a {
　margin: 0;
　padding: 0;
}
ul {
　list-style: none;
　margin-left: 10px;
}
p {
  margin-left: 10px;
}
ul li {
　display: inline; /* or float: left; */
}
ul li a {
　margin-right: 7px; /* 「&gt;」と左右のページ名との間隔を調整 */
}
</style>
</head>
<body>
<!-- 書き方1-->
<ul>
<li><a href="page1.html">ページ1</a>&gt;</li> <!-- 「&gt;」は「>」の実体参照文字 -->
<li>ページ2</li>
</ul>
<!-- 書き方2 -->
<p>
<a href="page1.html">ページ1</a>&ensp;&gt;&ensp;ページ2 <!-- 「&ensp;」は半角スペースの実体参照文字 -->

</p>
</body>
</html>

以下、表示結果。

書き方1はaタグにmargin-rightをつけることで「>」と左右のページ名との間隔が均等に見えるように調整している。
また、書き方2については、ページ数が少ない場合にはこのような書き方をしても問題ないとのことで、一つのpタグ内で「>」の左右に半角スペースを置くことで、両ページ名と「>」との間隔が均等に見えるよう調整している。

SEO対策としての効果は弱いらしいが、書くならページ名の繋ぎには「>」を使うのがベターとのこと。

ちなみにページ名の文字と「>」とが縦方向にややズレて見えてしまうことに対して、vertical-alignなどで縦方向を調整するために別のタグで「>」を囲むという方法は、認識される意味が変わってきてしまうため、やらない方がベターとのこと。

（SEO的には）あまりおススメではない書き方

以下は、たまに見かけるがSEO的にはあまりおススメではない書き方のサンプルコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>パンくずリストの書き方</title>
<style>
body, ul, li, p, a {
　margin: 0;
　padding: 0;
}
ul {
　list-style: none;
　margin-left: 10px;
}
ul li {
　display: inline; /* or float: left; */
}
</style>
</head>
<body>
<!-- 書き方3-->
<ul>
<li><a href="page1.html">ページ1</a></li>
<li>&gt;</li>   <!-- 「&gt;」は「>」の実体参照文字 -->
<li>ページ2</li>
</ul>

<!-- 書き方4-->
<ul>
<li><a href="page1.html">ページ1</a></li>
<li>&raquo;</li>  
<li>ページ2</li>
</ul>
</body>
</html>

上記以外には、繋ぎに画像などを用いる方法もしばしば見られる。

SEO的には書き方1、書き方2が好ましいが、見た目（デザイン）を優先させるなら他の書き方でも良いと思われる。