SEOとデザイン性の矛盾を解決する方法とは

サイト内SEOを追求することと、デザインやユーザインタフェース(UI)を追求することは、それぞれ相反する要素が強く、それがゆえに方向性がぶつかることが多々あります。
クローラー向けに大量にページリンクをつけたらユーザにとっては非常に分かりにくいページになってしまい、逆にデザインとユーザインタフェースを重視してポップアップやJavaScriptなどの技術でUIを向上させたりするとクローラーが回らない構造になってしまったり、といった具合です。

これらの矛盾について、多くのメジャーサイトはをうまく両立させておりますが、今回はその手法がどのようなものかできるだけ簡単にご紹介いたします。

1.まずは「クローラーが回らない構造」はどんなものかを理解する

デザインとSEOの両立を考える前に、クローラーがそもそも回れない状態とはどんなものなのかを理解しておきましょう。

(1) form要素からページ遷移先はクロールしない
 例えばプルダウンで選択して「検索」をクリックして開くページはクローラーが回る
 ことができません。
(2) 「display:none」などで隠してあるリンクはクロールされない可能性があります。
 ポップアップで絞り込み検索を設置したり、大量のコンテンツを「もっと見る」など
 により一部隠した場合などでクローラーが回らなくなる可能性があります。
(3) Aタグに「nofollow」が指定されている場合
 意図的にAタグに「nofollow」を書くということです。アンカーリンクにせざるを得
 ないがクロールさせたくない場合にこの方法を使います。例えば外部へのリンクや、
 サイト内のインデックスさせる意味がないページ(お気に入りに追加など)がそれに
 該当します。

2.デザインやユーザインターフェースを考えると避けられないケース

デザインやユーザインターフェースを考えると、クローラーが回れなくなっても仕方ない。つまり、それを避けられないケースがあります。

デザインとコンバージョンが両立できない図

すっきりしたプルダウンにより本来ユーザに見せたい情報を大きく露出させることでユーザエクスペリエンス(UX)の高いデザインになりますが、SEO的にはクローラーが下層ページに辿り着くことができなくなってしまいます。逆にクローラーに回りやすくするためにアンカーリンクを多用すると、本来見せたい情報が下の方に隠れてしまいます。

3.デザインとSEOを両立するポイント

これらの矛盾はどのように解決すればいいのでしょうか。その答えは「サイドメニュー」や「フッターリンク」を活用することにあります。バナーやサブメニューなど固定的に出しておきたいコンテンツを置く場所としてのイメージが強いその場所ですが、少し考え方を変えるとクローラーの通り道をそこに設置することができるのです。

デザインとコンバージョンが両立した図

「サイドメニュー」や「フッターリンク」を利用して、ユーザには分かりやすく、クローラーにもまわりやすい構造を作っておくことで、その両立ができる構造を実現できます。ただここで気をつけたいのは、クローラーは1ページソースの上から200KBまでしか取得しませんので、それより上にフッターリンクがくるようにする必要があるということです。もしクローラーが回ってくれなかった場合は、「Fetch as Google」でピンポイントでクロールリクエストを投げるという解決方法があります。

ここまでの話をまとめますと、つまり「人が通るところ」と「クローラーが通るところ」をそれぞれ分けて作った方がよいということです。ポイントは以下の点です。

1.人が通るところはページ内の上の方が良い
2.人が通るところでは、デザインやユーザインタフェース(UI)を追求すればよい
3.クローラーが通るところはページ内の下の方が良い
4.クローラーが通るところでは、サイト内SEOを追求すればよい
5.クローラーが通るところは、HTMLソースの上から200KB以内におくこと

「クローラーが通るところ」の構造としては、リンクジュースがトップページから裾野に向かって広がっていくイメージでアンカーリンクを設置すると良いでしょう。

また最新のGoogleアップデートにより、「仮にクロールして欲しくないページをnofollowにしたとしても、それ以外のアンカーリンクへのリンクジュース配分が増えるわけではない」とのこと。すなわち、そもそも無駄なページについては、「リンク自体が無い方がよい」ということになります。それはすなわち、上記の「クローラーが回らない構造」を逆手に利用した方が可能ということかもしれません。

 

その他の関連記事

 

知って得するホームページ小技集

PAGE TOP