Googleから『モバイルユーザビリティ上の問題が検出されました』を1時間で対策する方法

2015/3/19 2015/4/22 トップページの謎

Googleがスマホ対応を重視するようになって、中小企業のホームページ制作会社が早急な対応に追われまくっています。

「Googleから、『モバイルユーザビリティ上の問題が検出されました』ってメールが来た！　なんとかしてくれ！」

「Gooogleのモバイルフレンドリーテストで、ダメってなってる！」

「うちのサイトって、スマホ対応になってないよね？　検索結果、下がるんだよね？？」

悲鳴のような叫び声が、中小企業のホームページ担当者（という経営者？ｗ）から、電話から聞こえてきます。

とはいっても、そんな急にいろいろ対応するなんて難しいのですよね。デザイン決めたり、フォームをどうするかとか・・・。

でも、そんなことは言ってられない、そこのあなた！　ラッキーですよ！　このページにたどり着いたなら、なんと１時間でモバイル対応できちゃいます！

では、まず、どうするのかを、説明しておきますね。この全体像を理解しておかないと、何の作業をしてるのか、何を確認してるのか分からなくなるので・・・。

世の中には、レシポンシブデザインとかいって、同じページをPCでもスマホでも最適に見れるように、自動的に画像サイズや文字の大きさを調整する作り方があります。でも、それをやろうとすると、すべてのページを作り直さないといけないので、そりゃー大変です。1時間なんかじゃ、できません。

そこで、こういう手を使います！

スマホ用のペラページを作り、最低限の情報だけ掲載しておく！

　PC　　スマホ

このように別のページを作ってしまって、スマホでアクセスした場合には、自動的にこっちに飛ばすように設定します。

では、実際にやる作業！！

ステップ１　スマホページを作る

無料スマホテンプレートとかを探して、ペラ１ページのものを使います。

ここで、いろいろ作り込むと、時間がかかるし、そもそも、取り急ぎ、Googleさんの『おらおら！スマホ対応してねーぞ！』ってのに対処するのが目的なので、最低限の企業概要とか、住所・電話番号などの連絡先だけにしておきましょう。検索ランキングが下げられると、あちゃー！ですからねｗ

ステップ２　スマホ用htmlファイルをFTPでアップ

このとき、サブディレクトリを作ります。私の場合は、/mbというディレクトリ名にしました。特になんでもかまいません。

アクセスして、ちゃんとアップされていることを確認しておきましょう。

ステップ３　自動振り分けしてくれるJavaScriptを設定

次のJavaScriptを、userAgent.jsというファイル名で保存し、それをFTPでサーバにアップ。httpdocsの直下に置きましょう。

なお、下のファイルで、4行目にある『var spDir = ‘/mb/’;』のところの/mb/は、作成したディレクトリ名なので、mb以外の名前で作った場合は、修正してください。（ファイル、ダウンロードできるようにしました→こちら）

(function(){
 
 var ua = navigator.userAgent.toUpperCase();
 var url = document.location.pathname;
 var spDir = '/mb/';
 
 (ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1))?
 isSP() :
 isPC();
 
 function isSP(){
 if(url.match(spDir)){
 return false;
 }else{
 location.href = spDir;
 }
 }
 
 function isPC(){
 if(!url.match(spDir)){
 return false;
 }else{
 location.href = '/';
 }
 }
 
}());

ステップ４　元々のindex.htmlと先ほど作ったスマホ用htmlとにタグを追加

アップしたuserAgebt.jsが動作するように、タグを追加します。<head>・・・・</head>の中に追加してくださいね。

元のindex.htmlに追加するタグ

<scripttype="text/javascript"src="userAgent.js"></script>

スマホ用に作成したhtmlに追加するタグ

<scripttype="text/javascript"src="../userAgent.js"></script>

修正したものをFTPしてアップします。

ステップ５　アクセスして確認！

スマホから実際に元々のURLにアクセスしてみて、スマホ用htmlのページが表示されれるのを確認しておきましょう！

Googleのモバイルフレンドリーでのテストもお忘れなく！

https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja
モバイルフレンドリーテスト

ほら、１時間でできたでしょ？（笑）

あ、上のFTPがわからーん！とか、ディレクトリってどうやってつくるの？とか、動かねー！とかは、申し訳ないのですが、スキル不足なので、分かっている人にお願いしましょう。（私の方でもやりますよ！設定料金5千円～。詳しくは、こちらからお問い合わせくださいね）

参考サイト

http://www.html5-memo.com/css3/pc_bunki/

ソースコピーですぐ使えてスマホ専用サイト作成に便利！PC・スマートフォンサイトの振り分けJavaScript作りました。

P.S.

今回のGoogleのスマホ対策について、緊急オンラインセミナーが無料開催されるようです。4/28（火）なので、まずは、申し込んでおくといいですよ。

↓↓↓クリックして、申込み！メールアドレスだけで登録できます！

次世代型WordPressサイト&ブログ構築法

足立明穂

Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法

スマホ用のペラページを作り、最低限の情報だけ掲載しておく！

ステップ１ スマホページを作る

ステップ２ スマホ用htmlファイルをFTPでアップ

ステップ３ 自動振り分けしてくれるJavaScriptを設定

ステップ４ 元々のindex.htmlと先ほど作ったスマホ用htmlとにタグを追加

ステップ５ アクセスして確認！

関連記事