【2020最新版】すべてのWeb管理者が学ぶべきスマホSEOを徹底解説

スマートフォンやタブレット端末は、使い勝手がどんどん良くなり、今や誰もが持つようになりました。

その結果、Webサイトの訪問者も、パソコン経由が多かった時代から、モバイル経由のユーザーが大半を占める時代に変わっています。

今や、スマートフォンに対応していないWebサイトは、SEO対策においてマイナス評価を受けるうえ、ユーザーに訪問してもらえません

Webサイトを衰退させないためにも、モバイルSEO対策は絶対に行いましょう。

スマホSEOの必要性

スマートフォンに、対応していないWebサイトはどうなると思いますか?

  • モバイルユーザーを失うことになる(全訪問者の70%以上)
  • 検索順位が低下する
  • SEOにおいてマイナス評価を受ける

上記のような問題が発生してしまい、Webサイトとしての価値は無くなってしまいます。ですので、スマホ対応は必要不可欠です。

SEO対策になる(Googleから推奨されている)

2015年4月より、Googleはモバイルフレンドリーアルゴリズムを導入しています。

簡単に言うと、スマホユーザーにとって使いやすいかどうかもSEO評価の対象であるということですね。

現在はPCの検索ランキングと、スマホ独自の検索ランキングの2つが存在しており、モバイルフレンドリー化されたサイトこそが、検索ランキングで優遇されるようになっています。

モバイルフレンドリーとは、WEBサイト・WEBページをスマートフォンや携帯電話などのモバイル端末での表示に最適化=スマホ対応することを意味する。

https://sabanavi.com/seo-term/mobile-friendly/

セッション数が増加する

スマホやタブレットなど、モバイルユーザーの数は年々増加しており、今や70%以上の訪問者がモバイルを経由してやってきています

実際、想像してもらえばわかると思いますが、どこでも気軽に検索できるのはスマホであり、パソコンを持ってない人はいるけれど、スマホを持っていない人っていないですよね。

パソコン画面に合わせたWebサイトは、モバイルだと見にくかったり、表示されなかったり、いろんな問題点が発生します。セッション数を増加させるためにも、モバイル対策は、行うべきなんです。

スマホ対応のポイント

モバイル対応する際、絶対やっておきたいことを並べます。

フォントサイズは16px

Googleは、フォントサイズを16pxにすることを推奨しています。

実際、調査によると、もっとも多いフォントサイズは16pxで、次いで15pxが多くなっています。

特にこだわりがないのであれば、16pxに変更しておきましょう。ちなみに、行間は1.5に設定することをおススメします。

モバイル端末に画面サイズを合わせる

一つのHTMLをCSSで制御することで、ユーザーの画面サイズにより、自動的にレイアウトやデザインを調節することが可能です。

指標となる画面サイズ
  • PC=960px
  • タブレット=768px以下
  • スマートフォン=320px以下

PCユーザー用の設定して後、その他は、横幅に合わせて可変的に調整される設定をすることで、全ての画面サイズにあわせた表示をすることが可能になります。

ボタンやリンクはタップしやすくする

モバイルユーザーの大きな特徴は、画面を直接タッチして操作することです。

タッチ操作にあった画面作りは非常に重要で、使いにくいサイトだと、ユーザーが離れていったり、Googleからの評価を下げてしまったりします。

適切な感覚、適度な大きさを意識してレイアウトを完成させましょう。

->>スマホサイトのデザイン時に参考になるWebサイトのギャラリーまとめ

モバイル対応のコンテンツにする

コンテンツの作成ツールによっては、パソコンでは表示できるが、スマートフォンでは表示できないような技術も存在します。

例えば、Flashで作成されたコンテンツはスマートフォンで表示することができません。Webサイト作成時には、モバイルでも利用可能な技術なのかしっかり確認しましょう。

Webサイトをモバイル対応ためにはどうしたらいいの?

モバイル対応させる方法は、たくさん存在しますが、大きく分けると二つになります。

  • ①CSSによって対応させる
  • ②デバイスに合ったデザインを作成する

そもそもWebデザインできる自信がありません!って方は、①、②を読み飛ばして➂を読んで下さい。

①画面サイズによって見た目を変える手法

上記でも少し触れましたが、CSSを変更することで、画面サイズの横幅に応じ表示方法を変える方法が存在します。

この手法であれば、デバイスごとにURLが変化しないため、リンクなどが分散せず、クローラーされやすいという利点があります。

実際、検索エンジンもこの手法を推奨しており、SEO対策としては、確かな手であることがわかります。

->>初心者も分かる!レスポンシブ・デザインの作り方

->>【CSS】レスポンシブ対応の方法や作り方を徹底解説【メリット&デメリット】

②デバイスによって表示そのものを変える手法

CSSで、表示方法を変えるだけでは、望ましいレイアウトにならない場合もあります。そんな時は、デザインだけでなく、提供する内容そのものを変える手法がおすすめです。

この手法の利点は、デバイスごとに表示内容を定めるため、より使い勝手の良いサイトを作ることができるということです。もちろんリンクも分散されません。

ただし、少々手間がかかります。

➂Webデザインの基本なんてわからない

CSSやレスポンシブルデザインなど、かろうじて耳にはしたことがあるけれど、実践に応用できる知識なんて持ち合わせていません!って方は、最初からレスポンシブルに対応しているデザインテーマを導入することがおススメです。

実際、Webデザインをゼロから勉強しようとすると、かなりの時間を要してしまします。

しかし、デザインテーマなら、Wordpressやはてなブログ、ホームページサイトなど、多くのコンテンツで採用できるようになっており、初心者でも使いこなせます。

->>レスポンシブWordPressテーマ

->>はてなブログ テーマ ストア

->>商用ホームページ に最適!日本語wordpressテーマ無料+有料23選

モバイル対応状況を確認する

自分のWebサイトが、モバイルユーザーにとって本当に使いやすいコンテンツになっているのか、検索エンジンに評価される内容になっているのか。

それを確認するために、便利なツールが存在します。

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

Googleが提供する、モバイル対応確認のためのツールです。

自サイトのURLを入力するだけで、スマホ対応できてるのかどうかを確認することができます。

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

実際にテストしてみよう

モバイルフレンドリーテストの使い方は、「サイトURLを入力→テストをクリック」だけです。

まずは、URLを入力します。入力したら、「URLをテスト」をクリックしてください。

モバイルフレンドリーであれば、下記のような画面になります。

まとめ

長々と書きましたが、まずはモバイルフレンドリーテストをやってみて、自分のサイトがモバイル対応しているか確認するといいですね。

対応していなければ、上記の対策を順番に試していくだけ!それでもダメならレスポンシブル対応のテンプレートを導入すればいいのです!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です