webhack / ウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログ

全国のウェブ系プログラマに捧げるSEO対策マニュアル

f:id:tkosuga:20151107220447j:plain
Photo credit: bjimmy934

WEBサイト制作会社やWEBインテグレーション事業にプログラマ・エンジニアとして携わっている方向けに、プログラマの立場から見たSEO対策の要点を説明します。

1. SEOの仕様はGoogleが決めている

以下記事の2015年8月時点での情報によると日本国内でのGoogleとYahooの検索エンジンシェアは93.69%です。Yahooの検索結果はGoogleを使っています。日本国内で使われている検索エンジンシェアほぼGoogleの独占状態にあります。

ASCII.jp:いつの間にか日本もGoogle寡占! 検索エンジンシェア早わかり2015 (1/2)|高橋暁子の「意外と知らない!? 業界ランキング」

そしてGoogleウェブマスター向けにガイドラインを案内しており、そこにSEOをサイトに実装する上で必要とする情報が記載されています。

例として、スマホ向けサイトでSEOを行うにはどのようにすれば良いのかの情報がモバイル SEO - ウェブマスター向けモバイルガイドで説明されています。

スマホサイトでSEOしたい」となった時に見るのは上のリンク先ページです。

2. ページ取得速度の改善

ページの取得速度(HTMLファイルを返す速度)が検索結果の順位に大きな影響を与えています。そのためページ取得速度を速くする対応を行うのですが、この時にプログラム・エンジニアは以下の6つを明確に分けて高速化の判断をしています。

  1. サーバーのネットワーク環境
  2. サーバーの性能
  3. ミドルウェア
  4. アプリケーション本体(プログラム)
  5. アプリケーション以外のリソース(画像ファイル/CSSファイルなど)
  6. ユーザーの環境(利用ブラウザ・スマホ回線)

「サイトが遅い」と現場に相談しに来たディレクターやマネージャと以下のような会話をする事があると思います。

ディレクター「サイト遅いんだけど速く出来ない?」
現場「どこを?」
ディレクター「え?どこも何も遅いから速くして」
現場「だから何処が遅いの?」

はい、ここでディレクターにイラっとされましたよね。現場としては「何が」遅いかが重要なので「どの部分が遅いのか教えてもらえませんか?」から始めましょう。

中国からのゲストと一緒に中華料理を食べに行くときに「中華料理」だけでは何の料理か伝わらないので「四川」「広東」「上海」「北京」の中華料理と伝えるのと同じ理屈です。

3. ページ表示速度の改善

SEOではページ取得速度が重要ですが、ページ取得後の表示速度(HTML取得後に画像など表示されるまでの時間)もあんまりに遅いサイトではユーザーが直帰してしまいます。そうするとSEOで大切になるバックリンクの獲得やソーシャルシグナルを得る事が出来ないのでページ表示速度を改善します。

ページ表示速度にはレンダリング時間とリソース取得時間の2つが大きく関係します。

3.1. レンダリングの高速化

手短にレンダリングを高速化する方法を説明すると、レンダリングをブロックする要素を減らすか非同期にする事です。この方法についてもGoogleから情報が公開されています。

3.2. リソース取得の高速化

リソース取得を速くする方法を本当に簡単に説明するとリソースの量とリソース取得回数を減らす事です。

具体的にはCSS/JSファイルのビルドツールを使ってリソース取得回数を減らす、画像最適化ツールを使ってJPEGを軽量化する等です。

Qiitaに書いたサーバーサイドで画像最適化する方法を紹介します。

今いち伝わらない方のために、リソース取得の高速化をコンビニ休憩に行く例で置き換えて説明します。コンビニ休憩には毎日行くものとします。

コンビニ休憩を最適化する前

  • 昼と晩で1日2回×お菓子とパンとジュース=40回×500円=20,000円
  • 遠いけど品ぞろえが充実してるローソンまで(往復10分+買い物10分)×40回=800分

コンビニ休憩を最適化した後

  • 晩だけの1日1回×お菓子とパン。飲み物は持参=20回×350円=7,000円
  • 近いけど品ぞろえが好みじゃないセブンまで(往復5分+買い物5分)×20回=200分

