かなり久々の投稿になってしまいましたが、今回はレスポンシブWebデザインとSEOについて、最近考えていることや調べていることを整理してみました。若干長めの文章ですが、久々にお付き合いください！前・後編の2回に分けて公開する予定です。
では、さっそく本題に入ります。
検索エンジンからのトラフィックの流入に収益を依存しているビジネスの場合は特に、SEOはビジネスの死活に関わる大きな問題です。80〜90%のトラフィック流入元がGoogleの自然検索というサイトも少なくないのではないでしょうか？現在、制作を手伝わせてもらっているサイトも自然検索からの流入が多いサイトで、モバイル対応にもUXへの影響だけでなく検索エンジンの評価への影響も考慮して、かなり慎重に進めています。
そこで、今回の投稿では、デスクトップ向けのウェブサイトをレスポンシブWebデザインでリニューアルする際、また、デスクトップにしかレイアウトが対応していないウェブサイトをモバイルに対応させる際に、SEOについて考えておくべきことをまとめてみます。
目次
まずは、SEOとは？というそもそも論から、次にレスポンシブWebデザインとの関係、そして最後にモバイル対応の際に気をつけるべきSEO対策についてまとめていきます。前・後編で以下の内容を予定しています。
前編
後編（予定）
- RWDとSEOに関する疑問と懸念
- モバイル対応で考慮すべきSEO
- Googleが推奨する3つの設定のまとめ
- 3つのモバイル対応リニューアル・プロセス
1. SEOの基本
ユーザにとって良いサイトを作ることがSEOにも良いはずだという信念のもと、これまでSEOの技術的なノウハウを積極的には学んできませんでした（あまちゃんですね。。。笑）。検索エンジンの目的が「ユーザが求める情報に、より的確に、よりすばやく誘導すること」だとすると、ユーザに求められるコンテンツを検索エンジンにもわかりやすく作ることが、SEOの基本だと考えています。
Googleも企業の理念として「Focus on the user and all else will follow.（ユーザにフォーカスすればあとは自ずと解決する）」とおっしゃってますし。セマンティックで快速な、ユーザにとって魅力的なコンテンツを作ることこそが、SEOだと信じています。
とはいえ、やはり技術的なノウハウを含めSEOに特化した全般の知識がないと競争に勝てないのも現実です。では、現代のSEOに必要なことはなんなのでしょうか？
SEOに必要な3つのこと
先日参加した「CSS Nite LP29 – In-house SEO」の「SEOを成功させる一覧ページの作り方」というセッションで、so.laの辻さんがおっしゃっていたSEOの基本についてのまとめ方がすごくしっくりきたので、ここで引用させていただきます（若干僕なりにアレンジしています）。
- マーケティング視点
- ユーザにとって魅力的なコンテンツ
- SEOのテクニカル・ノウハウ
この3つの僕なりの解釈は以下の通りです。
1. マーケティング視点
マーケティングの視点から、ユーザが求めているモノ・コトと、企業・組織が売りたいプロダクトをマッチさせるポイントを探り出す必要があります。そして、そのマッチするポイントを、SEOの観点からユーザがどのようなキーワードを使って、どのような意図で検索をするのか想像し、探り当てるスキルが必要になります。
2. コンテンツ
SEOには、検索するキーワードから読み取れるユーザの意図や課題を解決する魅力的なコンテンツが必要不可欠です。ここで鍵となるのは、企業が一方的に自社の製品を宣伝するプロモーション・コンテンツではなく、ユーザの役に立つ、魅力的なコンテンツを提供することです。
CSS Nite LP29の「理由と経路のマーケティング」というセッションで、何度も登壇者の住さんがおっしゃっていたのですが、「セリングのコンテンツ（一方的に自社の製品を宣伝するコンテンツ）」を検索エンジンに評価してもらうのは難しくなっているそうです。よく考えてみれば当然のことで、販促のみの一方的なコンテンツはユーザの役に立たない場合も多く、ユーザの役に立たないコンテンツは検索エンジンにも評価されるはずがないからです。インターネットの普及に伴い、人々が接する（得られる）情報の量が圧倒的に増えているなか、一方的な押し売りコンテンツはユーザに無視されるばかりか悪印象を与える可能性さえあります。
ユーザのニーズに沿ったコンテンツをつくり、ユーザの問題解決に貢献して（または解決するきっかけを提供して）ユーザに満足してもらう。これができてはじめて、ユーザにとって価値のあるコンテンツになります。そして、「ユーザの満足」を目的としている検索エンジンにとっても、それが「良いコンテンツ」なはずです。
3. SEOのテクニカル・ノウハウ
マーケティングの視点を持ち、ユーザの課題に応える魅力的なコンテンツがつくれたとしても、検索エンジンに適切に理解してもらい、評価してもらえなければ検索エンジン経由ではユーザにサイトにたどり着いてもらえません。そこで、どうすれば検索エンジンにもわかりやすいページが作れるのかという、技術的なノウハウが必要になります。検索エンジンを相手に、自分のコンテンツが的確に伝わるように「翻訳」が必要になるわけです。そして、ミスコミュニケーションのないように翻訳するには検索エンジンが扱う独特な言語を理解する必要があります。
やっぱり3本の矢が必要
自民党の成長戦略じゃないですが、SEOにも3本の矢が必要です。一番重要なのはコンテンツだと思いますが、マーケティング的な思考力やSEOのテクニカル・ノウハウも同じくらい大切で、どれが欠けてもSEOの成果を得ることは難しくなります。
2 レスポンシブWebデザインの基本と特徴
さて、ここでレスポンシブWebデザインとSEOの関係の話に入る前に、レスポンシブWebデザインについても、おさらいしておきます。
レスポンシブWebデザインも、その起点となるものは検索エンジンのそれと同じで、「ユーザ」のことを第一に考え、ユーザの役に立つサービスやコンテンツを提供することです。ユーザがどのようなデバイスを使ってウェブサイトにアクセスしても、満足してもらえる体験を提供することを目指して考えられたのが、レスポンシブWebデザインという手法です。
理想的なレスポンシブWebデザイン
しかし、手法はあくまで手法であって、それを使えば必ず良いウェブサイトができるというものでもありません。実装次第で良いレスポンシブWebデザインにもなれば、悪いものにもなります。では、理想とするべきレスポンシブWebデザインはどのようなものでしょうか？以前登壇したセミナーでも話しましたが、僕は以下のような要素を持ち合わせたレスポンシブWebデザインが理想だと考えています。そして、それらの要素は、概ね検索エンジンが目指す方向と合致しています。
- さまざまな端末で問題なく閲覧できる
- どんな端末で閲覧しても同じコンテンツと機能にアクセスできる
- どんな端末で閲覧してもデザインに統一感がある
- 同じURLでシェアできる
- 3G回線でもサクサク表示される
1. さまざまな端末で問題なく閲覧できる
パーセントなどの相対値を使ってデザインしたレスポンシブWebデザインなら、あらゆる画面サイズに対応するウェブサイトを作ることが可能です。スマホ・サイズから大画面TVサイズまで、どんな端末でも「問題なく」、できれば快適に閲覧できるレスポンシブWebデザインが理想です。
2. どんな端末で閲覧しても同じコンテンツと機能にアクセスできる
デスクトップPCで見たときはあったのに、スマホで見たらなかった。。。というのは、ユーザにとって一番ストレスな体験です。イギリスで行われた調査では、モバイルでのウェブ閲覧体験で一番不満に思っているのは、デスクトップ版にはあったコンテンツや機能がモバイルサイトで提供されていないことだったそうです。（ちなみに、この調査はこちら経由で知りました。）
3. どんな端末で閲覧してもデザインに統一感がある
たとえば、家のPCで見たサイトを外出先でスマホで閲覧した際に、サイトのデザインやナビゲーションがまったく異なるものになっていたら、ユーザは戸惑ってしまいます。画面サイズが異なるため、まったく同じレイアウトにするのは不可能ですが、ユーザが同じ情報を求めてサイトを訪れた際に、戸惑わないようなデザインの工夫をするべきです。デザインに統一感を持たせることでユーザに安心してもらうことは、ユーザへの大切な「お・も・て・な・し」だと言えるのではないでしょうか？
4. 同じURLでシェアできる
たとえば、スマホで見ていたサイトのURLをメールで送ってPCで開けてみたら、リダイレクトされてデスクトップ版のトップページに行ってしまった。。。といったことを体験したことはないでしょうか？すごく不便ですよね。レスポンシブWebデザインのような手法なら、URLを一つに保つことができ、シェアする際もユーザに不便な思いをさせなくてすみます。
さらに、検索エンジンにとっても一つのURLで一つのコンテンツが提供されていることは、大きなメリットになります。後で詳しく書きますが、「同一URL、同一コンテンツ」については、GoogleもBingも基本的には同じ考えを示しています。
5. 3G回線でもサクサク表示される
ユーザは、好きなときに、好きな場所で、その時持ちあわせた端末でウェブサイトを閲覧します。たとえば3G回線でサイトを閲覧しても、サクサク表示されるサイトのほうがユーザにとって望ましいのは当然です。ユーザは数秒以内にサイトが表示されないと離脱してしまいます。ユーザは2秒以内にページが表示されることが当然だと思い、3秒以内に表示されない場合は離脱するというAkamaiとGomezの調査もありますし、モバイルの場合は10秒は待つという調査結果もあるようです。
さらに、Nielsen Norman Groupの調査によると、人間の特性として考慮すべき時間制限が3つあるそうです。
- 0.1秒 > システムからの反応を待てる時間
- 1.0秒 > 思考の流れがさえぎられるまでの時間
- 10秒 > 1つのことに集中していられる時間
これらの調査結果を総合的に判断すると、2秒以内にファーストビュー（最初の画面）で視認できる部分を表示させ、10秒以内にコンテンツのすべてを表示させるのが妥当な技術目標かもしれません。また、一部のコンテンツを遅延して読み込ませる「Conditional Loading」を実装している場合は、ユーザに0.1秒以内になんらかの反応を示して、1.0秒以内には表示を完了しているのが望ましいと考えられそうです。
理想的なRWDのまとめ
上述した5つの要素は、レスポンシブWebデザインでサイトを制作する際に必ず考慮するべきことだと思います（もちろん、RWDでない場合にも）。逆に、これらが実現できないのであれば、レスポンシブWebデザインのメリットは大きく薄れてしまうと考えて良いと思います。
レスポンシブWebデザインを、フレキシブル・グリッド、フレキシブル・メディア、メディアクエリという3つの技術要素を用いた手法と定義するのみで終わらせてしまうと、上述したような大切なことを忘れてしまいがちです。
改めて言いますが、レスポンシブWebデザインの本質は「ユーザの閲覧環境に関係なくユーザに満足してもらえる体験を提供すること」です。これは検索エンジンが目指すところと同じはずです。それゆえに、理想的なレスポンシブWebデザインの実装は、検索エンジンにとっても優しい実装方法だと考えて良いでしょう。
3. レスポンシブWebデザインはSEOにいいのか？
では、レスポンシブWebデザインにすれば自動的にSEOに良いのかというと、そんな簡単な話でもありません。たとえば、PC版サイトとはURLが違う別モバイル専用サイトを作ったとして、それがレスポンシブWebデザインよりも検索結果で上位に表示されやすいのでしょうか？
答えは、実装次第としか言えません。
「[SEO] レスポンシブウェブデザインと別サイト(URL)、どちらが検索順位が上がりやすい？」という記事で「他の全ての条件が仮に同一であるならば、検索順位に差異が出ることはない」と、はっきり渡辺さんがおっしゃっています。結局、どのような手法を選択しても、Googleが推奨するような手法で、それぞれの手法に適した対策をしっかり行えば、技術的な部分では平等に評価されると考えて良いと思います。ただ、どの手法が最適化しやすいか、また、サイト運用・運営面でのメリットなどを総合的に考えると、やはりGoogleが推奨しているようにレスポンシブWebデザインのような手法が一番SEOが施しやすいのではないかとも考えています。
レスポンシブなウェブサイトの特徴
上述した5つの要素を盛り込んだ、理想的なレスポンシブWebデザインのウェブサイトはどのようなサイトになるのでしょうか？それは、自ずとコンテンツが中心に考えられたサイトになるはずです。さまざまな画面サイズでより良い閲覧体験を提供することを試みると、自然とコンテンツをいかに最適化し、より良いものにできるかにフォーカスが行くからです。レスポンシブWebデザインにしても、コンテンツに変化がなければ結果は得られないのは、2年ほどRWDサイトの制作や運営で試行錯誤してみて実感していることです。あたりまえなんですけど。。。
先日参加した「CSS Nite LP29 – In-house SEO」の登壇者の方々も、共通してSEOにとってのコンテンツの重要性を訴えていました。ユーザが求めているのは真に有用なコンテンツであり、レスポンシブWebデザインでもフォーカスはコンテンツにあります。そして、ユーザに有用であり続ける必要がある検索エンジンにとってもコンテンツが重要であることは明白です。
レスポンシブWebデザインは「銀の弾丸」なのか？
ユーザに最善の体験を提供することがSEOへの近道だとすると、ウェブサイトの制作手法が必ずしもレスポンシブWebデザインでなければならないとは限りません。場合によっては別モバイル専用サイトが最善るかもしれませんし、アプリが最適な場合もあるかもしれません。すべてレスポンシブWebデザインで解決できたらどんなに楽かと思いますが、現実はそんなにシンプルではありません。プロジェクトごとにユーザのニーズに適した手法、また、マーケティングのストーリーの流れに沿った最適な手法を組み合わせて実装しないと、複雑化したユーザの趣向やニーズに応えるのが難しくなっています。ニーズに合わなければ無視されるだけなので、大変な努力が水の泡になってしまいます。
さて、ここからは技術寄りの話を整理していきます。まずは公表されているGoogleの考えから整理してみます。
4. Googleがモバイル対応にレスポンシブWebデザインを推奨する理由
Googleは「Google Developers – Webmasters」ウェブサイトで、「携帯端末に最適化されたウェブサイトの構築方法」と題して、スマートフォン専用サイトの設定として「すべてのデバイスに同じHTMLを配信し、CSSメディアクエリのみを使って各デバイスでのレンダリングを決定する」レスポンシブWebデザインのような方法を第1にすすめています。
※レスポンシブじゃないとダメだと言っているわけではないのでご注意を！
そして、その理由を要約すると以下の3つだと述べています：
- 1つのコンテンツに対するURLが1つ
- Googleがインデックスしやすくクロールも効率的
- リダイレクトが必要ない
1. 1つのコンテンツに対するURLが1つ
1つのコンテンツに対するURLが1つであることで、ユーザが閲覧したり、共有したり、リンクを張るといった行為が容易になります。たとえば、デスクトップPCを使用中にFacebookで見かけたリンクをクリックしたら、モバイル版で、デスクトップ版へのリンクが簡単に見つからなかったら不便ですよね。
2. Googleがインデックスしやすい、クローリングも効率的
モバイル版とデスクトップ版で似たようなコンテンツが重複して存在することは、クローリングの量を増やすだけでなく、情報のインデックス化を複雑にします。それが、一つのURLで同一のコンテンツが提供されていれば、多くの問題は解決します。これはGoogleの都合ではありますが、クロールやインデックスがしやすければ、より早く、より的確に、より少ないサーバリソースで、ユーザが求める情報を提供できるようになることを意味しているのでしょう。検索エンジンのサーバ運用にもお金がかかります。それを考えると「クロール・バジェット」が少なくすむレスポンシブWebデザインのサイトのほうが、検索エンジンには親切です。
3. リダイレクトが必要ない
たとえばモバイル端末でwww.example.comにアクセスするとm.example.comにリダイレクトされるような設定をよく見かけます。リダイレクトは無駄なサーバやデータリソースを使うだけでなく、ユーザにとっても、タイムラグや求めていないページへのリダイレクトなどの問題があります。また、ユーザエージェントを判別してのリダイレクトには技術的な問題も少なくないので、ユーザにも、検索エンジンにも、制作者にもメリットがないものです。実際、リダイレクトの設定は手間がかかりますし、なによりメンテナンスが容易ではありません。
Googleのワンソースへのこだわり
これら3つの理由を見ると、Googleは同一URLで同一のコンテンツを提供することに終始フォーカスしています。上記のメリット・デメリットを考慮すると、同一コンテンツを同一URLでさまざまな画面サイズに対応させることができるレスポンシブWebデザインが良いとの判断に至っているようです。これは、先ほどまとめた理想的なレスポンシブWebデザインの5つの要素とも合致しています。
ちなみに、Googleは携帯端末への対応として、上述したレスポンシブWebデザインと、以下の2つの方法を推奨しています。
- 同一のURLで異なるコンテンツを提供する
- 異なるURLで異なるコンテンツを提供する
そして、それぞれにおいて、推奨する設定を明示しています。
※上述した内容は、Google Developersウェブサイトに記載されていた内容を僕なりに解釈したものです。Googleの公式な見解は「携帯端末に最適化されたウェブサイトの構築方法」をご覧ください。
RWDとSEOに関するいくつかの疑問と懸念
さて、ここからはRWDとSEOに関する疑問と懸念をまとめていこうと思うのですが、だいぶ長くなってきたので後編に持ち越したいと思います。後編では以下のような疑問、懸念について、さらに、RWDで考慮するべきSEO、Googleが推奨する設定の詳細、それから、モバイル対応の際に考えられるリニューアルのプロセスをまとめていきます。
- Googleは「Content Parity」を推奨するのか？
- 同一のコンテンツとは100%同じことを意味するのか？
- スリム化したコンテンツでSEOで勝てるのか？
では、後編完成まで、しばしお時間ください！？良い3連休を〜
2013年10月11日に公開され、2013年10月19日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。