SEO的ナビゲーション活用術（SEOの基本）

この記事の内容はすべて筆者自身の見解であり（ありそうもないことだが、筆者が催眠状態にある場合を除く）、SEOmozの見解を反映しているとは限らない。

検索エンジンに合わせたナビゲーションを活用してサイトアーキテクチャに強固な基盤を構築することは、すぐれた検索エンジン最適化（SEO）の基本原則ではあるが、実際のところどういったことをすればいいのだろうか？ 顧客（や自分）のSEOを高める際にどんなことを推奨すればいいだろうか？

この記事では、うまくコーディングされていて検索エンジンにフレンドリーなナビゲーションの実例をいくつか見ていこう。またSEOのためにサイトアーキテクチャを向上させる方法を紹介する。

理論的な話

検索エンジンのロボットにフレンドリーなナビゲーションを構成するものは何なのか？ すぐに使えるCMSが普及している現在、ナビゲーションの大半はすでにかなりSEOフレンドリーになっているが、それでも時おり、ゼロからの再構築が必要な、破綻したナビゲーションに出くわすことがある。

ナビゲーションが頼りないWebサイトを見直していくと、おそらく次のような問題点が認められることだろう。

• JavaScriptが無効になっているとドロップダウンが機能しない

• グローバルナビゲーションやヘッダーのリンクがテキストベースではなく画像ベース

• JavaScriptとCSSを無効にしてサイトを閲覧すると、サイト内リンクが大量に消える

• SEOmozのツールバーで確認すると、nofollowでないサイト内リンクの数が意外に少ない

• Googleがキャッシュしているテキストのみのバージョンで見ても、こうした貴重なサイト内リンクが消えている

FirefoxのWeb Developer（日本語版）でJavaScriptを無効にしてリンクを確認

検索エンジンにフレンドリーなナビゲーションに必要なのは、適切に構造化されたHTMLであり、必要ならば装飾のためにCSSを使うだけだ。技術的な言いかたをするなら、サイトに新しいナビゲーションを設定する場合、求めるべきものは「どのブラウザでも表示される有効なメニューを展開するドロップダウン」となる。

HTMLは単純そのもので、（テキストのみの）キャッシュページや、CSSやJavaScriptを無効にして見たページは、次のようなリンクの個条書きリストを作ればいい。

素晴らしいお手本の一覧を見たければ、「CSSplay.co.uk」のCSSメニューのページをブックマークすることをお勧めする。数百件ものメニューのサンプルへのリンクが紹介されている（僕がこの記事のために調査している際、CSSによるスタイル指定でページネーションするこのナビゲーションが目に止まった）。

良いナビゲーションが実際に使用されている例を見たい場合は、このサイトを表示して、「Web Developer」ツールバーでJavaScriptとCSSを無効にしたり有効にしたりしてグローバルナビゲーションを見てみるといいだろう。

実例はほかにもいろいろとある。今回は記事をまとめる時間よりインターネットをクリックして回った時間の方が長かったぐらいだ。検索エンジンにフレンドリーなすばらしくてナビゲーションの実例がほかにもあれば、ぜひコメント欄で紹介してほしい（自慢や自薦も大歓迎だ）。

CSSのナビゲーション要素をSEOに活用する

ドロップダウンメニューは必ずしもその名の通り「ドロップダウン」するものである必要はない。そうだろう？ デザイン的に難しいために、ナビゲーション部分に設置するサイト内リンクの数を増やせなかったという経験はないだろうか？ 今度そんな状況になったら、このアプローチによってページ上のリンク数を増やせないか考えてみよう。

自分でテストしてみたくなった？ 次のようなナビゲーションのアイデアを試してみたらどうだろう。

• プラハの全ホテル一覧
• 現在地から500メートル以内のイベントを見る
• CRMに関するケーススタディをさらに見る
• トルコ行き全便一覧
• 他の人はこんな製品も購入／人気の高い同種の製品
• 大陸別上位6国（下の例を参照）

CSSのドロップダウンで展開されるパンくずリスト

航空便検索のための選択肢リストを展開するシンプルな実例

ナビゲーションを改善すれば、サイトのアーキテクチャに良い影響をもたらすことができる。これらの原則を確実に守れば、クロール可能で検索エンジンにきわめてフレンドリーなウェブサイトになっているという認識を持って、強固な基盤の上にマーケティングの取り組みを構築できる。君の気に入っている素晴らしいナビゲーション例にはどんなものがあるだろうか。