モバイルフレンドリーのチェックからテスト|SEOに必要な対策とは

2020年4月6日

モバイルフレンドリーとは

 

マートフォンの普及にともなって、Googleではモバイルフレンドリー(モバイル対応)を重要視しています。

現在ではすでにモバイル検索がPC検索の数を大幅に上回っている状態ですが、今後もさらに検索はモバイルが占めていくと予想されています。

Googleの重視する「ユーザーの使いやすさ」を考慮すると、検索での表示順位にも大きく影響してきますので、この記事では「モバイルフレンドリー」の対応について解説していきます。

【affinger5】SEOに強いWordPressのおすすめテーマ
【AFFINGER5】SEOに強いWordPressのおすすめテーマ

  WordPressでサイトを作る意味は「SEOで検索上位に上げるため」の他には理由がありませんね。 しかし、テーマが無数にありすぎて、とりあえず最初から付いているTwenty ninet ...

続きを見る

 

モバイルフレンドリー対策とは

モバイルユーザーの増加によって、WEBサイトのモバイル対応は必須となっています。

簡単に言いますと、

 

  • 文字が大きく読みやすい
  • 画像が最適化されていて見やすい
  • 表示速度が早い

など、モバイルで見た時にユーザーがストレスを感じないようなWEBサイト対応になっているかどうかという点です。

 

なぜモバイルフレンドリーがこれだけ取り上げられるのかと言えば、以前は「PC表示」「スマホ表示」を分けるのにURLを変えて表示したり、PCでは表示されるがスマホでは表示されない設定などを変更することで対応してきたWEBサイトの形があったのです。

 

しかし、現在ではワードプレスでWEBサイトを立ち上げれば、どのテーマでもほぼモバイルフレンドリー対応となっています。

 

逆に古いのモバイルフレンドリー対応ではSEOの観点から言えば不利となるケースも出てきますので、最新のテーマを使用してWEBサイトを制作したほうが良いでしょう。

 

Googleは2016年に「モバイルファーストインデックス」という実験を開始しており、従来のPCサイトメインの評価をモバイルフレンドリー対応された評価wpメインとすることを徐々に切り替えることを発表しました。

 

つまり、モバイルフレンドリー対応していることをランキングシグナルに加えたということですので、現在ではSEOの検索順位に影響しています。

 

モバイルフレンドリー対策の要素

モバイルフレンドリーの要素としては次のものが挙げられます。

 

モバイルフレンドリーの要素

  • Flashを使用しない
  • ビューポートの設定
  • 固定幅のビューポートは使用しない
  • コンテンツのサイズを合わせる
  • フォントのサイズが読みやすい
  • タップできる要素のユーザビリティ
  • インタースティシャル広告が無い

 

これらのモバイルフレンドリー要素を簡単に解説します。

 

Flashを使用しない

昔のPCサイトでは、デザイン性の良さからFlashを使用しているWEBサイトが多くありました。

しかし、Flashはスマホでは再生できないものを多く、再生できるスマホであっても容量の重さから「表示速度」が落ちるという要因から、Flashを使用している場合は「モバイルフレンドリーではない」を判断されます。

 

ビューポートの設定

ビューポートとは、モバイル端末の表示方法を指定するための記述です。

簡単に言いますと、ビューポートの指定がない場合、モバイル端末でWEBページを表示した時に、PC画面の幅で表示されてしまい見にくいという状態になってしまいます。

ビューポートの設定されていないWEBサイトはモバイルフレンドリーではないと判断されます。

 

固定幅のビューポートは使用しない

ビューポートを固定幅に設定してしまうと、各端末によって画面サイズが違うため一定の表示になりません。

各デバイスの幅に自動的に合わせて表示されるようにビューポートの設定をしておくことが必要です。

 

コンテンツのサイズを合わせる

これは多いのですが、画像などの幅が画面の幅を超えているとモバイルフレンドリー対応となりません。

WEBサイトのテーマで画面の幅やコンテンツの幅を指定できますので、正しいコンテンツの幅に指定しておくことも必要です。

 

フォントのサイズが読みやすい

PCサイトをモバイルで表示すると、とても文字や画像が小さく表示されてしまいます。

モバイルフレンドリーでは、スマホで表示された時に大きな文字で表示されるように設定されていることも重要です。

 

タップできる要素のユーザビリティ

PCサイトでは「電話番号」や「内部リンク」などの要素が、スマホで表示された場合には「タップ」という要素に変わります。

ここには「タップできる要素」を分かりやすくボタンなどで表示する例が出てくるかと思いますが、この「タップできる要素」が近すぎて分かりにくいなどの場合はモバイルフレンドリーになりません。

 

インタースティシャル広告が無い

インタースティシャル広告とは簡単に言ってしまうと、

 

  • 「ページを覆い隠すようなポップアップ画面」
  • 「クリックしたページが表示される前に別のページを表示してしまう」

 

