Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法
Googleがスマホ対応を重視するようになって、中小企業のホームページ制作会社が早急な対応に追われまくっています。
「Googleから、『モバイル ユーザビリティ上の問題が検出されました』ってメールが来た! なんとかしてくれ!」
「Gooogleのモバイルフレンドリーテストで、ダメってなってる!」
「うちのサイトって、スマホ対応になってないよね? 検索結果、下がるんだよね??」
悲鳴のような叫び声が、中小企業のホームページ担当者(という経営者?w)から、電話から聞こえてきます。
とはいっても、そんな急にいろいろ対応するなんて難しいのですよね。デザイン決めたり、フォームをどうするかとか・・・。
でも、そんなことは言ってられない、そこのあなた! ラッキーですよ! このページにたどり着いたなら、なんと1時間でモバイル対応できちゃいます!
では、まず、どうするのかを、説明しておきますね。この全体像を理解しておかないと、何の作業をしてるのか、何を確認してるのか分からなくなるので・・・。
世の中には、レシポンシブデザインとかいって、同じページをPCでもスマホでも最適に見れるように、自動的に画像サイズや文字の大きさを調整する作り方があります。でも、それをやろうとすると、すべてのページを作り直さないといけないので、そりゃー大変です。1時間なんかじゃ、できません。
そこで、こういう手を使います!
スマホ用のペラページを作り、最低限の情報だけ掲載しておく!
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に追加するタグ
<
script
type
=
"text/javascript"
src
=
"userAgent.js"
></
script
>
スマホ用に作成したhtmlに追加するタグ
<
script
type
=
"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(火)なので、まずは、申し込んでおくといいですよ。
↓↓↓クリックして、申込み!メールアドレスだけで登録できます!
今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法 企業のホームぺージ、作った #FollowBack http://t.co/v8bEboVZGV
今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法 http://t.co/PMfTyRGPyW
今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法: 企業のホームぺージ、作ったはいいけど更新をどうすりゃいいの?ってお悩みを解決!… http://t.co/KCtUWpWg6p
☑ 今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法 http://t.co/KLOPAqzDOu #pctool
はてな: 今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法 http://t.co/0h7CfOzHDw
今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法(はてぶ)http://t.co/YyjT5go58D
今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法
Googleがスマホ対応を重視するようになって、中小企業のホームページ制作会社が早急な対応… http://t.co/buYRn1NYCd
http://t.co/rMPn3z1zlo
どうもそろそろgoogleが本気でスマホ対応していないサイトの順位を下げようとしています。モバイル対応が必須の時代が到来しますね。
今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法 http://t.co/S8zCPGG3LW #seo #sem
コンピュータ・IT: 今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法 http://t.co/mbQjZQ1FhX
Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法 http://t.co/18PAQQCDOw
そんなに本質的な解決にはならないでしょう / “今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法” http://t.co/TEDI0RjQ7f
そういうことじゃないんだよね。。。
今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法
http://t.co/D3kW1WAgFm
【はてブ新着IT】 今さら聞けないホームページ集客再入門 | Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法 http://t.co/snB7RRlt3l