スマートフォン（スマホ、SP）の普及もあり、現代ではインターネットでの検索もパソコン（PC）よりスマホで行われることの方が多くなったと思われます。
検索エンジンもスマホに最適化したWebサイトがより評価されるようになり、そのうえで検索順位が変動するようになwりました。
2016年4月にはGoogleからその意向が発表されており、2021年3月末を持って「モバイルファーストインデックス（MFI）」に完全移行となる予定です。
そのため、PC版しかないサイトやレスポンシブ対応していないサイトは、スマホ検索に適していないとされてしまい、順位を大きく落としてしまうかもしれません。
まず、モバイルファーストインデックスとは何か、そしてどのような対策を行う必要があるのかを解説していきます。
モバイルファーストインデックスとは？
モバイルファーストインデックスというのは、スマホ版サイトを評価対象として検索順位を決めることとする、Googleアルゴリズムのひとつです。
これまではPC版サイトが評価対象の中心となっており、スマホ版サイトが存在しなくても評価に影響はありませんでした。
しかし、スマホでPC版サイトにアクセスすると分かるように、PCの画面に合わせてサイトがデザインされているため、スマホでは利用しにくくなっています。
スマホユーザーの観点から考えると、このようなサイトが検索上位にあった場合、アクセスしても操作しづらいため、知りたい情報にたどり着けずに離脱せざるをえないでしょう。
現代ではPCよりもスマホで検索されることが増えていることから、このようなストレスを感じることなく便利に使えるように、モバイルファーストインデックスという仕組みが採用される形となっています。
モバイルファーストインデックスは2021年3月末に完全移行が予定されているものの、発表以前から「モバイルフレンドリーアップデート」というものもあり、すでにスマホ版サイトを含んだ評価が行われています。
未対応でPC版サイトのみの状態でも、まだ他の評価によって現在の順位を維持すると思われますが、今後はより厳しくなって評価が大きく下がることも考えられるので、早めにスマホへの最適化を行う必要があるのです。
サイトがモバイルフレンドリーかを確認する方法
述べた通り、今後はスマホ版サイトをより重視とした評価付けがされていきます。
そのため、自身のサイトがスマホ対応となっているか、そして今後はどのような点についてスマホ対応が必要になるのかを知らなければいけません。
まず、サイトがモバイルフレンドリーかどうかは、Googleで公開されている「モバイルフレンドリーテスト」で確認することができます。
中央にある「テストするURLを入力」の箇所にサイトURLを入力すると、「URLをテスト」と書かれたボタンをクリックできるようになります。
こちらのボタンをクリックして、数分待てばチェックを行ってくれます。
ただ、これだけでは「モバイルフレンドリーかどうか」しか分からず、今後どのような対処を行っていけば良いのかがわかりません。
そのため、サイトを「Google Search Console」に登録し、「PageSpeed Insights」も併せて利用するのがおすすめです。
「Google Search Console」ではサイトの状況を監視し、スマホ表示に関するエラーなどを通知してくれます。
https://search.google.com/search-console
そして、「Pagespeed Insights」はPC版・スマホ版両方において、表示速度による評価を数値化してくれるツールです。
これらのツールを活用して、スマホ表示に適しているのかを確認しつつ、エラーをなくしたり、より最適になるようにサイトのデザインや内部構造を調整していくことがモバイルファーストインデックスへの対策になります。
モバイルファーストインデックスへの対策
では、自身のサイトがモバイルフレンドリーになっているかを確認できたところで、行っていく必要のある対策について、具体的に説明していきたいと思います。
内容としては、サイトの全体構成から表示などの細かなところにまで至ります。
対策したつもりでも「Google Search Console」でのカバレッジでエラー表示が出たり、誤った方法によって検索順位が下落してしまったりすることもありますので、きちんと理解して行うようにしていきましょう。
レスポンシブデザインもしくはスマホ用ページを作る
モバイルフレンドリーとなっていないサイトであった場合は当然ですが、スマホ用のサイトが必要になります。
簡単な方法としては、WordPressを使用しているのであれば、レスポンシブデザインに対応したテーマに入れ替えて、リニューアルするのが良いでしょう。
レスポンシブデザインとは、ユーザーのスマホにおける画面サイズに対応して、サイトの表示を自動的に合わせるようにCSSなどを設定して作られたデザインのことです。
URLも変わることなく、サイトのコンテンツも変更する必要がないので、管理上では非常に楽になります。
もしHTMLやPHPなどで独自のシステム・デザインのサイトを運営している場合はスマホ用に表示させるためのページを作成することで対応可能です。
スマホ用にページを作成した場合は、PC版のページとURLが異なってしまうために対処が必要です。
もしそのままの状態にしていると、ひとつのサイト内に異なるURLなのに同じ内容のコンテンツが重複して存在すると判断され、順位下落を引き起こす可能性が大いにあります。
方法としては、HTMLタグで「カノニカル（canonical）」と「オルタネイト（alternate）」の設定を行うことになります。
サイトのPCページ・スマホページそれぞれの「head」タグの間に、次のHTMLタグを挿入することで、対応完了です。
PCページ
<link rel="alternate" media="only screen and (max-width: 640px)" href="スマホページのURL" />スマホページ
<link rel="canonical" href="PCページのURL" />PCページ用の内容は「画面に表示される横幅が最大640px（ピクセル）までの間はスマホページを出すので、そのURLになっています」というものになっており、スマホページの方では「PCページのURLが正しいものになります」という指定を行っています。
このタグを挿入することで、PCページとスマホページが干渉することなく、正しいURLを検索エンジンに読み込んでもらえるようになります。
なお、スマホ用ページを作らずに既存のPC用ページをレスポンシブデザインに改造することも不可能ではありません。
ただ、この場合はレスポンシブデザインになるよう、新規でCSSを追加作成しなければならなかったり、元からあるCSSにレスポンシブ用の内容を追記することになります。
新規で作成する場合はサイト表示時に読み込むファイルも増えることから、表示速度に影響が出ることもあり、既存のCSSに追加する場合は干渉している箇所に注意しながら追加していく作業になるので、さまざまなリスクが発生します。
もし現在のサイトがモバイルフレンドリーに対応していない場合は、レスポンシブデザイン対応テーマへの移行か、スマホページを作成してHTMLタグを挿入する方法のどちらかをおすすめします。
PCサイト・スマホサイトのコンテンツを合わせる
レスポンシブデザインの場合はひとつのサイトをデバイスごとに表示を調整させる仕組みになっているので問題はありませんが、スマホサイトを別のURLで作成しているのであれば、該当するページの内容は同じである必要があります。
例えば、PC版トップページとスマホ版トップページの内容が大きく異なっていると、HTMLタグによる指定を行っていたとしても、そのページの評価が下がる可能性が大きくあります。
なお、スマホ表示だとサイズが大きくなってしまい、余計使いにくくなるために一部削除した・もしくは非表示にしているという程度では影響がありません。
他にも、スマホからの流入が期待できないコンテンツだから・主要なページだけ作成してコストを抑えたいというような理由から、PC版ページは存在するものの、スマホ版ページは存在しないという状況も良くありません。
PC版のサイトも評価対象になっているとはいえ、サイト全体で見ればコンテンツが不足していると判断されかねないため、基本的にはすべてのページにスマホ用ページが存在するようにしておくのが得策です。
まったく異なった内容・サイト構成にはならないよう、PC版ページとスマホページのコンテンツはほぼ同一のものになるようにしましょう。
文字サイズを適切なものにする
PCのモニターとスマホの画面は当然ながら、表示されるサイズが異なっています。
CSSには表示画面の横幅や縦幅に対して、文字サイズを変えることができるものがありますが、PCモニターであれば十分に読めた文字がスマホ表示だと読めないほどに小さくなってしまうということもあります。
レスポンシブデザインでは、このように文字サイズを変化させるCSSを利用していることが多いでしょう。
WordPressの「カスタマイズ」機能でも簡単に文字サイズを設定することができるため、PC表示を見ながら設定を変更すると、スマホ表示では小さくなってしまったということも多々あります。
逆に文字サイズを大きくしすぎてしまうと、モバイルフレンドリーチェックとしては合格であっても、ユーザーの側から考えれば、大きすぎて読みにくい・サイトのが冗長になってしまって何度もスクロールしなければいけないなどの不便が生じてしまいます。
どれくらいの文字サイズが適切かと考えると、モバイルフレンドリーの規定に合格しつつ、ユーザーが読みやすいものが良いでしょう。
なお、スマホ表示で最小の合格ラインは12px前後となっており、PCサイトでは主に16px～18pxで表示されることが多くなっています。
この範囲内で実際にスマホで表示される画面を確認しながら、文字のサイズを調整していきましょう。
画像やテーブルの表示をデバイス幅に調整する
文字サイズと同様、画像やテーブルによる表もデバイスによって表示される幅を調整しなければいけません。
もしスマホの幅より大きい画像やテーブルをそのまま表示させる設定にしていると、画像が途切れてしまううえ、描画に時間がかかるのでサイトの読み込みも長くなってしまいます。
簡単な方法としては、画像やテーブルで使用しているHTMLlタグ内に「width=”100%”」という指定をしておくと、親要素の横幅に自動的に合わせてくれます。
コンテンツの表示部分がデバイスに合わせて表示される形になっていれば、この方法である程度解決可能です。
画像に関しては、スマホ表示に合わせてサイズを加工して表示させたり、CSSやHTMLで「width=”640px”」にするなどの表示サイズ指定を行うといった方法があります。
画像サイズの加工方法としては、「Canva」などのオンライン加工ツールを使用したり、「Imsanity」など、WordPress内で一括リサイズできるプラグインを使うのが便利でしょう。
テーブルについては幅を狭めたことで表内部の文字や画像が読みにくくなってしまうという恐れもあります。
内容や構成を変更したり、スマホページでは非表示にしてしまうのもひとつの手段です。
スマホの表示速度におけるスコアを改善する
スマホとPCではCPUやメモリなどのスペックが異なるため、PCでは難なく表示されたサイトが、スマホでは読み込みに時間がかかってしまうということもあります。
スマホページが評価対象として本格的に優先されることになると、このようなサイトの評価は落ちてしまう可能性が高くなります。
先ほども紹介した「Pagespeed Insights」ではPC・スマホそれぞれにおけるサイトの表示速度をスコア化してくれるため、こちらのスマホ版スコアの数値を改善していくことも、対策のひとつになるでしょう。
主なスコア改善方法としては、画像サイズの適正化・読み込みの遅延・不要なCSSやPHPファイルの読み込みをなくすことなどが挙げられます。
項目も非常に多く、サイトごとに対応が必要な箇所も変わってくるので、細かな方法については割愛しますが、WordPressの場合は各種最適化できるプラグインを用いることでスコアを改善していくことができます。
ただ、スコアを非常に良いレベルにしても、コンテンツの質が悪ければ、評価が良くなることはありません。
読み込みが非常に遅くてページが重たいという状況でなければ、スコアが多少低くても検索順位に大きな影響は今のところ無いと思われます。
モバイルファーストインデックスへの情報収集を怠らずに
現在は徐々にモバイルファーストインデックスに移行している期間であり、完全移行となった際には新たな評価基準も追加されるかもしれません。
また、デバイスも進化を続けているため、これまでお伝えした内容では不十分となってしまう可能性もあります。
特にPCページとスマホページを別々に作成しているサイトの場合、対応しなければいけない箇所が多岐に渡るので、対応漏れやミスが検索順位に大きく響いてしまう可能性が高いでしょう。
まだレスポンシブデザインに移行していないサイトについては、これを機に移行を検討しても良いかもしれません。
そのうえで、可能な限りモバイルファーストインデックスへの対策を行い、今後さらにスマホを中心とした評価基準が追加されないか、情報収集を続けていくようにしていきましょう。
最近のコメント
コメントなし