モバイルフレンドリーとは？ SEO初心者がまずやるSEO対策6
今回は超SEO初心者がまずやるSEO対策6/モバイルフレンドリーについて解説します。全くの初心者であれば、SEOとは？最新SEO対策ガイド【上位表示の対策を解説】2022年完全版も一読してからこのページを読んでください。
モバイルフレンドリーの重要性
昨今、SEOでもモバイル対策がかなり重要になってきています。
モバイルフレンドリーとは？
モバイルフレンドリーとは、WEBサイトをスマートフォンなどのモバイル端末で見た時に、見やすく最適化されている状態のことをいいます。スマホ用サイトやレスポンシブWEBデザインなどでユーザーにとって見やすく使いやすいサイトになっていればGoogleは”モバイルフレンドリーである”と評価し、検索順位に好影響を与えます。2015年4月21日に、「モバイルフレンドリーアップデート」と呼ばれるアルゴリズムアップデートがあり注目されました。
検索ユーザーのスマホ検索の比重が現在ではかなり多くなってきました。スマホ画面にPC向けのサイトが表示されてしまうとかなり見づらく使いずらいのでWEBサイトをスマホなどのモバイル対応にすることは、ユーザービリティ的（ユーザーにとってのサイトの使いやすさ）にも大切なことです。
Googleは2016年から検索順位、構造化データの解析、スニペット生成はモバイルを優先するためのテストを開始しています。
モバイルと呼ばれるデバイスについて
- スマートフォン・・・Android、iPhone、Windows Phone などがあります。HTML5をPCブラウザと同様にレンダリング（画像などレイアウトを整えて表示）しますが、画面サイズが小さいので画面サイズにあたサイト表示が必要です。
- タブレット・・・タブレットは、スマートフォンより大きな画面で、PC向けサイトが表示される場合とスマホーとフォン向けサイトが表示される場合があります。そのタブレットの大きさによります。レスポンシブWEBデザインでサイトを構築すればすべての大きさのタブレットに対応し最適化したページを表示することができます。
- マルチメディアフォン: マルチメディアフォンとは、FAXと電話にとインターネット機能があるものです。マルチメディアフォンに搭載されるブラウザは、XHTML標準に準拠するようにコーディングされたページをレンダリングできます。HTML5 標準の拡張 API に対応していない場合がありますので注意が必要です。
- フィーチャーフォン: 高機能ケータイ電話をフィーチャーフォンといいます。フィーチャーフォンのブラウザは HTML で記述されたPC用のWEBページは表示できません。cHTML（i モード）、WML、XHTML-MP などのブラウザが該当します。
モバイルフレンドリーかどうかをチェックしましょう
https://search.google.com/test/mobile-friendly こちらのURLでモバイルフレンドリーかどうかサイトとチェックできます。サイトURLを入力して実行ボタンを押せば結果が表示されます。
URLを入力してURLテストのボタンを押すとそのサイトの結果が表示されます。
ウェブサイトをモバイル対応にする方法
PC版のサイトをモバイル対応にする主な方法は3つあります。
- レスポンシブWEBデザイン
- 動的な配信
- 別々の URL
レスポンシブWEBデザイン
レスポンシブWEBデザインとは、CSSのmeta name=”viewport” を使用して１つのHTMLコードでどのデバイスにも画面サイズに合わせて調整し表示する技術です。
レスポンシブWEBデザインは、ヘッダー部分に、下記のメタタグを追加します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta viewport タグは、ブラウザに、デバイスの幅に合わせてサイズをどう調整するかを伝えます。これによって、ブラウザが画面に収まるようにコンテンツを小さくしたりフォントサイズを大きくしたりします。
レスポンシブな画像には、<picture> 要素を含めます。
レスポンシブWEBデザインのメリット
- URLが1つで済む。
- HTMLファイルが1つで済む。
- コンテンツページは各1ページずつでOK
- サイト読込み時間の短縮。
- ロボットが何度もサイトクロールする必要が無い為、表示速度が上がる。
- Googleが推奨しており、SEO的にも好影響である。
動的な配信
動的な配信とは、同じURLで異なるHTMLとCSSをサーバーから返すように設定しサイトを表示することを言います。動的な配信を使用している場合は、モバイル用にページを設定したことを Google に知らせます。
この設定方法は Vary HTTP ヘッダーで実装します。
別々の URL
PC用ページと別に、モバイル用のページを作成することができます。
PC用は、www.example.comとして、モバイル用は、m.example.com あるいは、example.com/m
などのURLで別ページを作成します。Googleには、アノテーションを指定して、モバイル用のURLを伝えます。
AMP（Accelerated Mobile Pages）の使用
GoogleはAMPページを推奨しています。AMPとはAccelerated Mobile Pages の略で、訳すと「モバイルページ高速化」です。モバイル用のWEBサイトでは、そのサイトの表示速度が非常に重要になってきます。
ページの表示が遅いとユーザーはすぐにサイトから離脱してしまいます。ユーザービリティの視点からもページ表示を早くするAMPがGoogleに推奨されています。
AMPとは、モバイルサイトを高速表示させる技術ですが、AMPの仕様に従って作成されたページはAMP CacheというAMPページを配信するためのコンテンツ配信ネットワークによってキャッシュされます。
ユーザーが検索した時にAMP Cacheにあらかじめ保存されていたサイトのキャッシュをユーザーにコンテンツとして表示します。その間に、サイト読込みも同時に行います。そのためにユーザーには、すぐにサイトページが表示されるので、サイトをすぐに表示させることができるのです。今後、さらにAMP対策が必要になってくるかもしれません。
この記事の監修者
日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで1000以上のサイトのSEO対策を手掛けてきました。
