Moz - SEOとインバウンドマーケティングの実践情報

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を無効にしたり有効にしたりしてグローバルナビゲーションを見てみるといいだろう。

Sofa.comに見るナビゲーションの実例

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

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

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

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

  • プラハの全ホテル一覧
  • 現在地から500メートル以内のイベントを見る
  • CRMに関するケーススタディをさらに見る
  • トルコ行き全便一覧
  • 他の人はこんな製品も購入/人気の高い同種の製品
  • 大陸別上位6国(下のを参照)
パンくずリスト
CSSのドロップダウンで展開されるパンくずリスト
トルコ行き出発便の例
航空便検索のための選択肢リストを展開するシンプルな実例

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

この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

CSR
Corporate Social Responsibilityの略。 ...→用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]