スマートフォンのSEO（モバイルSEO）で速度対策は必須です。PCとは異なりページ速度やリダイレクト方法が順位に影響を与えます。スマートフォンのSEO対策に必要な要点を押さえて、最適化を行いましょう。

リダイレクトを避ける

リダイレクトの数だけ読み込み時間が掛かります。

Googleはリソースの消費を嫌います

Googleはクローラーが迷子になったり、幾度もクロールしてリソースを消費し、リダイレクトしたあげくに元のページに戻されるようなリソースの無駄な設定を嫌います。

PCサイトとスマホサイトのリダイレクトを避ける

まずリダイレクトを避ける事が重要です。

Googleがレスポンシブデザインを推奨している理由の一つは、PCでもスマートフォンでもリダイレクトする事無く、１つのHTMLソース（ワンソース）でクロールできる事に有ります。

  • PCからスマホサイトへリダイレクトするときは１度だけにする
  • rel=”alternate”タグでGooglebotを誘導する
<link rel="alternate" media="handheld" href="http://(your-smartphone-site)">
  • 最も良い：レスポンシブデザインを使用しています
  • 問題なし：1度だけリダイレクトする（example.com – > m.example.com）
  • 不適切：複数回リダイレクト（中間リダイレクト）している
    （example.com – > www.example.com – > m.example.com – > m.example.com

https://developers.google.com/speed/docs/insights/AvoidRedirects

alternateタグの挿入方法と書き方

■リダイレクトする時は、まずPCページ内に以下を追加します。


<head>
<link rel="alternate" media="only screen and (max-width: 640px)"
      href="http://m.example.com/page-1" >

■次にモバイルページにrel=canonicalを入れます。


<head> 
<link rel="canonical" href="http://www.example.com/page-1" >

PCページとスマートフォンサイトのページは必ず１対１にしなければいけません。

■XMLサイトマップでalternateを書く方法


<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/page-1/</loc>
<xhtml:link
    rel="alternate"
    media="only screen and (max-width: 640px)"
    href="http://m.example.com/page-1" />
</url>
</urlset>

この場合もモバイル側にはrel=canonicalが必要です。

指定に誤りがあったらどうなるか？

誤ってPCとスマホのペアを作った場合、スマートフォン・サイトにSEO的な問題が発生すると理解して下さい。スマートフォンでの検索時に順位が落ちるか、正しい評価が行われなくなります。

以前は大きな問題では有りませんでしたが、既に過半数を超えるモバイルトラフィックがあるサイトでは死活問題となるでしょう。

古いプラグインを避ける

動画専用プラグインを要求するような記述を避け、HTML5ネイティブで動作する環境を提供しましょう。プラグインはユーザエクスペリエンスを損ね、セキュリティの問題を引き起こします。Adobe Flash等もプラグインを使用しない設計自体は実装済みです。

  • Windows UIで提供される最新のInternet Explorerは動画をプラグイン無しで再生できる。
  • Google Chromeは、全てのプラグインを削除予定です。
  • 最新のSafariはユーザの同意が無い場合プラグインを実行できません。
  • Firefoxもユーザの同意が無い場合プラグインを実行できません。

推奨するViewport

<!--
-->
<meta name=viewport content="width=device-width, initial-scale=1">

Googleは現時点ではwidth=device-width, initial-scale=1を推奨しています。設計段階でコーディングを担当するウェブデザイナーに相談し、以下の点が十分配慮されているか確認しましょう。

  • view-portは必ず設定すべきである。
  • デバイスに依存しないピクセル（DIP/Device-independent pixel）を指定する。*1
  • CSSピクセルを指定する。
  • @viewportの仕様はドラフト段階なのでmeta name=viewportも必ず加えるべきである。*2

*1：デバイスに依存しないピクセル（DIP）とCSSピクセルはほぼ同意味である。
【参考】いまさら聞けないRetina対応のための「ピクセル」の話

*2：@viewportのW3C　ドラフト「CSS Device Adaptation」

圧縮と不要なスクリプトの削除

ダウンロードの速度、帯域の節約、レンダリング速度の改善のために可能な限りファイルを圧縮するために設計段階でエンジニアに相談し、以下の点が十分配慮されているか確認しましょう。ほとんどの提案は専門的な知識が必要です。

  • サーバの圧縮を有効にする。
  • サーバー応答時間を改善する。
  • ブラウザキャッシュを有効にし期限を明示する。
  • レンダリングをブロックしているJavascriptをヘッダ行から排除する。
  • リソースを圧縮する。
  • 画像（サイズ）を最適化する。

参考資料のブックマーク

■　ページ表示速度を高速化させる17の方法（HTML/CSS篇）
■　ページ速度を高速化させる方法（サーバ・プログラム篇）
■　Avoid Landing Page Redirects – PageSpeed Insights
■　Avoid Plugins– PageSpeed Insights
■　Configure the Viewport– PageSpeed Insights
■　プラグイン フリー閲覧を準備する -msdn