モバイルSEOまとめ

モバイルSEOは、スマホでサイトを快適に閲覧できるようにして、ユーザービリティを高め、Googleの高評価をもらうことで検索順位向上につなげる施策です。Googleはモバイルファーストインデックスを採用し、PC向けサイトよりもモバイル向けサイトを重視するようになりました。レスポンシブなどの手法で、単にスマホ対応するだけでは評価してもらえない項目もあります。どのような判定基準があるのか、確認しておきましょう。

概要

モバイル向けSEOに関して、Googleは以下の7つの項目に対応することを推奨しています。

  1. テキストを読める大きさにする
  2. 縦スクロールでページが見れるようにする
  3. リンクやボタンを押しやすくする
  4. Flashを使わない
  5. モバイルとPCでは同じコンテンツを表示させる
  6. モバイルとPCで相互にリダイレクトする

このうち、ルール①~④は、「モバイルフレンドリー」と呼ばれています。Googleはこの4つの基準を使い、スマホに対応しているサイトかどうかをチェックしています。

ルール① テキストを読める大きさにする

概要

16pxを目安にフォントサイズを設定します。

Googleはテキストのフォントサイズをチェックする

ページをインデックスに登録する際、Googleはテキストの大きさが適切かどうかをチェックしています。フォントサイズが小さくて読みづらい場合、そのページは「モバイルフレンドリーではない」と判定されます。

モバイルフレンドリーは検索ランキングの要因で、モバイルフレンドリーではないページはマイナス評価となります。

フォントサイズを適切な値に設定する

備考や注釈のようなテキストも含め、フォントサイズを適切な値に設定します。

Googleは本文のフォントサイズとして16pxを推奨しているので、これを目安にします。

フォントサイズを設定しても小さすぎる場合は、次のようなmetaタグを追加すると、スマホの画面サイズに応じて適切な大きさで表示されるようになります。

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

モバイルフレンドリーテストツールを使い、Googleがモバイルフレンドリーとして判断したかどうか、調べておきましょう。

ルール② 縦スクロールでページが見れるようにする

概要

画面幅に合わせてレイアウトし、横スクロールせずにページ全体が見れるようにします。

横スクロールができてしまうとモバイルフレンドリーではない

スマホの画面幅を超えるような画像やテーブルは、横スクロールするか、縮小表示させないと見ることができません。このような横スクロール操作は、ユーザービリティ上も快適とは言えないので、Googleは画面幅を超えるコンテンツを見つけ次第、「このページはモバイルフレンドリーではない」と判断します。

画像やテーブルの最大幅を設定する

スマホサイトで画面幅を超えやすいものは、画像とテーブルです。普段と異なる大きな画像を使用したときや、列数が多かったりテキスト分量が多いテーブルを記述したときに発生しやすいです。通常、次のようなCSSをあらかじめ書いておけば解決します。

img, table {
    max-width: 100%;
}

ルール③ リンクやボタンを押しやすくする

概要

連続する短いアンカーテキストを避けます。

Googleはリンクやボタンの位置を自動判定する

スマホでは指を使ってリンクやボタンをタップするので、ボタンが小さかったり、リンクが近くに並んでいたりすると、押し間違いやすくなります。Googleは、リンクやボタンの大きさと、その位置関係を定期的にチェックし、「押しにくい」もしくは「押し間違えやすい」リンクやボタンを見つけ次第、「このページはモバイルフレンドリーではない」と判断します。

短かすぎるアンカーテキストは避ける

リンクのテキスト文字列が英語で1~3文字のように短く、かつ連続している場合は、リンクがタップしづらくなります。アンカーテキストを長くしたり、長くできない場合は行を分けたりします。

例1:モバイルフレンドリーなリンク

<a href="...">src属性</a> <a href="...">alt属性</a>

例2:モバイルフレンドリーなリンク

<ul>
  <li><a href="...">src</a></li>
  <li><a href="...">alt</a></li>
</ul>

例3:モバイルフレンドリーではないリンク(アンカーテキストが短い)

<a href="...">src</a> <a href="...">alt</a>

ルール④ Flashを使わない

概要

Flashを代わりの代替技術を使います。

FlashはPC向けブラウザもサポート終了

スマホ向けブラウザはFlashに対応しておらず、PC向けブラウザもFlashのサポートが終了しています。Googleは、Flashを使用したページを「モバイルフレンドリーではない」と判断し、検索順位ではマイナスの影響があります。

代わりの技術に置き換える

現在ではFlashを使わなくても、HTML 5やCSS 3で同様のアニメーションやUIが実現できるようになっています。

モバイルフレンドリー対応については、以下の記事をご参考ください。

ルール⑤ モバイルとPCでは同じコンテンツを表示させる

概要

モバイルとPCとで情報量の差をつけないようにします。

モバイルもPCと同じコンテンツが前提

閲覧するデバイスによって情報量に差があるのは、ユーザーにとって望ましくないはずです。Googleもデバイスによる情報量に違いをチェックしており、「デバイスによらず同じコンテンツ」を推奨しています。

HTMLをスマホ用・PC用で分けて作らない

スマホ用ページとPC用ページを別々に作成するのではなく、レスポンシブやモバイルファースト制作を使い、1つのHTMLにします。

スマホ用ページとPC用ページを別々に作成する場合は、デザインは異なっていても、コンテンツが同一になるようにします。

ルール⑥ モバイルページかPCページへリダイレクトする

概要

PCページとモバイルページが別々に存在する場合は、デバイスに応じたページへリダイレクトする。

クローラーはPC用とスマホ用が巡回する

検索エンジンのクローラーには、PCサイトを巡回する「PC用クローラ」と、スマホサイトを巡回する「スマホ用クローラ」の2種類があります。

PCページとスマホページが別々に存在しているときの話になりますが、PCページに「スマホ用クローラー」がアクセスしたときに、スマホページにリダイレクトされると、クローラーはスマホページを発見できます。また、スマホページに「PC用クローラー」がアクセスしたときに、PCページにリダイレクトされると、クローラーはPCページを発見できます。

デバイスに応じたページへリダイレクトする

「スマホサイトはこちら」というリンクを設置しても、クローラーがその先がスマホページだとは認識できません。

サーバーの設定を変更し、スマホブラウザからPCページへアクセスされたときはスマホページへリダイレクトします。同様に、PCブラウザからスマホページへアクセスされたときはPCページへリダイレクトします。

また、canonicalメタタグを追加することも推奨されています。canonicalメタタグの設置方法については以下の記事で詳しく解説しています。

まとめ

モバイルSEOは、基本的にスマホでの使い勝手を向上することです

スマホでの操作性・表示速度を良くするには、スマホを第一に考える「モバイルファースト」の考え方が役に立ちます。

GoogleはPCサイトよりもモバイルサイトの評価を優先しているので、モバイルファーストはSEOにおける自然な流れと言えるでしょう。

弊社では、キーワード選定から内部施策実施までをサポートするSEOサービス「Cluster SEO」を提供しています。SEO対策の一環として是非お役立てください。

ビッグワードを狙うSEO対策サービス「Cluster SEO」