モバイルファーストインデックス登録とモバイル版サイトを実装する方法

パソコンとスマートフォンでは画面の幅が違います。しかし、それぞれのデバイスの幅にページが勝手に合わせてくれるわけではありません。

ユーザーがスマートフォンでページを見たときに、使いやすい見た目や配置になっているサイトをモバイルフレンドリーなサイトと呼びます。

今回はそんなモバイルフレンドリーなサイトに対応する方法を３つご紹介致します。

モバイルファーストインデックス登録について

モバイルファーストインデックスとは、Googleのインデックス登録とランキングで、モバイル版サイトのコンテンツを優先的に評価することです。

詳しくは以前の記事をご覧ください。

関連記事

モバイルファーストインデックスとは？概要と対応方法など

モバイルファーストインデックスとはモバイル版サイトを優先して評価し、検索結果に反映する仕組みのことです。 Googleは2021年3月にモバイルファーストインデックスに強制移行します。まだ対応していないWEBサイトは早めの対応が必要です。[…]

2019 年 7 月 1 日以降の新規ウェブサイトでは、デフォルトでモバイルファーストインデックス登録が有効化されています。また、それ以前のウェブサイトについても2021年3月以降は強制的にモバイルファーストインデックスに移行されます。

モバイル用ウェブサイトの対応方法は主に３つあります。

• レスポンシブ ウェブデザイン
• 動的な配信
• 別々の URL

これらの方法について一つずつ解説していきます。

モバイルサイトをに実装する方法

①レスポンシブウェブデザイン

レスポンシブウェブデザインは、どのデバイスでも同じHTMLコードを配信しつつ、画面幅に合わせてレンダリングを変更する設定方法です。
Googleは実装と維持が最も簡単なデザインパターンとしてこちらの方法を推奨しています。

レスポンシブデザインのメリット
・URLが１つなのでコンテンツの共有やリンクの管理が簡単になります。
・PC用とモバイル版のサイトそれぞれをGoogleに伝える必要がなくなります。
・同じコンテンツページをいくつも作らなくて済みます。

レスポンシブデザインであらゆるデバイスに適応できることを知らせるためにmeta name=”viewport”を使用します。
meta viewport タグはコンテンツをデバイスの幅に合わせて同調整するかをブラウザに伝える役目を持っています。こちらを設定していない場合、モバイルブラウザでもデフォルトでパソコン画面の幅でページがレンダリングされます。

②動的な配信

動的な配信とは、同じ ページをリクエストしたユーザーに対して同じURL で異なる HTML（およびCSS）を返す設定方法です。Vary HTTP ヘッダーというものを利用して、デバイスに応じて異なるHTMLコードが配信されるためURLは同じものが使用できます。

③別々の URL

こちらはパソコン用ページとモバイル用ページをそれぞれ別々のURLで構成する方法です。基本的にパソコン用サイト上に対応するページとしてモバイルユーザーにモバイル用ページを配信します。
ただし、サイトの設定に別々のURLを使用することは、実装と保守が困難なため推奨されていません。

まとめ

今回はモバイルフレンドリーなサイトに対応する方法をご紹介いたしました。

今やスマートフォンでサイトを見るのは当たり前になっています。対応出来ていないサイトはなるべく早めの対応を検討してみて下さい。