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対策することをお勧めします。評価されるまでの時間が早くなります。

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

Basic認証を作ろう!

サイトを作った時、あなただけが見れるページや、特定の人物のみがアクセスできるページを作りたい時ってありますよね。
そんな時は、Basic認証がとても便利です。

では早速作ってみましょう!

この設定を行うには、「.htaccess」と「.htpasswd」を準備します。
メモ帳などで適当なファイルを作成し、作成後にファイル名を.htaccessに変えれば拡張子は入りません。

.htaccessの書き方

以下例では「test.html」ページにアクセスする時は、「.htpasswd」を経由させるという指示を出してみます。
※書き方の例としてlolipop.jpのフルパスを書いています。

<Files ~ “^\.(htaccess|htpasswd)$”>
deny from all
</Files>
AuthUserFile /home/users/2/lolipop.jp-●ユーザーコード●/web/ドメイン名/.htpasswd
AuthGroupFile /dev/null
AuthName “Please enter your ID and password”
AuthType Basic
order deny,allow
<Files test.html>
require valid-user
</Files>

作成した「.htaccess」に上記コードを張り付け、「AuthUserFile /」~「/.htpasswd」の間があなたのサイトのフルパスになります。ご自身のサーバーなどでフルパスを調べて記入しよう!
次に、<Files test.html>の箇所に、Basic認証をかけたいページ名を入れます。

.htpasswdの書き方

検索エンジンで「Basic認証パスワード暗号化ツール」を検索すると、すぐにそれらしきページが見つかるので、そこでIDとPasswordを決め、作成した「.htpasswd」に張り付けるだけでOKです。

あとは、そのファイルを関連するルート上にアップすれば設定完了です!

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

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

WP コメント欄をカスタマイズしよう!

デフォルトで設定されているコメント欄のカスタマイズ方法をご紹介します!

コメントフォームのカスタマイズ

コメントフォームの「名前」「メールアドレス」「ウェブサイト」の削除方法

以下CSSをスタイルシートに貼り付けて使用ください。

.comment-form-author{display:none;}/* 「名前」を非表示 */
.comment-notes,.comment-form-email{display:none;}/* 「メールアドレス」を非表示 */
.comment-form-url{display:none;}/* 「ウェブサイト」を非表示 */

※上記を削除した場合、コメント入力時に送信ボタンを押すと、名前やメールアドレスの入力を求める警告文が表示されることがあります。この場合は、WP管理画面から「設定」→「ディスカッション」にある「名前とメールアドレスの入力を必須にする」のチェックを外してください。

コメントフォーム下部に記載されている「使用タグ」の非表示方法

以下CSSをスタイルシートに貼り付けて使用ください。

.form-allowed-tags{
display: none; /* 「使用タグ」を非表示 */
}

コメント欄へのHTML入力を禁止にする方法

function.phpを修正しよう!

デフォルトテーマ内にある functions.php を開きます。
次に、以下コードをfunctions.phpに追記します。

function html_to_text($comment_content) {
if ( get_comment_type() == ‘comment’ ) {
$comment_content = htmlspecialchars($comment_content, ENT_QUOTES);
}
return $comment_content;
}
add_filter(‘comment_text’, ‘html_to_text’, 9);

これで完了です。
※PHPにあまり詳しくない方は、必ずバックアップを取りましょう!

コメント欄の英語表記を日本語に修正しよう!

comment-template.phpを修正しよう!

WPの設定で日本に設定しているのに、コメント欄の送信ボタンやコメント件数の文字が英語の時があります。
そんな時は、comment-template.phpを修正しよう!
編集場所は→ wp-includes → comment-template.php
管理画面からはアクセスできないので、まずはwp-includesをフォルダごとローカルにダウンロードし、編集後アップロードしてください。
comment-template.phpを開いたら、変更した英語表記の文字をF検索し、変えたい文字に変更します。テーマ内にある「comments.php」に記載されている場合もある。
※PHPにあまり詳しくない方は、必ずバックアップを取りましょう!

