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/" />
アノテーションの注意点
- 必ず、コンテンツの内容が一致するページに対してアノテーションを行う
- 全てトップページを指定するような行為はNG
- PCとスマホでURL構造が一致しない場合はアノテーションを指定せず検索エンジンに任せる
２．リダイレクト
アノテーションと同じく、スマホサイトが別に用意されている場合は、リダイレクトの設定も必要です。（レスポンシブデザインのサイトには必要ありません）
モバイルユーザーがPCサイトにアクセスしたら、スマホサイトにアクセス出来るようにリダイレクトをさせましょう。
PCユーザーがスマホサイトにアクセスした場合に関しては、リダイレクトは必ずしも設定しなくても大丈夫です。
リダイレクトは.htaccessを使って302リダイレクトで設定しましょう。
.htaccess記述
RewriteEngine on
RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{THE_REQUEST} !^.*\.(jpg|gif|png|css) [NC]
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
#RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^(.*)$ /sp/$1 [R=302,L]
リダイレクトの注意点
- 必ず、コンテンツの内容が一致するページに対してリダイレクトを行う
- 全てトップページを指定するような行為はNG
- 302リダイレクトを推奨（ただし301でも問題無し）
３．フォントサイズ
メインとなる本文のフォントサイズがおおよそ14px～16px程度になるようにしましょう。
あまりフォントサイズを小さくしすぎては見づらいサイトになってしまうので、SEOのためというよりも、あくまでユーザビリティのためと考えるべきでしょう。
ただし、コピーライト表記などで部分的に10pxほどの小さなフォントサイズを使う分には問題ないようです。
４．タップ要素
- リンクやボタンは指でタップするのに十分な大きさを確保する
- リンク同士の感覚を十分に取り、押し間違えないようにする
５．FlashはNG
スマートフォンでは通常、Flashコンテンツの再生をすることができません。
モバイルユーザーが利用できないコンテンツは利用しないようにしましょう。
６．表示速度
少ないながらも、表示速度も検索順位に影響が出てきます。
表示速度の確認には、Googleが提供しているPageSpeed Insightsを使って確認するようにしましょう。
PageSpeed Insightsでは、ページ表示速度を点数形式で採点してくれて、修正が必要な箇所の指摘やページ表示速度を向上させるための方法を指摘してくれます。
７．クロールができる状態にしておく
モバイルサイトをクローラーがクロールできる状態にしておきましょう。
robots.txtを使ってJavaScriptやCSS、画像へのクロールを禁止してはいけません。
クローラーが正常にモバイルサイトをクロールできているかどうかを確認するには、Search Console（旧ウェブマスターツール(Search Console)）のFetch as Google上で確認することができます。
まとめ
さて、今回のまとめです。
- スマホサイトが別にある場合はアノテーションの設定をする
- スマホサイトが別にある場合は302リダイレクトの設定をする
- フォントサイズを小さくしすぎない
- タップできる場所は押しやすいようにサイズと余白を調節
- Flashは使わない
- 表示スピードをPageSpeed Insightsで確認
- クロール可能な状態にしておく
当初騒がれていたほどの大きな影響は見られなかったものの、やはりモバイル検索時にはスマホ対応サイトが未対応サイトよりも上位に表示されるケースは多々有ります。
出来る限りモバイル対応は進めておきたいところですね。
