低価格、短納期、高品質なWebサイト制作|ScuderiaWeb

リストタグでパンくずを作る

SEOにおいて、リストタグで箇条書きにされたキーワードは、pタグなどで囲まれたキーワードよりも重みがあると検索エンジンが認識するといわれていて、メニューやパンくずをリストタグで書くWebサイト制作者は少なくありません。
例えば、このページは、「XHTML+CSS Webサイト制作Tips」の中の「(X)HTML+CSS Tips」の中にある1つのページです。つまり、入れ子になっているということです。パンくずは1行で書くことがほとんどですが、リストタグはきちんと階層化しておく必要があります。

サンプル

リストタグでパンくずを作るサンプル（別ウィンドウで表示）

コード

(X)HTML

<ul id="topicPath">
	<li><a href="/">Home</a>
	&nbsp;&raquo;&nbsp;
		<ul><li><a href="/tips/">XHTML+CSS Webサイト制作Tips</a>
		&nbsp;&raquo;&nbsp;
			<ul><li><a href="/tips/xhtml_css/">(X)HTML+CSS Tips</a>
			&nbsp;&raquo;&nbsp;
				<ul><li><em>リストタグでパンくずを作る</em></li></ul>
			</li></ul>
		</li></ul>
	</li>
</ul>

CSS

ul#topicPath {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul#topicPath li {
	display: inline;
}
ul#topicPath li ul {
	display: inline;
	margin: 0;
	padding: 0;
}
ul#topicPath em {
	font-style: normal;
}
ul#topicPath a {
	text-decoration: none;
}

改行は半角スペース1文字扱いされてしまうので、『 » 』の前後で改行することで、同じ幅だけスペースができるようにしています。