Google の「モバイル フレンドリー テスト(Mobile-Friendly Test)」に合格して検索結果に「スマホ対応」ラベルを表示させよう

Google Chrome の検索結果に「スマホ対応」のラベルが付くようになった

このところ Google はモバイル向けのツールを多く提供してきています。またモバイル端末で Google 検索をすると、タイトルの下に灰色の文字で小さく「スマホ対応」という文字が出るようになりました。

当ブログも Google Chrome で「WordPress 入門」で検索すると2ページ目にこのように「スマホ対応」のラベルが表示される用になりました。

「スマホ対応」ラベルの表示

この表示が出るということは、そのサイトが Google の「モバイル フレンドリーテスト」に合格していることを意味しています。ようするに「スマートフォンで閲覧するのに最適化されたサイトですよ」という証ですね。

「モバイル フレンドリーテスト」公式ページ

自分のサイトが「モバイル フレンドリー」の基準に合格しているかを知るために以下のツールが公開されています。

モバイル フレンドリー テスト公式ページ

Mobile-Friendly Test – Google

使い方は簡単で、調べたいページの URL を入力して、「Enter キー」を押すか「分析」をクリックするだけ。 数秒で分析結果が表示されます。

モバイル フレンドリー テストの結果
ご覧のように、

問題ありません。このページはモバイル フレンドリーです。

とあれば「スマホ対応」ができている証拠です。ほかにも項目としては、

  • このページは Googlebot にどのように見えているか(改善点の指摘)
  • モバイル フレンドリーページの詳細(公式ページへのリンク)
  • フィードバックを送信(開発者へのコメントや質問)
  • Google ウェブマスターツールを使用していますか?(公式ページへのリンク)

がリンク付きで書かれていますので、くわしくはクリックしてください。画面下にはスマートフォンがあります。たぶん、これは Nexus5 ですね。検証したサイトがモバイル端末でどのように表示されるのかがわかります。

「ウェブサイトをモバイルに最適化する」ためのガイドライン

Google は「ウェブサイトをモバイルに最適化する」公式ページを公開しています。

ウェブマスター向けモバイルガイド

ウェブマスター向けモバイルガイド – Google Developers

こちらの公式ページに行けば、モバイル端末に合わせたサイトの作り方や、どのような工夫が必要なのか、その理由などをくわしく理解することができます。かなり多い情報なので、ゆっくりと時間をかけて読んでいく必要がありそうです。

これだけ膨大なガイドラインがあれば、モバイル向けにサイトを修正していくことも、新しく作っていくことも、迷うことはないでしょう。

いいですね。

その他の Google ツール

ほかにも「モバイル フレンドリー」に合格しているかを調べるツールは3点あります。

  • Pagespeed Insights
  • ウェブマスターツール:「検索トラフィック」→「モバイルユーザビリティ」
  • ウェブマスターツール:「クロール」→「Fetch as Google」

Pagespeed Insights の「ユーザーエクスペリエンス」

PageSpeed Insights の公式ページ

PageSpeed Insights – Google Developers

定番はやはり「Pagespeed Insights」です。最近では「ウェブページの URL を入力」の下に

Is your site mobile-friendly? Try the Mobile-Friendly Test. Dismiss

と表示され、「モバイル フレンドリーテスト」の紹介がされるようになりました。

Pagespeed Insights で検証してみると「パソコン」と「モバイル」の両方を分析してくれますが、「モバイル フレンドリー」のチェックについては「モバイル」の「ユーザー エクスペリエンス」を見ます。

PageSpeed Insights【モバイルの結果】

現在は当ブログをすこし調整したので、ひとつだけ指摘があり、スコアは99になっています。

PageSpeed Insights で検証した【モバイル】のユーザーエクスペリエンス(UX)を100点にするための解決方法 | かっぱのWordPress入門ブログ

Google ウェブマスターツールで「モバイル フレンドリー」を調べる

Google ウェブマスターツールに登録しているのであれば、

  • 「検索トラフィック」→「モバイルユーザビリティ」
  • 「クロール」→「Fetch as Google」

で調べることが可能です。もし登録していないのであれば、先に登録しておきましょう。

ウェブマスター – Google

Google のウェブマスターツールでは簡単な結果が分かるだけです。

【モバイル ユーザビリティ】

ウェブマスター ツール   モバイル ユーザビリティ  の結果

【Fetch as Google】

ウェブマスター ツール   Fetch as Google   の結果

これらでも結果はわかりますが、いまのところほとんど使いませんね。

さいごに

このブログも「モバイル フレンドリー」に合格していますが、人の目で見ると、ところどころ不十分な点が残っています。ほんの数 px の余白だとか、文字の大きさが微妙に小さいとか…。

こういうところは Google さんのツールではカバーしきれないところなので、コツコツと人の手を使って地道に修正していきます。

関連記事

Google Developers の PageSpeed Insights で計測したら瞬間的にモバイル・PC共に99点になったので記念にキャプチャしておきました【追記あり】

ひさしぶりにプラグインや画像処理、jQueryなどの修正をしてみたら、瞬間的にPageSpeed Insightsで99点になりました。わたしはあまりこの数値にこだわりすぎないようにしているのですが、これだけの高得点はなかなか無いと思うので…

Google Chrome デベロッパーツール「要素の検証」を利用した HTML と CSS の学び方(素人向き)

素人による学び方 HTMLやCSSを学ぶ方法はいろいろあるとおもいますが、基本的なサイト作成の教科書を読んだあと、わたしは中級レベルの本をじっくり読むようなことはしていません。わたしがやったのは以下の方法です。 興味を持ったサイトのデザイン…

自作 WordPress テーマのためのメモ

前回のところから、もうすこしおもしろいデザインにしたいと思って、いろんなサイトデザインを調べて見ることにしました。 とくに参考になったのが、 Themegraphy – WordPressテーマギャラリー Media Queri…

【マルチデバイス対応】 WordPress で作ったサイトをメディアクエリー(Media Query)とユーザーエージェント(UA)による判別でモバイル端末に最適化する方法

マルチデバイスに対応したサイトにする マルチデバイスに合わせた対応をする方法はいろいろありますが、今回は「レスポンシブWebデザイン」で使われる主要な技術のひとつである「メディアクエリー(Media Query)」と、「ユーザーエージェント…