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


モバイル ユーザビリティ上の問題が検出されましたGoogleがスマホ対応を重視するようになって、中小企業のホームページ制作会社が早急な対応に追われまくっています。

 

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

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

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

 

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

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

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

 

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

 

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

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

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

PCからの画面 PC  スマホで見たところスマホ

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

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

 

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

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

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

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

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

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

ステップ3 自動振り分けしてくれる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 = '/';
 }
 }
 
}());

ステップ4 元々の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してアップします。

ステップ5 アクセスして確認!

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

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

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

ほら、1時間でできたでしょ?(笑)

 

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

 

参考サイト

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

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

P.S.

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

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

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


  • このエントリーをはてなブックマークに追加