2009年4月9日木曜日

ローカルナビゲーションのマークアップはどうしよう?

ローカルナビゲーションとは、同一階層内のコンテンツ情報を示すナビゲーションのことで、これによって階層内の移動が容易になります。

ウェブサイトのサブメニューなんかと呼ばれることもあるこの部分。このブログでいうと右側の「最近の記事」や「関連記事」にあたる部分ですが、SEOやウェブ標準なんかを考えて、これをどうマークアップしたものかと常々悩んでいました。

新年度になって仕事も一段落したので、いろんなサイトのローカルナビゲーション部分のソースをのぞきみしてみたところ、次のような傾向がありました。

1. Heading(見出し)を使う

<div class="localNav">
<h2>ローカルナビゲーション</h2>
<ul>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
</ul>
</div>

「ローカルナビゲーション」に<hx>見出しを使うパターン。一番ウェブ標準的?
音声ブラウザとの相性もよいみたい。
ただ、
<h1>ページタイトル</h1>
<h2>小見出し</h2>
<h2>ローカルナビゲーション</h2>
のように、小見出しとローカルナビゲーションが同列になってしまいます。そんなにローカルナビゲーションってページ内の要素としては重要じゃないしなぁ。

2. pとかdivとかを使う

<div class="localNav">
<div>ローカルナビゲーション</div>
<ul>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
</ul>
</div>

「ローカルナビゲーション」という言葉はあまり強調したくないので、SEO的にはこれがいいのかな?ただ、リストと関連づけられないのが残念。

3. 定義リストを使う

<div class="localNav">
<dl>
<dt>ローカルナビゲーション</dt>
<dd>
<ul>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
</ul>
</dd>
</dl>
</div>

<dt>を使うことでリストをローカルナビゲーションと定義するパターン。
見出しほど強調されないし、なかなか良い感じ。
けど、入れ子がちょっと気になります。

4. ナビゲーションのグループ化

<div class="navigation">
<h2>ナビゲーション</h2>
<div class="globalNav">
<h3>グローバルナビゲーション</h3>
<ul>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
</ul>
</div>
<div class="globalNav">
<h3>ローカルナビゲーション</h3>
<ul>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
</ul>
</div>
</div>


グローバルナビゲーション(メインメニュー)やローカルナビゲーションなどのナビゲーション関連をグループ化して、それぞれの見出しのレベルを下げる方法。
グローバルナビゲーションはCSSでページの上部等にに配置。
ローカルナビゲーション等の見出しのレベルは1つ下がるけれど、1と同様「ナビゲーション」という言葉は強調されてしまういます。


どれも一長一短があるかなという印象。
Yahoo!の「Robots-Nocontent」みたいなものが共通のルールになればいいんだけどなぁ。
html5待ちかな。html5だったら
<nav>
<h2>サブメニュー</h2>
<ul>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
</ul>
</nav>


とかになるんだろうか。navの中の見出しは重要視しない、とかになってくれないかな?

0 件のコメント: