SEOとUIの関係性、正しいWEB設計について

SEOは検索エンジンの表示順位を上げるだけ?なんて思っている方は多いのではないだろうか。

今回は、WEB設計に欠かせないSEOとUIの関係性をご紹介します。

そもそも検索エンジンで順位を上げるには、そのページの直帰率、離脱率、滞在時間も気にする必要があります。
PVも軽視できない項目ですが、PVを上げるために、不要なリダイレクトをし過ぎると、マイナス判定をされ、検索順位が落ちることがあるので注意しましょう。

とくにグーグルの検索エンジンは、利用するユーザーが検索したキーワードにマッチしたサイトを上位に上げることを優先しています。普通に考えれば、検索しても利権や広告絡みの検索エンジンなんて誰も使わないですよね。
ユーザーが自分の知りたい情報がすぐに見つかる検索エンジンを求めている以上、そこに重きをおくのは当然の流れ。
そこで見られているのが、直帰率、離脱率、滞在時間などです。

仮に、一つのページを特定のワードで10位以内に表示させたとしても、直帰率、離脱率、滞在時間が悪ければ、検索エンジンからの評価は下がり、すぐに2ページ目、3ページ目に落とされていくでしょう。
とくに、今の検索システムは制度が上がっており、かなりの確率で自分の欲しい情報にヒットします。
なので、SEOはデザインやスマホ対応を含むUIやUXにも関わるということ。

ただ…デザインだけ凝ったサイトを作っても意味がないのも事実。
実は、見栄えだけ整えたサイトというのは、利用するユーザーからすると「カッコイイけど、私の欲しい情報はどこ?」「なんか見難い」「なんのサイトなの?」という判断をされ、直帰率、滞在時間が悪くなることが多々あります。
ブランドメーカーや有名人など大きなコンテンツを扱うサイトなら、とことんデザインにこだわっても、もともとのバリューがあるので直帰率、滞在時間は悪くなりませんが、コンテンツバリューがないサイトで勝負しようと思ったら、コンテンツバリューがないことを踏まえた努力が必要になるのです。

まずは、0.5秒が勝負!

あなたは、検索エンジンから特定の情報を探した時、欲しい情報がそのページにない場合、どのぐらい滞在しますか?

実は、ほとんどの人は、ページの下部までは行かずに、中盤あたりまでスクロールして、欲しい情報がないと感じた時点で、戻るボタンを押してしまいます。
その時間が0.3〜0.5秒と言われています。

サイトを開いた時のファーストインプレッションで、「私が探していた情報はここにある!」と思わせなければなりません。
しかし、長々とした文章を並べればOKというわけではなく、TOPに関して言えば、簡単なキャッチと、それらを結びつけるイメージ画像が重要になります。
LPに近い形のサイト設計は、比較的有効であると考えます。

また、サイトの直帰率は40%台なら妥当だと判断されやすいですが、上位表示を狙うなら30%はキープしなければなりません。

また、今現在のグーグル検索エンジンは、外部SEOよりも内部SEOを重視しています。比率で言えば外部3、内部7というところです。
なので文章の重要度は大きくなります。

では、コーディング面ではどうだろうか?

よく言われるのが「title description h1〜h3」の3項目です。
正直なところ…この3項目を無視したサイトでも上位表示されているサイトは五万とあります。

もし、この3項目がとても重要ということになると、素人が作ったデタラメなコーディングページは評価されない、ということになりますよね?
でも、コーディングがデタラメなサイトでも、ユーザーの求めている内容とは関係ありません。ユーザーからすれば、どんなに綺麗にコーディングしているかは関係ないのです。欲しい情報が手に入ればそれでOKなわけですからね。
その部分でグーグルの検索エンジンは、素人が書いたデタラメなコーディングページでも上位表示されるような評価基準を設けています。
もちろんtitle description h1〜h3などをしっかり書いておいた方が良いですが、重要比率を言えば10段階中「2〜3」というところです。
ただ、新しいドメインで新しいサイトを設計する場合は、この3項目はしっかりSEO対策することをお勧めします。評価されるまでの時間が早くなります。

これらのユーザー目線を考えた上で、サイト設計、デザインを構築していけば、あなたのサイトがより魅力的なものになるかもしれません。

HTML ノーフォローの小技編

SEOでも活用できるノーフォローの小技を紹介します!

外部リンク先をフォローしないaタグ

aタグ内にnofollowを!

<a href=”リンク先” rel=”nofollow”></a>

この記述を入れることで、リンク先にリンクパワーを与えることを防ぐことができます。しかし、この記述は何の意味があるの?と思うかもしれませんが、例えばあなたのサイトから多くのリンクを飛ばしている場合、過剰に外部リンクを設置していると判定され、検索エンジンからマイナス判定を受ける場合があります。そんな時に「rel=”nofollow”」が活躍するわけです。
これを記載することで、「これは外部SEO目的のリンクではありませんよ!」と検索エンジンに知らせることができます。それによってあなたのサイトも守られるのです。

検索エンジンロボットを拒否するメタタグ

以下、メタコードを~内に記述することで、そのページが検索エンジンから拒否できます。

<meta name=”robots” content=”none”>
<meta name=”robots” content=”nofollow,noarchive”>
<meta name=”googlebot” content=”none”>
<meta name=”slurp,bingbot” content=”nofollow”>
<meta name=”robots” content=”noindex,nofollow”>
<meta name=”robots” content=”noindex” />

これだけ入れれば大丈夫!

それでも削除されない場合は!robots.txt

まず、robots.txtというテキストファイルを作成し、以下を記述し、ルートに設置します。

User-Agent: *
Disallow: /test/

「User-Agent」の意味は、すべてのクローラを表しています。これは検索エンジンロボットを指します。
「Disallow」の意味は、そのファイル又はフォルダにアクセスしてはいけません、という指示を表しています。
つまり、上記の書き方だと、/test/ フォルダのすべてのファイルにアクセスしてはいけません、という命令を出しています。

Yahoo!だけを拒否!

小技として「Slurp」を記述することでYahoo!の検索結果だけを非表示にできます!

User-Agent: Slurp

お役に立てたでしょうか?ノーフォローの小技編でした~

SEOにも役立つリダイレクトの活用メモ

.htaccessで使われる便利なリダイレクト方法をメモします。
SEOでも活用しているケースは多くあり、サイトを引っ越した時、検索エンジンに、こちらが新しいドメインですよ。と伝えたり、スマートフォンサイトを知らせるのに必要不可欠になります。
そもそも、検索エンジンにサイトの場所、変更などを知らせないと、せっかく作ったあなたのサイトは、誰も訪れることができなくなってしまいます。そのためにも.htaccessを活用しましょう。
※ここで記載されている「●●●」はあなたのドメイン名を表します。使用する際はそのままコピーして編集後、使用ください。改行などは入れずそのまま使用することをお勧めします。

フューチャーフォンからアクセスした時、TOPへリダイレクト

以下は、フューチャーフォンからアクセスした際のリダイレクトになります。
※ただし、TOPにリダイレクトされます。

RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank)
RewriteRule ^$ http://www.●●●.jp/i/ [R]

スマートフォンからアクセスした時、TOPへリダイレクト

以下は、スマートフォンからアクセスした際のリダイレクトになります。
※ただし、TOPにリダイレクトされます。

RewriteCond %{HTTP_USER_AGENT} (Android|iPhone|iPod) [NC] RewriteRule ^$ http://www.●●●.jp/s/ [R]

便利な1対1リダイレクト

1対1リダイレクトとは、例えばPCサイトとスマートフォンサイトを同じ階層(フォルダ&ファイル名)で制作し、スマートフォンでアクセスした際、スマートフォンの同ページにリダイレクトするものです。

wwwを排除する場合

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.●●●\.jp
RewriteRule ^(.*)$ http://●●●.jp/$1 [R=301,L]

フューチャーフォンの1対1リダイレクト

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP.Browser|J-PHONE|Vodafone|SoftBank)
RewriteCond %{REQUEST_URI} !(^/i/)
RewriteRule ^(.*)$ http://●●●/i/$1 [R=302,L]

スマートフォンの1対1リダイレクト

RewriteCond %{HTTP_USER_AGENT} (Android|iPhone|iPod) [NC] RewriteCond %{REQUEST_URI} !(^/s/)
RewriteRule ^(.*)$ http://●●●.jp/s/$1 [R=302,L]

www指定リダイレクト

「www無し」

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.●●●\.jp
RewriteRule ^(.*)$ http://●●●.jp/$1 [R=301,L]

「www有り」

RewriteEngine on
RewriteCond %{HTTP_HOST} ^●●●\.jp
RewriteRule ^(.*)$ http://www.●●●.jp/$1 [R=301,L]

存在しないページをTOPに戻すリダイレクト

ErrorDocument 404 http://●●●.jp/

別ドメインへ引越し

RewriteEngine On
RewriteCond %{http_host} ^www.引越し元.net
RewriteRule ^(.*) http://www.引越し先.com/$1 [R=301,L]

サイト内の引越し

Redirect permanent /main.html http://www.●●●.cc/main001.html

拡張子を変更するリダイレクト

あまり使われていませんが、拡張子の変更にも対応できます。例えば.HTMのように大文字で作成してしまった拡張子を小文字に変更した際、.htmlにリダイレクトできます。また.htmを.htmlに飛ばすこともできます。拡張子の無いページへのリダイレクトさせる場合は、以下の「.html」を消すだけでOKです。
よく使われる例では、index.htmlからindex.phpなどのリダイレクトですね。

RedirectMatch permanent (.*)\.HTML$ $1.html

PHPファイルを対応させる.htaccessの書き方

AddType application/x-httpd-php .htm .html
又は
AddHandler application/x-httpd-php5 .htm .html .php

AddType application/xhtml+xml .html

リダイレクト時に使用される301や302などを説明します。

■301
恒久的なリダイレクトで使用します。つまり、このURLが正しいジャンプ先の時です。

■302
一時的なリダイレクトで使用します。メンテ時とか、仮設ページを作った時などです。
※スマートフォンへの1対1リダイレクトを使用する際、使ったりします。

■403
一般の人は見ないで…という意味で、アクセスした場合のエラー時に使用します。

■404
このページは存在しないよ…という意味です。

■500
プログラムによる誤りを表す。CGIスクリプトの設定ミスなどで使われたりします。

■503
サーバーメンテ中や、アクセスが集中し過ぎて込み合っている時など

■400
ユーザーがアドレスを編集してジャンプした時…そのページが存在しなければ400へ

■401
パスワードが違う時などにジャンプさせます。