前回の記事「スマホ対応していないサイトは4月から検索順位が下がる?」でお伝えした通り、Googleは、4月21日からWebサイトのスマホ最適化(モバイルフレンドリー)が、検索ランキングの要素になると公式に発表しました。
そこで今回は、スマホ最適化の具体的な手法についてご紹介します。それぞれの注意点は若干専門的ですが、Web制作会社に発注する場合に確認すべきポイントとしても有効です。ぜひ参考にしてください。
スマホ最適化の方法の中で、Googleが最も推奨しているのが、レスポンシブ・ウェブデザインです。
レスポンシブ・ウェブデザインとは、サーバーからどのデバイスに対しても常に同じHTMLコードを配信し、CSSを使用して各デバイスでのページの表示を変える設定のことを言います。
スマートフォン、タブレットなど様々な解像度を持つデジタルデバイスが増え続ける昨今、従来のマルチデバイス対応アプローチである「デバイスごとのデザイン切り替え」では対応しきれないことが増えてきました。
1つのWebサイト(ワンソース)で全てのデバイスに対応できるレスポンシブ・ウェブデザインは大変理にかなった手法であると言えるのです。ちなみに当社サイトもレスポンシブ・ウェブデザインです。
レスポンシブ・ウェブデザインの場合、ページがすべてのデバイスに対応していることをブラウザに知らせる必要があります。 その際に、次のメタタグをドキュメントのヘッダーに追加します。
例)<meta name="viewport" content="width=device-width, initial-scale=1.0">
出典:Google Developers
スマホ最適化のもう1つの方法が、デバイス毎にWebサイトを用意する方法です。PC用サイトとスマホ用サイトを用意する場合、ユーザが閲覧しているOSやブラウザ(ユーザーエージェント)を判別して、サーバーサイドプログラムで表示するHTMLを振り分けるという手法が一般的な方法です。
PCサイトのURLを「www.yourdomain.com」とした場合、モバイルサイトでは「www.yourdomain.com/m/」のようにディレクトリを切る、もしくは「www.m.yourdomain.com」のようにサブドメインを設定するのが一般的な方法です。
Googleのアルゴリズムがサイトの設定を認識できるように、次のアノテーションを使用する必要があります。
出典:Google Developers
結論から言うと、私たちのおすすめは「1. レスポンシブWebデザイン」です。
レスポンシブのデメリットとしては、
などが挙げられ、制作者の間でも議論が分かれていました。
メリット、デメリットを理解した上で、そのサイトに有効と考えられる方法を選ぶことが重要ですが、今回のGoogleアルゴリズムの変更によって、その判断は簡単になったと言えます。
のメリットを最大限に活かすため、このタイミングで、コンテンツ全体の管理体系をしっかり設計できるパートナーに相談してみることをおすすめします。
まずはGoogle提供のモバイル フレンドリーテストで自社サイトをチェックしてみましょう!
Webサイトのスマホ対応を進める方法は2種類。
いかがでしたでしょうか。 自社サイトのスマホ最適化やWebサイトのリニューアルをお考えの方に、マーケティングを意識したサイトリニューアルができるような事前チェックリストをお作りしました。上司への報告や、他部署への働きがけのためにぜひお使いいただければと思います。そして御社のサイトを長く成功しつづける「マーケティングマシン」に変身させてください。