パンくずリストの作成方法　-　トピックパスの詳細解説と作り方（その2）

前回の記事「パンくずリスト(トピックパス)の詳細解説と作り方（その1）」から時間が経ってしまいましたが、今回は第2弾で実際にグーグルの検索結果にパンくずが表示されているサイトを参考にして、作成方法を考えてみます。

パンくずリストの説明についてはコチラの記事をご覧下さい。

• パンくずリストが検索結果に表示されるように。ユーザビリティにもSEOにも有効になる可能性。
• パンくずリスト(トピックパス)の詳細解説と作り方（その1）

まずは、パンくずリストがグーグルのSERPにすでに表示されているサイトのHTMLを見ていきます(以下、上から目線注意ですw)。

e-Wordsの場合

SERPではこのように表示されています。

サイト内ではこう表示されています。

ソースです。

2つのカテゴリから辿りつけるので、パンくずリストが2つありました。
テーブル内にh2でリスト全体を囲んでいますね。
あまり構造上よろしくないような気が…。

アメリカYahoo!の場合

サイト内ではこう表示されています。

ソースです。

XHTMLなので、出来たらPタグにテキストを書きたいですね。
bcSepクラスに区切り用画像を表示しているようです。
空要素になってしまっていますね…。

日本Googleの場合

サイト内ではこう表示されています。

ソースです。

「»」で区切っています。
最後の「&nbsp」が不明ですがいい感じです！

第一生命の場合

SERPではこのように表示されています。

サイト内ではこう表示されています。

ソースです。

見た目もソースもキレイですね。
理想的！

まとめ＆補足

今までこれを作成するときはul,liなどを使って、仕切りに画像入れたり、結構凝ったつくりにしていましたが、その必要は内容で、結局はシンプルでわかりやすい構造で作るのがクローラーにとってもいいようです。

SEORYで配布しているウェブテンプレートでもul,liを使っていましたが、今後は下記のように作成したいと思います。

コードはこれ

※IEの場合、コード内であっても改行すると隙間が出来てしまう場合があるので、1行で書くかコメントアウトタグを改行前・後につけて対応して下さい。

こんな風に表示されます。

補足

• トップページにはパンくずリストを表示しない。
• トップページへのアンカーテキストは「HOME」や「TOP」でなく、サイト名もしくは不自然でなければサイトの内容を示す文言にする。
• 一般に、すべてのページはトップページから3クリック以内で辿り着ける階層が望ましい。なのであまりにも長いパンくずはいけません。
• 今表示されているページはアンカーテキストにしてはダメ(リンクなしテキストにする)。

最近(結構前からかな)ではCMSを利用したサイトが増えているので、あまり1からパンくずリストを作成する機会があまりないかもしれませんが、テンプレートを自作する場合などにもぜひ参考にしていただければと思います。