【2016-2017年版】スマートフォンサイトの正しい制作方法

iPhone Android Windows Mobile

2016年末〜2017年はスマートフォンサイトの制作・集客面で大きな見直しが必要となるでしょう。AMP(Accelerated Mobile Pages)の普及、そして、モバイルファースト インデックス※1)という2つの大きな変革があります。最新状況を踏まえ、あらためてスマートフォンサイトの制作方法をおさらいしてみます。

※1
モバイルファースト インデックスはGoogleから正式発表はされていません。現時点ではあくまで実施予定という段階ですが、おそらく2017年内には実施されるでしょう。

[追記]2016年10月5日にモバイルファーストインデックスの詳細が発表されました。

 

スマホサイトの制作方法は3つだけ

(Yahoo! と Google検索からの集客を必要とし、SEOに真剣に取り組むのなら)スマートフォンサイトの制作方法はGoogleが定める3つの方法のいずれかに沿って実装をしなければなりません。沿っていない場合、検索エンジンにウェブサイトが正しく評価されない可能性があります。

モバイルサイトを実装する 3 つの方法 – Google公式ガイドライン
https://developers.google.com/webmasters/mobile-sites/mobile-seo/?hl=ja

Googleの定める3つの方法を順に見ていきましょう。

1. レスポンシブ ウェブ デザイン(RWD)

RWDはユーザーのデバイス(パソコン、タブレット、モバイル)に関係なく、同じ URL で同じ HTML コードを配信し、画面サイズに応じて(つまり「レスポンシブ」に)レンダリングを変える構築方法で、(2014年以降)Googleは推奨し続けています。

メリット

  • Googleが推奨している実装方法
  • URL が1つなので、ユーザーによるコンテンツの共有やリンクが簡単
  • (デバイスごとに構築する他の方法に比べて)コンテンツが一元管理できる
  • ユーザーをデバイスごとに最適化したページにリダイレクトする必要がない

デメリット

  • デバイスに応じてきめ細かくコンテンツや広告を配信したいウェブサイトには適さない
  • 注力しているデバイスに偏りがある場合、デバイスによっては快適に閲覧できない(※2

※2
パソコン偏重の場合には1ページあたりのコンテンツ量が多くなり、モバイルで見たときに表示が遅くなるときがあります。逆にモバイル偏重だと、パソコンから見たときに中身がスカスカになるときがあります。前者の場合(PC偏重でモバイルが遅くなる場合)を改善するため、GoogleはAMPという新しい仕組みの提供をはじめています。AMP対応ページの設置を検討しましょう。

小ネタ ~よくある誤解~
「レスポンシブ ウェブ デザイン(RWD)を採用すると1つ作れば良いので、構築コストを下げられる」という誤解がありました(普及した今でもまだあります)。HTMLは1パターンで済みますが、デバイスごとの画面大きさの差異を無視できるようになるわけではありません。デバイスの大きさを基準に2~3パターンのデザインを用意、各デザインごとにスタイルシートや画像等を作成する必要があります。また、HTMLの構造設計をより綿密に行う必要があり、場合によってはデバイスごとで分けて構築する方が低コストで済む場合もあります。

 

2. 動的な配信

デバイスに関係なく同じ URL を使用しますが、ユーザーのブラウザ(正確にはユーザーエージェント)に応じて表示するHTMLを切り替える方法です。Vary HTTP ヘッダーを使用して、ユーザー エージェントに応じた動的配信をしていることを伝える必要があります。

メリット

  • URL が1つなので、ユーザーによるコンテンツの共有やリンクが簡単
  • ユーザーをデバイスごとに最適化したページにリダイレクトする必要がない
  • (RWDと比較して)デバイスに応じたきめ細かいコンテンツ配信ができる

デメリット

  • 新しいユーザーエージェントやマイナーなデバイスへの対応ミスが発生する可能性がある
  • デバイスごとの配信コンテンツに差が大きい場合、検索エンジンから正しく評価されない可能性がある(※3

 

※3
Googleはモバイルファーストインデックスを発表しました。現時点(この記事執筆時)ではパソコン向けサイトを第一基準にウェブページを評価していますが、逆転、すなわち、モバイル向けサイトを第一基準にウェブページを評価するようになります(予定)。そのため、PCページはSEOをしてキッチリ作っているものの、SPページが手薄になっている場合、検索順位が下がる可能性があります。

コストやリソースは無限でないため、PCサイトにSEO資源を集中させる手法は現時点(この記事執筆時)では「正」であり、実際、大規模なウェブサービスのプロモーションの中でも実施されています。Googleが方針を変えるのであって、あなたが依頼しているSEO専門事業者やコンサルタントが悪い指導をしているわけではありません。ただ、2017年にモバイルファーストインデックスが正式導入されることが発表された時点で、Googleの新しい方針に順応する必要があります。

 

3. 別々の URL

デバイスごとに異なるURLで構築する方法です。サブディレクトリ( http://sample.com/sp/ )やサブドメイン( http://sp.sample.com/ )により、デバイスごとに独立して構築するのが一般的です。HTTPリダイレクト、Vary HTTPヘッダー、canonicalタグ・alternateタグを正しく設定する必要があります。

メリット

  • デバイスごとに独立して構築・運用できるため(他の方法より)圧倒的に自由度が高い
  • 自由度が高いため、設計・構築コストが低い(ただし、管理コスト面でマイナスのときもあり)
  • デバイスごとに構築・運用会社(または部署)を分けやすい(ただし、管理面ではマイナス)

デメリット

  • (他の方法と比較して)管理コストが増える
  • 設定が煩雑でリダイレクトループなどミスが起きやすい
  • 複数の URL の関係を <link> タグ、rel=”canonical” 要素、rel=”alternate”要素で正しく伝える必要がある
  • デバイスごとの配信コンテンツに差が大きい場合、検索エンジンから正しく評価されない可能性がある(※3)
  • 自由に作りすぎて管理・SEO観点からは破綻することが多い

以上が【2016-2017年版】スマートフォンサイトの正しい制作方法となります。

Googleのアルゴリズムは変わりますが、正しいスマートフォンサイトで土台をきっちり固めていれば、右往左往することはないでしょう。SEOのあり方が変わる2017年のに向けてしっかり準備をしていきましょう。