トップページ
blog
SEO
Googleスマホに最適化しているかチェックを促す。Googleのモバイルフレンドリーテストは、もうやったか？

Googleスマホに最適化しているかチェックを促す。Googleのモバイルフレンドリーテストは、もうやったか？

2015/04/22attrip

Googleスマホに最適化しているかチェックを促す。
そこで、たまたま友達のイマムラさんが家に遊びに来ていたので。アンドロイドのスマホで確認させてもらいました。
修正方法とチェック方法です。
その時のキャプチャを見ながらどこの辺がはみ出てているのか？などを確認しながらCSSを治していきました。
はみ出ている箇所を発見したのでCSSを調整。

Googleスマホに最適化しているかチェックを促す。

Googleのモバイルフレンドリーテストは、もうやったか？

先週、SEOに詳しい鈴木山のブログにこんな記事が上がっていた。

モバイルフレンドリーなページには、英語の場合は「Mobile-friendly」、日本語の場合は「スマホ対応」というラベルがスニペットの先頭に付きます。

Google、スマホ対応のラベルを検索結果に表示。モバイルフレンドリーの条件がランキング要因になる可能性も | 海外SEO情報ブログ

へー。スマホに最適化していると優遇されるぽいのでちゃんと最適化すべきだよねー。

うんうん。

なんてのんきに記事を読んでいたら、

友達にattrip.jpをテストしたらアラート出てたよ！

って言われました。

ガーン。

やばい。。

attrip.jpは、Content wider than screen、Links too close togetherだそう。

って言われてたよ。ってことで調査しました。

確かに出るけど。。。iPhoneなら問題なんだけどな。。

うーん。。。困った。

そこで、たまたま友達のイマムラさんが家に遊びに来ていたので。アンドロイドのスマホで確認させてもらいました。

確かに、崩れてる・・・

さて、ここから本題。

修正方法とチェック方法です。

まず、モバイルに最適化されているかチェックするのは、このサイトから

https://www.google.com/webmasters/tools/mobile-friendly/
Googleのモバイルフレンドリーテストが出来るページ。

ここにurlを入れれば出来ます。

その時のキャプチャを見ながらどこの辺がはみ出てているのか？などを確認しながらCSSを治していきました。

細かい修正は、Google Chromeの要素を検証をクリック。そのごデベロッパーツールで携帯電話みたいなボタンを押す。デバイスは、Google NEXUS4　を指定して調整していきました。

はみ出ている箇所を発見したのでCSSを調整。

その結果。

治った。モバイルフレンドリーなサイトになったよ！

ひとまずよかったね～。 / Googleスマホに最適化しているかチェックを促す。Googleのモバイルフレンドリーテストは、もうやったか？ http://t.co/QnHRIlTQAm @attripさんから
— bouya Imamura (@s56bouya) November 25, 2014