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

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

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

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

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

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

詳しくはこちらの記事をご覧ください。

関連記事

モバイルファーストインデックスとは？ 概要や重要性を解説

モバイル端末の普及率は、2021年時点で97.3％とほぼ1人に1台は持っているのが当たり前になってきています。（※）そんななか、打ち出されたのが「モバイルファーストインデックス（MFI：Mobile First Index）」です。[…]

インデックス登録：検索エンジン（GoogleやBingなど）のロボット（クローラー）がWebサイトのページを訪れて内容を読み取り、そのWebページをデータベースに追加すること。インデックス登録により、検索エンジンがそのWebページを検索結果に表示できるようになります。

2019年7月1日以降の新規Webサイトでは、デフォルトでモバイルファーストインデックス登録が有効化されています。

モバイル版 Webサイトの対応方法は主に3つあります。

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

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

①レスポンシブデザイン

レスポンシブデザイン（レスポンシブWebデザイン）は、ひとつのWebサイトで、PC、タブレット、スマートフォンなど多様なデバイスの画面サイズや解像度にフレキシブルに適応し、最適な表示を提供する設計手法です。
Googleは実装と維持が最も簡単なデザインパターンとしてレスポンシブデザインを推奨しています。

レスポンシブデザインのメリット

・URLがひとつなのでコンテンツの共有やリンクの管理が簡単になります。
・PC版サイト（Desktop Site）とモバイル版サイト（Mobile Site）それぞれをGoogleに伝える必要がなくなります。
・同じコンテンツページをいくつも作らなくて済みます。

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

②動的な配信

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

③別々のURL

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

まとめ

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

今やスマートフォンでWebサイトを見るのは当たり前になっています。
ユーザーの利便性向上が求められるようになり、モバイルファーストインデックスに対応したWebサイトを導入することは必要不可欠です。

弊社ではWeb集客の分析や改善提案など、製造業・建築業に特化したデジタルマーケティングのプロがトータルサポートを行っております。いつでもご相談ください。