パンくずリストの作り方

Seesaa blog でのパンくずリストの作り方なんですけど、ウェブ標準な作り方がわからなかったんで W3C をのぞいてきました。

W3C ではこんな感じで作られているようです。

どうやらパンくずリストごと h1 タイトルでくくっているようなんですが、どういった作り方がSEO対策的に一番いいのかっていうのをパンくずリスト比較しようと思います。

ちなみに、パンくずリストっていうのは、ブログ訪問者さまが迷わないようにするためのナビゲーションのことです。

ヘンゼルとグレーテルみたいに森で迷っても大丈夫なように、パンくずを残していこうっていう意味です。

パンくずリストの作り方を比較

シーサーブログのデフォルトでのパンくずリストは、確かこんな感じになっていたような気がします。

<< 前の記事 | TOP | 次の記事 >>

でも、一般的なパンくずリストだとこんな感じだろうと思うんです。

TOP > カテゴリ > 個別記事

どちらがいいのかは正直わからないんですけど、とりあえずこんな感じでこのブログでもパンくずリストを作ってみました。

でも、これだと、ブログの最初の方にキーワードが密集してしまうような気もしてしまうんで、はたしてSEO的にこれでいいものだろうか？という気もしてしまいます。

そこで、ヤフーヘルプとグーグルヘルプを参照してみたのですが、どうやらこんな感じになっているようなんです。

グーグルヘルプのパンくずリスト

ヤフーヘルプのパンくずリスト

結局のところ、ページ上部でキーワードが重複されるといまいちくどいような気もするんで、最終的には現在ご覧になっているページで表示されているような形でパンくずリストを作成してみました。

グーグルのようにパンくずリストのアンカーテキストにキーワードをいれつつも、ヤフーみたいにタイトルと重複しないような形で作成してみた次第です。

html ソースの例はこんな感じですが、シーサーブログでは個別ページやカテゴリページなどで場合わけをしながら作成するといいかと思います。

スタイルシート上には、文字サイズをちいさめでアンダーラインなんかをくっつけておくといいかと思います。

このブログでの作り方の例）

html の部分
<div class="breadcrumb"><a href="<% blog.page_url %>">ブログタイトル</a> &gt; <% if:style.disp_category %><a href="<% article_category.page_url %>"><% article_category.name %></a><% /if %> &gt;</div>

css の部分
.breadcrumb {
line-height:120%;
padding:0px 0px 10px 0px;
}
.breadcrumb a{
font-size:12px;
font-weight:normal;
color: #003366;
text-decoration:underline;
}

ちなみに、breadcrumb の部分は任意の英数小文字で、> の記号は html 上に記入する場合は、&gt; と書いた方がいいかと思います。

シーサーのデフォルトで表示されている前の記事、次の記事表示はこのブログでは記事下の一番下に持っていくことにしました。