WordPress・SEOの情報発信サイト

ナビゲーションを追加しよう SEO対策としてのナビゲーション

ナビゲーションイメージ

ナビゲーションの役割を理解したい人向けの記事です。ナビゲーションにはどのような種類があって、ワードプレスではどのように設置すればよいのか、こちらの記事で解説したいと思います。

ナビゲーションを適切に利用するとユーザーの利便性が向上して、内部リンクによる内部SEO対策にもなりますので、まだナビゲーションを設置していない人は設置して下さいね。

ナビゲーションの役割

SEOを考慮したナビゲーションの役割は下記の2点であると考えています。

1点目

ユーザーに対するナビゲーションの役割。ナビゲーションの意味そのままですが、ユーザー(ページを閲覧している人)がサイト内のどの場所(ページ)にいて、そのページまではどのような経路になっているかを伝えてあげること、またサイトの全体感を伝えてあげることが1点目の役割です。ユーザーの利便性を向上させることですね。

 

2点目

2点目が内部リンク対策としてのナビゲーションです。クローラが巡回しやすい経路を明示すること、構造を明示すること、重要なページにリンクを集めることが主な役割になります。

ナビゲーションの種類

どこまでをナビゲーション機能と呼ぶのか意見が分かれるところだとは思いますが、いったん、代表的なものを紹介したいと思います。

 

グローバルナビゲーション

グローバルナビゲーション

WEBサイトの一番上にあるナビゲーションです。

ワードプレスではメニューと読んでいますね。こちらは全ページに表示されるナビゲーションで、このナビゲーションに貼ったリンクはサイトのページ全体からリンクを得ることができます。

サイト構造上重要なページをクローラーに伝えると共にユーザーに対してサイトの全体感を伝えることができます。

 

ローカルナビゲーション

ローカルナビゲーション

参考:日本マイクロソフト公式ページ – 日本マイクロソフトについて

日本マイクロソフト様のページが分かりやすかったので引用させて頂きました。ローカルナビゲーションは同一階層で同カテゴリにあるページをリスト表示したもので、基本的にはグローバルナビゲーションの下階層に置くサブナビゲーションのようなイメージです。

マイクロソフト様の場合はグローバルナビゲーションに製品購入ページやサポートページと同階層に会社ページがあって、会社ページ内に「会社情報」「採用情報」がある形になっていますね。

 

パンくずナビゲーション

パンくずリスト

「パンくずリスト」とも呼ばれています。

童話の「ヘンゼルとグレーテル」で、主人公が森で迷子にならないように通り道にパンくずを置いていったエピソードに基づいていると言われています。「パンくず=経路」と言ったイメージですね。

現在いるページがトップページからどれくらいの階層になるか、どのようなカテゴリの中でどの経路を通って来たかを明示することができます。

 

ダイナミックナビゲーション

ダイナミックナビゲーション

検索ボックスです。

 

関連ナビゲーション

関連ナビゲーション

関連記事を表示するナビゲーションです。

基本的に同カテゴリのページを表示しています。記事の本文の下に表示させ、記事を読み終わったユーザーに対して同カテゴリの記事でこんな記事もあるよ、と明示することでユーザーの情報収集の利便性を助けます。回遊率アップも狙えます。

ナビゲーションの設置方法

ワードプレスでのナビゲーション(メニュー)とパンくずリストの設定方法を解説します。

パンくずリストはテーマによってはデフォルトで付いていたりしますので、その場合はテーマの機能をそのまま利用する形でよいかと思います。今回はプラグインを使った方法を説明します。

今回はSimplicityというテーマを使っています。

 

メニュー

管理画面からメニューをクリックします。

メニューをクリック

メニュー名に任意の文字(今回は「menu」)を入力して「メニューを作成」をクリックします。

メニュー作成画面

左のリストからメニューに表示したいページを選択して「メニューに追加」をクリックします。

メニューに追加

ヘッダーナビにチェックを付けて「メニューを保存」します。※ここの操作はテーマによって異なります。

ヘッダーメニューにチェック

これで完了です。ご自身のサイトでメニューが作られているか確認してみましょう。

 

ちなみにカテゴリーもメニューに表示することができます。

カテゴリー選択

 

パンくずリスト

Breadcrumb NavXT」というプラグインでパンくずリストの設置方法を解説したいと思います。

Breadcrumb NavXT

インストールから有効化までは割愛します。

管理画面の設定から「Breadcrumb NavXT」を選択します。

Breadcrumb NavXTを選択

設定画面が表示されます。

設定画面

今回は設定はデフォルトのままで設置方法だけ紹介したいと思います。設定を詳しく知りたい方はAdmin Web様のページが詳しく紹介されていましたので、そちらを参考にしていただければと思います。

参考: Breadcrumb NavXTプラグインの使い方

 

表示したいページのテンプレートファイルにコードを貼ります。

テンプレートファイルにコードを貼る

コード

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
  <?php if(function_exists('bcn_display'))
  {
   bcn_display();
  }?>
</div>

投稿ページならsingle.php、固定ページならpage.phpですが、テーマによってはテンプレートファイルからテンプレートファイルを呼び出していたりしますので、一概にこのファイルを修正して下さい、と言うことができません。

Simplicityの場合はsingle-page.phpというファイルを探して上記のように貼り付けて下さい。

ファイルを保存してアップロードすると下記のように表示されます。

パンくずリストの完成

Simplicityはそもそもパンくずリストがあるので例が悪かったですね。。m(_ _)m

 

SEO対策するなら

グローバルメニューは画像でなくテキストで設置しましょう!

おしゃれさを優先してグローバルメニューを画像にしているWEBサイトがありますがSEOを考慮するならテキストで表示させましょう。

まとめ

ユーザー、クローラーに対して、このサイトはどんな構造でどんなルートがあっていまどこにいるのか提示してあげるのがナビゲーションの役割と言って良さそうですね。

ユーザー、Google検索エンジンに対して親切にしてあげることがSEO対策になると言えそうですね。