4月21日にモバイルフレンドリーアップデートが行われたことを受けて、社内の情報共有用に資料を作成したので、その内容をこのブログでも紹介したいと思います。

作成した資料

１．アノテーション

スマホサイトが別に用意されている場合は、アノテーションの設定が必要です。（レスポンシブデザインのサイトには必要ありません）
アノテーションとは、PCサイトとスマホサイトの関係性を検索エンジンに伝えるために行う記述のことを言います。

PCサイトには次のようにrel=”alternate“でスマホサイトのURLを設定をします。

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

スマホサイトには次のようにrel=”canonical“でPCサイトのURLを設定します。

<link rel="canonical" href="http://www.example.com/" />

アノテーションの注意点

２．リダイレクト

アノテーションと同じく、スマホサイトが別に用意されている場合は、リダイレクトの設定も必要です。（レスポンシブデザインのサイトには必要ありません）
モバイルユーザーがPCサイトにアクセスしたら、スマホサイトにアクセス出来るようにリダイレクトをさせましょう。

PCユーザーがスマホサイトにアクセスした場合に関しては、リダイレクトは必ずしも設定しなくても大丈夫です。

リダイレクトは.htaccessを使って302リダイレクトで設定しましょう。

.htaccess記述

リダイレクトの注意点

３．フォントサイズ

メインとなる本文のフォントサイズがおおよそ14px～16px程度になるようにしましょう。
あまりフォントサイズを小さくしすぎては見づらいサイトになってしまうので、SEOのためというよりも、あくまでユーザビリティのためと考えるべきでしょう。

ただし、コピーライト表記などで部分的に10pxほどの小さなフォントサイズを使う分には問題ないようです。

４．タップ要素

５．FlashはNG

スマートフォンでは通常、Flashコンテンツの再生をすることができません。
モバイルユーザーが利用できないコンテンツは利用しないようにしましょう。

６．表示速度

少ないながらも、表示速度も検索順位に影響が出てきます。
表示速度の確認には、Googleが提供しているPageSpeed Insightsを使って確認するようにしましょう。

PageSpeed Insightsでは、ページ表示速度を点数形式で採点してくれて、修正が必要な箇所の指摘やページ表示速度を向上させるための方法を指摘してくれます。

７．クロールができる状態にしておく

モバイルサイトをクローラーがクロールできる状態にしておきましょう。
robots.txtを使ってJavaScriptやCSS、画像へのクロールを禁止してはいけません。

クローラーが正常にモバイルサイトをクロールできているかどうかを確認するには、Search Console（旧ウェブマスターツール(Search Console)）のFetch as Google上で確認することができます。

まとめ

さて、今回のまとめです。

当初騒がれていたほどの大きな影響は見られなかったものの、やはりモバイル検索時にはスマホ対応サイトが未対応サイトよりも上位に表示されるケースは多々有ります。
出来る限りモバイル対応は進めておきたいところですね。