などのよく見る誘導広告のことです。

このインタースティシャル広告の使用はモバイルフレンドリー対応として評価を落としますので使用を避けたほうが良いでしょう。

 

モバイルフレンドリー対策の方法

基本的にモバイルフレンドリーの対策は、ワードプレスのテーマでほぼ対応できるかと思います。

 

ビューポートの設定はテーマの編集から簡単にモバイルフレンドリー対応にできますので、お使いのテーマのマニュアルを読んで設定してください。

 

テキストサイズについて

テキストサイズは、ユーザーが読みやすいものと思われるものにカスタマイズしていくと良いでしょう。

 

モバイルフレンドリー対応としてのテキストサイズは主に3つあります。

 

  • スマートフォン
  • タブレット
  • PC

 

そして、hタグのテキストサイズなども考慮に入れてスマホやタブレット、PCそれぞれで表示してみて修正してみると良いでしょう。

参考までに、このサイトでの各端末でのテキストサイズの設定は次のようにしています。

 

各端末でのテキストサイズの例

 

コンテンツの幅を画像がハミ出さないようにする

コンテンツの画面の幅が1060pxだとしたら、それを画像がはみ出ないように修正しておきましょう。

これはよくあるミスの例です。

 

タップ要素が近すぎないようにする

これもよくあるミスなのですが、CTAボタンや内部リンクボタンなどを設置した時に、そのボタンが近すぎるとモバイルフレンドリーになりません。

 

例えば、

 

画面上部に戻ります

画面上部に戻ります

 

これだと近すぎてモバイルフレンドリー対応になっていないと判断されてしまった場合には、1行の改行をするなどして離す必要があるということです。

 

ページの表示速度を改善する

モバイルフレンドリー対応では、ページの表示速度が重要視されています。

なるべく表示速度を早くするために以下の改善をしておきましょう。

 

ページ速度の改善

javascriptなどを使用しない

画像のサイズを圧縮する、もしくは最適化する

 

モバイルフレンドリー対策をチェックする

これらのモバイルフレンドリー対応に改善した上で、本当にモバイルフレンドリーになっているかどうかをチェックすることはGoogleのサーチコンソールで簡単にできます。

 

サーチコンソールにログインして、「URL検査」でそのコンテンツのURLを送信します。

すると、

サーチコンソールのモバイルユーザビリティの画面

 

このように「モバイルユーザビリティ」の箇所に「このページはモバイルフレンドリーです」と出ていればOKです。

 

もし「このページはモバイルフレンドリーではありません」と表示されていた場合、ここをクリックすると何がいけないのか分かりますし、あなたのgmailにも改善の要望が送られます。

 

ワードプレスでは、ほとんどがモバイルフレンドリー対応に設定できますが、それでも「モバイルフレンドリーではありません」と表示される場合の多くのは、

 

  • 画像の幅がコンテンツの幅を超えています
  • クリックできる要素が近すぎます

 

のどちらかですので、前述の対応をして再度URL検査でチェックしてみてください。

 

モバイルフレンドリー対策のテスト

サーチコンソールでチェックして改善し、再度チェックしてOKなら問題はありませんが、もし心配であるならば、

サーチコンソールの中でGoogleの推奨するテストツールがありますので紹介しておきます。

モバイルフレンドリーテスト

 

このテストツールにURLを入力してテストするだけです。

 

まとめ:モバイルフレンドリー対策のまとめ

現在においては、モバイルフレンドリー対策はSEOも必須のランキングシグナルとなっていますので、お使いのテーマでWEBレスポンシブ設定にしておきましょう。

その上で、

  • テキストサイズの読みやすさ
  • 画像の幅
  • コンテンツの幅
  • 表示速度の改善
  • タップ要素の距離

これだけ気をつけておけば大丈夫だと言えるでしょう。

SEO対策の関連記事

SEO対策を網羅した実践型の方法まとめ
SEO対策とは?【最新】初心者向けGoogleへの基本対策の方法

  SEO対策の基本をまとめました。 正直、SEOって調べていても、どの記事も専門用語満載で分かりにくいですよね。 私も非常に苦労しましたので、このまとめでは専門用語の分からない初心者でも、 ...

続きを見る

【affinger5】SEOに強いWordPressのおすすめテーマ
【AFFINGER5】SEOに強いWordPressのおすすめテーマ

  WordPressでサイトを作る意味は「SEOで検索上位に上げるため」の他には理由がありませんね。 しかし、テーマが無数にありすぎて、とりあえず最初から付いているTwenty ninet ...

続きを見る

 



  • この記事を書いた人

稲川 勤

自身の整体院が月商250万をあげた集客、販促のノウハウを教える専門家。WEB集客・メルマガ販促などの知識を発信しています。

-seo内部対策

© 2020 WEB集客大学 Powered by AFFINGER5