毎月13,000円も節約できて600分の時短に成功しました!

4. 既存のSEOライブラリ

Ruby On RailsにはサイトにSEO機能を組み込むライブラリのmeta-tagsが公開されています。

github.com

各種メタタグの出力から始まってCanonicalやページネーション、og(オープングラフ)の出力をサポートします。以下記事がmeta-tagsの使い方を日本語で説明しており分かり易いと思います。

morizyun.github.io

殆どのサイトでこのSEO関連の機能は共通です。毎回サイトに合わせて新しく作るよりもライブラリ使って楽しましょう。

5. 最新情報の入手とSEOな人たちへの対処

Google公式のSEO が必要なケースにてSEO業者には気をつけなさいと説明されている現状があります。

野球を知らない人がバッターに「野球は木の棒をボールに当てるだけ」なんだから野球なんて簡単だろ?というネタがありますが、SEOな人たちも同じ事を言います。

「そんなに簡単ならお前がやれよ」と言うと波が立つので、やんわりと全ての物事には一定の制約がある事を伝え、必要であれば何故それが的外れなのかを説明するのですが、この何も生み出さないやり取りに時間を取られるのが嫌です。

2015年11月時点、サイト実装上で必要な技術的なSEO情報の多くはGoogleが公開しています。最新のSEO情報はSearch Engine Landを追いかけていればほぼ網羅できます。

SEOは古い知識が役に立たないため、SEOな人たちには「サイトに足りない部分をGoogleのリファレンスを元にして教えて下さい」と伝えるだけで無駄な時間が減ります。

6. 既存ツールを使った方が良い場合

6.1. ランディングページ最適化の場合

検索結果からページに訪れたユーザーを満足させるには、検索エンジンに表示されるページをランディングページとして機能させる事が重要です。そのためには以下のような項目を最適化してページの質を上げて行くのですが

  • ユーザーに必要な情報をページに追加
  • CTA(コール・トゥ・アクション)の改善
  • 平均PVを増やすためにページの導線修正

ページ最適化機能をサイトに追加するには当然費用がかかるのと、以後のメンテナンスコストが掛かるので、それなら最初から「マーケティングオートメーションに月額払った方が良いんじゃないの?」と思う所です。

HubSpot(ハブスポット)Marketo(マルケト)に代表されるマーケティングオートメーションがページ最適化に特化した機能を備えています。

ゼロベースの知識から一生懸命勉強してランディングページ最適化の機能を実装するよりも、最初からその機能が組み込まれているツールを使った方が的確に最適化が出来ます。

6.2. プリレンダリングする場合

Ajaxサイトでユーザーにまずプリレンダリングしたページを見せる場合に、サイトクロールしてプリレンダリング結果を出力するツールを自作する場合があります。

でもゼロから自作するよりも既存のツールを使った方が楽な事が多いので、積極的に以下のようなツールを使いましょう。

prerender.io
github.com

まとめ。SEOが大切と分かっているので皆(基本的には)協力したいと思ってる

検索エンジンの上位に表示され、たくさんの人にサイトを使ってもらえるのは嬉しいです。そのためにはSEOが必要で各ページにtitle/descriptionが適切に入力される仕組みにしただけでもSEO効果があるのは直ぐに理解できます。

今はGoogleからドキュメントが提供されていますし、昔のように要領を得ない話やとんでもない与太話に振り回される事は減ったと思います。

ウェブサイト側でSEOの仕組みを入れてもページ内容が充実しない限りは検索結果ページに上位表示されないので、ここを取り違えられて「サイト側にこの仕組みが入れば順位が爆上がり」と勘違いされている場合は例外的ですが協力に躊躇するでしょう。このような場合は誰だって躊躇します。

どんなに素晴らしいウェブサイトでもプログラマ・エンジニアの協力が無ければ満足なSEO対策を出来ないのが今のSEOなので、従来のダーティーなSEOのイメージを捨てて、SEOの技術的な部分を勉強してみると面白い発見があると思います。

最後に

分からない点や気になる事があればコメント欄から質問してもらえればと思います。また直接質問したい方はTwitterに連絡をもらえればと思います。terukazu kosuga (@tkosuga) | Twitter