一番簡単な、Googleモバイルフレンドリー対応の方法

2015/4/21 より、ウェブサイトがモバイル対応しているかどうかが、モバイル検索のランキングを決定する要素となります。

Google 検索 – モバイルでの検索がさらに便利に

私が運営しているサイトのアクセスを調べてみると、どのサイトも、モバイルデバイスからのアクセスが半数を超えてきています。モバイル対応をしていないと、モバイルのランキングが下がってしまい、アクセス数が大きく減少してしまう可能性があります。

レスポンシブに対応したデザインを一から作るのがベストですが、もう時間がありません。とりあえず手っ取り早くモバイルフレンドリー対応をする方法をご紹介します。

サムリさんが紹介している方法が簡単です。

WPtouchはもういらない?プラグインに頼らずCSSの切替でスマホ対応サイトを用意する方法

スポンサーリンク

1) ヘッダにviewportとcss切替えのタグを設置

下記コードをヘッダ<head>〜</head>の一番下に追加します。




2)モバイル用のcssを作成

現行のstyle.cssのコピーを作ります。width:〜の部分をすべて100%に。float:〜の部分をnoneに書き換えて、style_mobile.cssと改名して、サーバーにアップします。

これだけで、スマフォっぽいデザインになります。スマフォからアクセスすると、style_mobile.cssでcssを上書きする仕組みです。

3)微調整

デザインが崩れている箇所があれば調整します。

ボックス要素が、右側に出っ張ってしまった場合は、おそらくmargin、padding設定が悪さしています。問題が起きている要素に、box-sizing: border-box;を指定したり、横方向のmarginを0にすると、うまく収まります。

アドセンスは固定幅でなく、レスポンシブのデザインに変更しましょう。

画像が出っ張ってしまった場合、html上で直接幅を指定していませんか? 画像の幅はcss側から設定して、style_mobile.cssでwidth:100%にします。

モバイル側で表示させたくない部分は、display:none;で消してしまいましょう。この場合はスパムにはなりません。

デザイン崩れの原因がわからない場合は、問題がありそうな要素にdisplay:none;を設定していくと、原因箇所を特定できます。

【PC】

【スマフォ】

プラレール沼

モバイルフレンドリーテスト・確認

多少デザインがずれていても、ビューポートとモバイル用cssがあれば、モバイルフレンドリーテストは通ります。

細かい調整は後でやれば良いことですから、まずは大まかな対応だけしておきましょう。

テストに合格すれば、エラーページは徐々に減っていきます。Googleのウェブマスターツールで確認してみましょう。

モバイルの検索結果に「スマホ対応」と表示されるようになります。

この方法の一番素晴らしいところ

個別ブラウザ対応をしなくて良いことです。

現行のcssにモバイル版に上書きするので、元のデザインは継承されます。元々旧インターネットエクスプローラー(IE6,7あたり)など、癖のあるブラウザできちんと表示されていたなら、モバイル対応後も引き続き問題はありません。

古いIEに対応する必要性は薄れてきましたが、なんとなく気になるところ。とりあえずのスマフォ対応で、変なお釣りが出ても困りますので。お手軽で良い方法だと思います。

▼▼▼▼

Q.(会場)Googleはレスポンシブを推奨してるが、モバイルフレンドリーでOKがでていればレスポンシブじゃなくてもいいのか?

A.問題ない。

Q.(会場)今後タブレット対応のアルゴリズムが出てくる可能性はあるのか?

A.現状、タブレットはアルゴリズムの対象ではなくPCとして扱っている。
もし変更があればお知らせする。

via: モバイルフレンドリーについての疑問にGoogleが直接答えてくれた! ~The 13th In-house SEO Meetupレポート

現時点では、GoogleのモバイルフレンドリーテストでOKが出ていれさえすれば、問題ないと言われています。今回のように、レスポンシブでなくてもOKです。もし変更があれば、お知らせがあるとのこと。

でも、レスポンシブの方が理想ですね。とりあえず、今回の方法で時間稼ぎをして、レスポンシブの方法を勉強したいと思います。

今日のわかった

この方法だと1サイト15分くらいで対応作業が終わりました。サムリさん、貴重な情報ありがとうございます。

cssを利用せず、htmlの各要素に直接スタイルを当てているようなデザインには利用できませんので、ご注意下さい。

デザイン
スポンサーリンク
当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります(^^)
フォロー、ブックマークしていただけると、ブログ更新を見逃しません

コメント

タイトルとURLをコピーしました