SEOに強いWebサイトの構成とUIデザインを作る方法

UIデザイン
困った人
良質なコンテンツを書いているつもりなのに検索順位で上位取れない…
何か原因があるのでは…

 

Webサイトやブログを始めて3ヵ月~半年ぐらいの人はこういった悩みを抱えている人は多いかもしれません。

検索順位で上位表示されないのは、コンテンツじゃなくて「サイトの作り自体」に問題があるかも知れないですよ。

この記事では、SEOに強いサイト構成とUIデザインにフォーカスして解説していきます。

 

SEOに強いWebサイトの構成とUIデザインを作る方法

Webデザイン

 

SEOを意識したサイト構成とUIデザインの対策は次の5つです。

  1. サイトの構成(階層を深くしない)
  2. グローバルナビゲーションのテキスト化
  3. パンくずリスト
  4. ページネーションの数字化
  5. モバイルフレンドリー(レスポンシブの実施)

順番に効果が期待できる根拠と対策方法を説明します。

 

 

SEO対策その1:サイトの構成(階層を深くしない)

 

階層を深くするとダメな理由は、目的のコンテンツが探しずらいということです。

Googleの基本思想はユーザーファストです。

コンテンツにたどり着くまでの階層を深くしてしまうと、ユーザーは「どうやってあの記事まで行くんだっけ?」となります。

クローラー(Googleの検索順位をつけいているプログラム)も「このサイトは構造が複雑だからユーザーファーストな設計になっていないぞ」という判断をしてしまいます。

 

サイトの構成の階層を深くしないポイント

トップページ(フロントページ)から2~3クリックでコンテンツにたどり着けるようにサイト設計します。

必ず「2~3クリックで」ということではなく、あくまで目標値です。

できるだけ2~3クリックでサイト構成を考えましょう。

 

 

SEO対策その2:グローバルナビゲーションのテキスト化

 

下の画像の赤枠ようなものを「グローバルナビゲーション」と言います。

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

 

グローバルメニューを画像とかアイコンで表現しているサイトがたまにありますが、ユーザーには伝わるかも知れませんが、クローラーには伝わりません。

クローラーはテキストでしか内容を判断でないので、アイコンや画像で表現していてもクローラーは「???」となります。そのリンク先のコンテンツに対しての関連性という部分でマイナスとなってしまいます。

※画像だとalt属性に説明を書けるけど、ユーザービリティ的には微妙

 

グローバルナビゲーションを見せ方のポイント

テキスト化しましょう。

アイコンを使いたい場合は、テキストの横に配置するとイイ感じになりますよ。

 

 

SEO対策その3:パンくずリスト

 

下の画像の赤枠のようなものを「パンくずリスト」と言います。私のサイトでは上部にありますが、コンテンツの下部になる場合もあります。

パンくずリスト

 

 

パンくずリストがあることでユーザーがどういう経路で今のコンテンツにたどり着いたかが一目でわかります。

ユーザービリティの向上に繋がります。

ポイントはメインコンテンツの外側(邪魔にならない所)に配置しましょう。

 

パンくずリストのつけ方

htmlに直に記載する場合だと下のようになります。

<ul>
<li><a href="/">HOME</li>
<li><a href="/marketing/">MARKETING</li>
<li><a href="/marketing/seo/">SEO</li>
<li>SEOに強いWebサイトの構成とUIデザインを作る方法</li>
</ul>

 

WordPressの場合だと、デフォルトで表示されている場合が多いと思います。表示されていない場合はテーマ固有の設定を確認するか、テーマの作成元に問い合わせしてみるのもイイと思います。テーマを変えるのも方法の1つですね。

 

 

SEO対策その4:ページネーションの数字化

 

下の画像のようなものを「グローバルナビゲーション」と言います。

next・prevのページネーション
数字のページネーション

最新記事一覧や各カテゴリーの一覧ページで上の2つの画像を見比べた時にユーザー目線でどちらが使い勝手がイイと思いますか?

当然2つ目ですよね。数字になっていた方が、好きなところに飛べるので便利です。

 

ページネーションの数字化にする方法

この表示方法はサーバーサイドの処理が絡む箇所ですので、独自でWebサイトを作成している人は、作成元に問い合わせて修正してもらうのがイイと思います。

WordPressでは、デフォルトでページネーションが数字になっていることが多いと思います。なっていない場合は、独自で作成したWebサイトと対応方法は同じです。

自分で修正することもできると思いますが、必ずバックアップを取ってから作業するようにしましょう。

 

 

SEO対策その5:モバイルフレンドリー(レスポンシブの実施)

 

マストになりつつあるSEO対策です。

スマホやタブレットの普及でいろんな解像度のデバイスからWebサイトを閲覧する機会が増えたので、レスポンシブ対応をしているかどうかも順位の判断材料となっています。

基本的にモバイルフレンドリーの対象になっているのはスマホです

 

レスポンシブ対応するには

独自で作成した場合でも、Wordpressでもエンジニアに相談するのがイイと思います。

自分でやるには荷が重い内容です(;^_^A

 

WordPressはデフォルトでレスポンシブ対応してあるテーマは多いと思います。

 

まとめ:とにかくユーザーファースト

ユーザーファースト

 

サイト構成やUIデザインに関しては、「SEO的にはどうだ?」と考えることも大事ですが、「ユーザーがいかに使いやすいか」を考えること重要です。結果的にSEOにもつながります。

 

この記事で解説した一覧を見ながら自分のWebサイト・ブログをチェックしてみてください。

SEOの対策漏れが見つかるかもしれませんよ。

 

おさらい:この記事で解説したSEO対策

  • サイトの構成(階層を深くしない)
  • グローバルナビゲーションのテキスト化
  • パンくずリスト
  • ページネーションの数字化
  • モバイルフレンドリー(レスポンシブの実施)

 

 

人気記事 【内部SEO対策】内部リンクはクモの巣にするとPV数爆増

人気記事 hタグを正しく使ってSEO効果を高める(使い方間違ってますよ)