Googleのツール、Mobile Friendly Test(モバイルフレンドリーテスト)を試す

公開日: 2015/02/06 SEO WEB制作

Googleの割と新しいデロペッパーツールですね
Mobile Friendly WebsitesにあるMobile Friendly Test(モバイルフレンドリーテスト)というものがあります
https://www.google.com/webmasters/tools/mobile-friendly/

様はウェブコンテンツがモバイル(スマートフォン)に対応できているかチェックできるツールです
対応が出来ていればスマホでのGoogle検索結果に問題なくインデックスされますよ、ってやつです

ちょっと前に1サイトだけ試してみました


となっているのでコンテンツのURLを入力して『分析』。
試してみたコンテンツはトップ含めほとんどのページがスマートフォン表示には対応できているWEBサイトなので問題なく


分析には数秒の時間がかかりますが、末端のページで入力しても同じように数秒要するので複数ページに渡って分析しているわけではなさそう


そして、後日

このツールが単なるチェッカーとしてだけではなく、ウェブマスターツールと連動している事を知る
ウェブマスターツールと連動しているという事はウェブマスターツールのデータを持ってくるGoole Botとも連動しているのかとか思う
さすがにチェックする事によって検索結果に影響を及ぼすなんて事はないと思いたい

なにげなくウェブマスターツールをチェックするとモバイルフレンドリーテストで試したサイト宛にメッセージが届いていました

内容は【モバイル ユーザビリティ上の問題が検出されました】というもの
どうやら、ドメイン下にある楽天の検索APIを使って作った古いコンテンツがスマートフォン対応できてませんよー、って事らしい

そりゃ、言われるまで記憶から消えてたコンテンツですからね
携帯電話には対応しているけどスマートフォン表示に関してはノータッチでした

ほかにも対応できてないページを持ったサイトもウェブマスターツールに登録しているのにこのサイトだけメッセージが来るという事は、アカウントからなのかURLからなのか連動はしているのでしょうね


しかし、おかげ様でgoogle botがなにを基準・重点にしてスマートフォン対応サイトの判断をしているか察する事ができます
メッセージをチェックしていくとモバイルユーザビリティエラーの詳細は確認できます

ビューポートが設定されていません
タップ要素同士が近すぎます
フォントサイズが小です

とありました、ふむふむ

【ビューポートが設定されていません】
metaタグなどでのビューポート設定を指定してないよって事ですね
<meta name="viewport" content="width=device-width, initial-scale=1.0">、など

googleガイドライン>ビューポートを設定する
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport?hl=ja

【タップ要素同士が近すぎます】
ふーむ、これはあんまり考えてなかったですね
勿論、個人的な感覚でのユーザビリティは意識して作ってますが推奨される定義があるとは・・

googleガイドライン>タップ ターゲットのサイズを適切に調整する
https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately

要は小さいリンクボタンなどを配置する場合はリンク同士の間隔を置けという事ですか
正直、何CSSピクセルが何ミリになるとか知らないのですが・・ね
7ミリ以下という事は親指ぐらいなのかな、それに対して水平・垂直に5ミリの間隔を・・

ふぁっ?
まじか、ページ数での移動リンクは親指サイズで横にずらっと並べたりしてるけど、そんなに間隔あけてないッスよ・・・

【フォントサイズが小さすぎます】
うむ、ある程度は大丈夫だと思うけどandroid端末で推移されるサイズとかあるかどうか確認してなかったです
google的にはandroid端末=スマートフォンだろうから、急ぎじゃなくても持っているコンテンツを順次確認・編集していきますかね
で、何ピクセルを基準にすかだけれども

android Designというページに

http://developer.android.com/design/style/typography.html

18ピクセルが中サイズ?いや18sp??なんじゃそりゃ

googleガイドライン>読みやすいフォントサイズを使用する
https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}
ふむ
なるほど、16ピクセルが基準でいいのかな
だいたいその辺ですよね、文字サイズって。


さて、今回のエラーメッセージには無かったですが、気をつけるべきそうな事を少し

【レスポンシブデザインの推奨】
スマートフォンになってからGoogle様はレスポンシブデザインを推奨し続けていますね
レスポンジブの定義だとかデザインがどうこうというより、ガラケー時代によく見かけたデバイス毎にディレクトリやサブドメイン・ファイル名を分けて作成されたサイト
例えばPCにはhttp//aaa.jp/pc/、携帯にはhttp//aaa.jp/mobile/としてデパイス判別で各ページに飛ばす方法は非推奨となっています

現在は同一ページで表示するのが基本、できればPCとスマホはレスポンシブによる同一デザイン(まあ結局CSS等で切り替えるのですが)がベターとされていますね

ガラケーは・・・同じように同一ページで作るのはいいとしても、全部読み込ませるのはちょっとって感じなのでガラケーを判別→別のHTML・CSSの読み込み、でいいですよね?


【読み込み速度】
そのままの事ですが、広告表示など別途記事にしてみたいと思います

【PCサイト・スマホサイト間のリンク】
googleガイドライン>不適切な相互リンク
https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/irrelevant-cross-links?hl=ja

ふむ、スマートフォンコンテンツからPC向けにのみデザインされたコンテンツにはリンク非推奨って事ですかね
単純にユーザビリティの向上について言っているのか検索エンジンのインデックスに影響するのかは不明です



【まとめ】
書いてて、自分のWEB作成の未熟さを感じてしまいますね
最良のモノは作れないし作りたいという気もあんまりしないのですが、ほどほどのモノは作れるようになっておきたいものです
  • ?±??G???g???[?d????u?b?N?}?[?N???A

0 件のコメント :

コメントを投稿