固定ページコメント欄を丸ごと削除

function.phpを修正しよう!

function.php内のコード comments_open の 次に出てくる「 } 」の後に以下のコードをコピペするだけでOK!

/** 固定ページコメント欄 */
function close_page_comment( $open, $post_id ) {
$post = get_post( $post_id );
if ( $post && $post->post_type == ‘page’ ) {
return false;
}
return $open;
}
add_filter( ‘comments_open’, ‘close_page_comment’, 10, 2 );
/** 固定ページコメント欄 */

※PHPにあまり詳しくない方は、必ずバックアップを取りましょう!

WP 固定ページの一覧ページを作ろう!

固定ページのみの一覧ページを作りたいけど、手動で作るのは大変。。
そんな時は「Child Pages Shortcode」を使おう!このプラグインは、固定ページの子ページを一覧表示できるとても便利なプラグインです。
まずはWP内でChild Pages Shortcodeを検索しインストールしよう!

Child Pages Shortcodeの使い方

インストールが完了したら、まとめたい固定ページを一つの親固定ページに紐づけ、その親固定ページ内に以下の記述をします。
※[]は半角に修正して使用ください。
[child_pages]
この専用のショートコードを入れるだけで、固定ページの子ページを一覧表示できます。
その他の専用のショートコードは以下の通りです。

横幅25%指定

[child_pages width=”25%”]

任意のサムネイル画像を指定

[child_pages size=”thumbnail”]

抜粋表示OFF

[child_pages disabled_excerpt_filters=1]

ショートコードのパラメーター

id 出力したい子ページをID指定できます。
width 出力した子ページの横幅を指定できます。デフォルトでは50%です。
size サムネイル画像のサイズ名称を指定するコードです。デフォルトでは「thumbnail」になります。
他に「large」「medium」「post-thumbnail」があります。
disabled_excerpt_filters 抜粋のフィルターを無効化にするショートコードです。(負荷低減になる)

デフォルトHTMLとcssを修正しよう!

Child Pages Shortcodeで子ページの一覧を表示できたら、プラグインの格納先にhtmlとcssが編集できるようになっています。

WP TOP記事の文字数を調整するプラグイン

ワードプレスのindexに表示される記事の文字数を自分好みに調整しよう!

WP Multibyte Patch

ワードプレスで使用するプラグインの中に「WP Multibyte Patch」というものがあります。
このプラグインは、記事の文字数を調整できるとても便利なプラグインです。まずはWP内でWP Multibyte Patchを検索しインストールしよう!

プラグインをインストールしたら以下、記述をF検索で探し、自分好みにカスタマイズしよう!
→ ’excerpt_mblength’ => 文字数値,

CSS 角丸を表現

CSSで角丸を表現してみよう。

まとめて角丸指定

.クラス名 {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

webkitは、chromeやSafari向け
mozは、Firefox(Mozzila)向け

特定部分だけを角丸指定

.クラス名 {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 25px;
}

要素を加える場合は以下のようにします。

dashedが要素になります。
.クラス名 {
border: 3px dashed #000;/* 細かい点線 */
}

▼その他の要素▼
dashed /* 細かい点線 */
solid /* 線 */
double /* 二重線 */
groove /* 立体線 */
ridge /* 立体線(反転) */
inset /* 立体べた線 */
outset /* 立体べた線(反転) */

CSS 透過の小技、背景だけを透過

CSSで背景やボタンなどを透過させよう。

opacityを使用したよく使われる透過CSS

filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;

filterは、IE向け
-moz-opacityは、chromeやFirefox(Mozzila)向け
opacityは、SafariやOpera向け
となります。

背景だけを透過させたい時は?

よくありがちなケースとして、背景に透過をかけたら、その中の文章や画像が全部透過してしまったというケースです。
そんな時は以下を使用↓0.15の数字を自分好みの透過レベルに修正ください。255は色になります、要素を検証で指定すると早いですね。

background-color: rgba(255,0,0,0.15);

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
パスワードが違う時などにジャンプさせます。