サイトを閲覧してもらうためにはSEO（Search Engine Optimization）は重要な要素だ。新しい立ち上げたばかりのサイトでも適切にサイトを作っていれば、特定のキーワードで検索順位が上位になり、検索流入もきちんと確保できる。サイト制作者側の視点で抑えておきたいポイントをまとめてみよう。
[1] 1つのコンテンツを複数のURL表現にしない
検索エンジンではURLが異なれば違うページと認識される。トップページでよくある失敗例は、
http://www.example.com/
http://www.example.com/index.html
http://example.com/
http://example.com/index.html
の4つのURLそれぞれで同じコンテンツにアクセスできるケースだ。このような状態になっていると、1つコンテンツが持つ価値がそれぞれに分散し、検索結果に表示され難くなる。
対処方法としては、次の2つになる。
- いずれか（http://example.com/）をマスターと定め、ほかのURLからは301リダイレクトを行う
- それぞれのページのhead内にcanonicalを設置する
1の場合は、ApacheであればRewriteRule（mod_rewirte）でNginxであればrewrite設定で行う。たとえばwww付きをwwwなしにリダイレクト統合する例を示すと以下のようになる。
・Apacheの例
<VirtualHost *:80>
ServerName www.example.com
RewriteEngine On
RewriteRule ^(.*)$ http://example.com$1 [R=301,L]
</VirtualHost>
・Nginxの例
server {
server_name www.example.com;
rewrite ^(.*)$ http://example.com$1 permanent;
}
2の場合は以下の記述を該当ページのみに追加する。
<link rel="canonical" href="http://example.com/">
これによって複数のURLで閲覧できる状態だったとしても、検索エンジンではhttp://example.com/であると認識してくれるようになる。
なお、canonical記述の追加には注意が必要だ。テンプレートなどでこの記述を構成したとき、誤って該当ページ以外に同じcanonical記述が表示されてしまうミスがよくある。こうなると、かえって混乱を拡大させることになってしまう。注意深く正確に実装できなさそうであれば301ディダイレクトのみを利用していたほうが無難である。
[2] ドメイン変更、ページURL変更の際は適切に301リダイレクト
既存の/about.htmlを/aboutに変更したいなどURLを変更する場合は、古いURLから新しいURLに301リダイレクトを行っておく。とくにサイト運営期間が長いサイトでは古いURLに対しては一定の価値があるので、それを捨てずに適切に新しいURLに移行しておくのが重要だ。結果的にサイト全体にも有利に働く。
サイトドメイン名を変更する場合も同様だ。対応方法としては、①で紹介したwwwありをwwwなしに統合する方法と同じになる。
WordPress上で301リダイレクト対処
リダイレクト設定はWebサーバー側の設定で行ったほうがいいが、サーバー環境によってはWebサーバーの設定が変更できない場合もあるだろう。WordPressを使っている場合は、WordPress上のテーマのための関数（function.php）で設定することも可能だ。たとえば/about.htmlを/aboutに301リダイレクトするには、以下を記述すればよい。
if ($_SERVER['REQUEST_URI'] == '/about.html') {
header('HTTP/1.1 301 Moved Permanently');
header('Location: ' . home_url() . '/about');
exit();
}
WordPress自体がPHPエディタのようなものなので、上記はPHPの機能を使ってリダイレクトしてしまうというものだ。リダイレクト設定数が多くなってきたらそれなりに負荷になるし、管理も煩雑になるので、この方法は一時対処的なものにだけ利用したい。サーバーをアップグレードするなり、Webサーバー側で修正する方向をできるだけ検討していこう。
[3] サイト内のリンク切れをなくす
検索エンジンの基本アルゴリズムとしてページに対する被リンクは重要な要素である。これは外部サイトからだけなく、サイト内部のリンクも同様だ。サイト内の1ページごとの関係性もリンクで構成されており、サイト内にリンクが切れているところがあれば、そこから評価を捨てている状態である。もちろんユーザービリティとしてもリンク切れが存在するのは問題だ。
リンク切れチェックツールにはいろいろあるので、規模や運用に合ったものを見つけていただきたい。簡易な方法としては、wgetでミラーを取得し、そのログを使う方法がある。
$ wget -m -o log http://example.com/ $ grep -n ^HTTP log |grep -v 200 1609:HTTP request sent, awaiting response... 404 Not Found 1615:HTTP request sent, awaiting response... 301 Moved Permanently
上記の実行例では、wgetのログをlogファイルに出力し、HTTPのレスポンスコードが200以外の行を抽出している。もしリンク切れがあり、404エラーがあれば、上記のように行数とステータスコードを確認できる。いくつか表示されるようであれば、logファイルを見直して該当ページのリンクを修正していけば良い。
なお、wgetでURLの存在だけを確認したい場合は、「-spider」オプションでHEADリクエスト（実際にファイルを取得しない）を実行する方法もあるので活用していただきたい。
wget --spider <URL>
[4] 空Aタグやiframeをなくす
CMSのプログラムやHTMLのテンプレートを使っていると、作業ミスやバグによって、空Aタグが存在していることがある。
<a href=""></a>
これは前述のリンク切れと同じ状態になるので避けたいものの1つだが、何も表示されない状態なので普段見つけることはできない。何かしらの機会にwgetなどでHTMLファイル群を手元に集め、いくつかのミスパターンを想定してチェックしておく。
$ grep 'href=""' *.html $ grep '"></a>' *.html
加えて、iframeを使って要素を表示している場合は本当にそのiframeが必要かどうか再検討しよう。iframeはAタグと同じように評価されており、iframeのsrcに指定されているURLはリンク先になる。問題なのは、iframeを使う多くの場合、src=で指定されたHTMLページには戻るリンクがなく、リンク構造的には行き止まりになってしまっていることだ。行き止まりはリンク切れと同じ状態なので、こういった要素は置かないほうが良い。
[5] imgタグにはaltを設定し、適切な文字を使う
imgタグを設置した場合、alt属性の設定を忘れがちだ。アクセシビリティとしてもHTML文法的もaltの設置が必要だということもあるが、altを利用したSEOスパムへの対策が行われているので正しく設定しておく。
<img src="/img/sample.png" alt="サンプル画像">
この際、altに文字が必要だからといって「alt=”画像”」を使いまわしてしまうというのはNGだ。「画像」キーワードのスパムになってしまう。画像が表示されない場合、もしくはスクリーンリーダーで閲覧している人向けに、1つ1つ適切である文字列を設定しくようにする。
なお、アイコン画像などには文字は必要ない。観点としては「スクリーンリーダーで閲覧している人に必要な情報か？」で間違いがない。デザイン画像はimgタグを使わずCSSスプライトへ移行しておくのがベストだが、ひとまずということであれば「alt=”"」としておく。CSSスプライトについては「画像ファイルの最適化とスプライト画像の作り方」の記事にまとめてある。
[6] ページを削除したとき、ないときは404を返し、メンテナンスは503を返す
Webサーバーでは、ページが存在しないURLにアクセスがあった場合に404のステータスコードを返す。当たり前の動作であるが、CMSやWebサーバーの設定によっては、ページが存在しないのに正常応答の200を返してしまうことがある。昔のSEOでは404を正しく返さないことはそれほど気にする点ではなかったが、現在は404応答すべきページが200応答しているとソフト404と判定され、評価されない要素の1つとなっている。
また、404を正しく応答することによって、サイト内リンクのリンク切れを見つけやすくなるメリットもあり、リンク切れに対応しやすくなることで結果的にサイトの価値が上がることになる。
404応答が正しくできているかを確認するには、WebブラウザのURL入力で適当な文字（/aaaaaaaaa）などを入力してその応答を見ることが簡単だ。たとえばGoogle Chromeで閲覧している場合はF12キーもしくはCtrl＋Shift＋IキーからNetworkタブを選択すればアクセスの様子が確認できる。
図1のように404となっていれば正常だ。404が返ってきてさえいれば、ページの表示内容は新着リストがあったりサイト内検索があったりと、どのようなものでもかまわない。
なお、以前は削除したページのURLをトップページへ301リダイレクトしておくと良いというSEO的な対処方法もがあったが、これからは辞めたほうが良い。これもソフト404の対象になっているので、存在しないページは素直に404応答するようにしよう。
ロードバランサーの導入を検討
404応答の実装と同じく重要なのがメンテナンス時の503応答である。バックエンドの入れ替えなどでどうしてもサイト停止を伴うときは、503応答にしておいたほうが良い。本来的にも503を返すべきものである。何かしらの事故やメンテナンスで単純不通となり、しばらくサイトアクセスができない状態が続くとサイトの評価は下がっていく。1日ぐらいの不通時間があると目に見えて検索順位は低下してしまう。
対処方法としては、ロードバランサーがフロントにあればロードバランサーで503を返すのが楽である。ロードバランサーがなく、Webサーバーがフロントにある状態で動作しているようであれば、代替えマシンや別プロセスで503を応答できるようにしておき、その間にシステムのメンテナンスを行い、元に戻すという流れになるだろう。理想をいえば何かトラブルを検知したら503ページが表示されるような仕組みを用意しておくというのがベストである。そういった機能はロードバランサーに用意されている。
[7] ページングなども含めアンカーテキストは適切な文字例にする
リンクを設置する場合、そのリンクの文字であるアンカーテキストは重要な要素である。アンカーテキストによって、リンク先ページがどのようなキーワードで検索結果に表示されやすくなるかが決まってくる。したがって各ページ、ヘッダー、フッターに設置するリンクにどのような文字列を使うかにもできるだけ配慮したい。
昔からある典型的な失敗例は「こちら」のリンクである。このようなリンクがあれば、前後の文章を調整し、リンク先ページを表現できる文字列に対してリンクを設定するようにしておく。
FAQページは<a href="/faq">こちら</a> ↓ <a href="/faq">FAQページ</a>
また、ページングのリンクとして「前へ」「次へ」などが使われることが多いが、これもリンク先ページを示す文字列に変えておいたほうが良い。
<a href="/page/8">前へ</a> <a href="/page/10">次へ</a> ↓ <a href="/page/8">8ページへ</a> <a href="/page/10">10ページへ</a> もしくは <a href="/page/8">タイトル8</a> <a href="/page/10">タイトル10</a>
もう1つの注意点としては、アンカーテキストの重複である。サイト内で「会社情報」というリンクがあった場合、その先のページは一意に決まっていたほうが良い。たとえばあるページの「会社情報」のリンクは会社概要のページで、別のあるページの「会社情報」のリンクでは地図や住所をまとめたページというのはページの露出を下げてしまう。サイト内では、アンカーテキストとページが1対1対応するような構成を心掛けておく。
[8] レスポンスを速くする
サイトアクセスから表示までのスピードは速いほうがいいのは当然だが、数年前からレスポンスのスピードも検索順位に影響するようになり、レスポンスが悪いサイトはそれだけで評価が下がっている。より具体的にはリクエストからHTMLの取得終了までに3秒以上はNGだ。目標は1秒以内で、それ以上かかっているようならサーバー構成を見直したり、キャッシュの利用やDBのチューニングを検討したりするなど、システムを見直すことは必須だろう。
また描画までの処理時間も関係してくる。現在はあまり大きな差はないようだがスマートフォン向けとPC向けでも評価が変わっている。HTML構造に近い部分でのチューニングでは、GoogleのPageSpeedが利用できる。「PageSpeedを使ってWebサイトを最適化・高速化しよう」の記事にまとめてあるので参照されたい。
[9] 引用されやすいページを必ず1ページは作る
サイト内に1ページだけでもいいので、ある特定の読者には引用されやすい、リンクを張ってもらいやすいページを作ろう。外部からのリンクが1つもない状態では、直接の流入もないばかりか、検索順位も上がらない。検索結果で上位に表示されるためには外部からのリンクは必須だ。
アイデアや企画といった類の話になるが、たとえば会社サイトを作る場合は業務と関連する統計情報をまとめたページや、アンケートの集計結果などが有力な候補となる。また、業界ニュースについて独自に分析考察したものやTwitterで気軽につぶやかれやすい内容も候補になる。
そしてサイト制作の観点では、作成したページにはツイートボタンを置いておこう。現在のところFacebookのいいねやGoogle Plusボタンは検索結果に影響ないが、Twitterに関してはまとめサイトやコピーサイトがいくつか存在するため、つぶやかれる（つぶやく）ことによって外部サイトからのリンクが生成されることが多い。
[10] 似た内容のページを作らないようにする
サイト内に似たコンテンツがいくつもあると、サイトや各ページの評価が下がりやすくなる。headタグ内（titleタグやdescription）を含めたページ内容が似ていると補足インデックスに入って検索結果に表示されないこともある。ページ作成で手を抜かない、流用を最小限にするというところが大事だ。より具体的に注意する点は以下の3つである。
- テキストが少ない
- ヘッダーやフッターでの共通領域が大きい
- サイト内の複数のページで同じ文章を使いまわしている
基本のルールとして「各ページにオリジナルの2000文字以上の文章を設置する」としていれば、これらの問題は回避しやすくなるだろう。
加えて、titleタグとdescriptionに記述する内容もページコンテンツ同様と考えて重複がないように、似たものにならないように対応する。とくにtitleタグの重複はNGだ。たとえば下部階層のページのtitleタグ内がトップページと同じ文字列だった場合、トップページの評価が下がり最悪のケースだと検索結果にそのページが出なくなる。トップページのtitleタグに使ったサイト名を汎用的にその他ページにも流用しがちなので十分に注意されたい。
titleタグとdescriptionの重複チェックにはWeb Master Toolsが活用できる。Web Master Toolsの使い方については「実践的なGoogle ウェブマスター ツール（Webmaster Tools）運用」にまとめてあるので参照いただければと思う。
SEOの基本まとめ
以上紹介したポイントは、Webサイト制作では本来当たり前のことであるが、実際に稼働しているサイトを見ると不十分であることが多い。SEOというと小手先のテクニックを指してサイト運営者を騙す広告代理店や専門業者がいたりするが、実際のところはサイト制作における正確な知識をベースに、ミスなく運営ができているかのほうが重要だ。まずはきちんとインターネットやHTTP、Webサーバーソフトウェアを正しく理解し、その理解のもとに運用できているか、Web Master Toolsなどのチェックツールを活用して確認していくだけでも目に見えて効果は出てくるものである。
最後に、Google検索結果の「&pws=0」について触れておこう。Google検索で何度も検索していると環境のカスタマイズが行われ、良く見るサイトが上位にきてしまうのだが、検索結果のURLに「&pws=0」を付与することでこのカスタマイズ機能を無効化にでき、比較的中立的な検索結果を表示できるようになる。使っていないと忘れてしまうので、普段から利用しておくことをお勧めする。
おしらせ
この記事についてコメントする