HTMLとCSSでパンくずリストを作成する方法

パンくずリストとは、ページ内の階層構造を示すためのナビゲーションです。当サイトでも、グローバルメニューに設置しています。これがあることで、ユーザーは閲覧中のページがサイト内のどの位置にあるのかを知ることが可能です。

そして、個別ページから各カテゴリにリンクが貼られるので、内部リンクとしての役割も果たします。なので、クローラーを効率よく循環させるためにも有効ですね。さらに、最も注目すべき点は、検索結果に表示されるということです。

1

検索結果からカテゴリページへ飛ぶこともできるので、アクセス性が高くなります。どれだけの人がクリックするか分かりませんが、普通にURLが表示されるよりも目立つのは確かだと思います。

 

パンくずリストの作り方

パンくずリストの作り方は色々ありますが、ほとんどの場合でHTMLとCSSで作成されているはずです。なので、その作成方法を紹介していきます。

 

CSSの display プロパティを使う

【CSS】
li {display: inline;}
 
【HTML】
<ul>
<li><a href=”/”>トップページ</a>|</li>
<li><a href=”/”>カテゴリページ</a>|</li>
<li>個別記事のタイトル</li>
</ul>

まず、HTMLでリスト形式でリンクを配置します。そして、CSSで{display: inline;}と指定して、リストを横並びの配置に変えています。当サイトでも使用しているやり方で、最もメジャーな方法です。

 

CSSの float プロパティを使う

【CSS】
li {float: left;}
 
【HTML】
<ul>
<li><a href=”/”>トップページ</a>|</li>
<li><a href=”/”>カテゴリページ</a>|</li>
<li>個別記事のタイトル</li>
</ul>

これは、基本的には、上の方法と変わりません。{float: left;}と指定して、リストを横並びの配置にしています。これもメジャーな方法ですね。ただし、float を使って配置を変えた場合は、{clear: both;}で解除することを忘れないでください。

 

p要素で設置する

【HTML】
<p><a href=”/”>トップページ</a> → <a href=”/”>カテゴリページ</a> → 個別記事のタイトル</p>

CSS を使わずに、HTML だけを使用した方法です。p要素で段落を作って、その中にリンクを記述するだけですね。CSS が苦手だという人は、この方法で作成しましょう。

 

Googleが推奨している方法

検索結果にパンくずリストを表示させるために、Googleが推奨している記述方法があります。それは、microdata または RDFa を使用した方法ですね。この方法で記述しておけば、クローラーがパンくずリストだと認識するために、検索結果で表示してくれるようになります。

⇒Google推奨のパくずリストの記述方法

しかし、現在はクローラーの精度が上がっているため、この方法でなくてもパンくずリストを認識してくれます。だから、あまりこだわる必要は無いでしょう。上で紹介した方法でパンくずリストを作成すれば、検索結果にも表示されるはずです。

サブコンテンツ

このページの先頭へ