はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

スマホ未対応の警告「モバイル ユーザビリティ上の問題が検出されました」がGoogleから来た時の対処方法

Googleウェブマスターツールから「(ドメイン名)でモバイル ユーザビリティ上の問題が検出されました」という件名のメールが来た。以前はスマホ対応していたが最近諸事情でスマホ未対応にしたからだろう。

結論:対処方法

次のタグをheadに入れるだけで問題解決した。モバイル フレンドリー テストで指摘されていた警告がすべて解消。

<meta name="viewport" content="width=device-width, initial-scale=1">

サイトの構造によって一概には解決できないかもしれないから、詳細は次のページで確認してほしい。

Amazon.co.jp: わかるスマホ対応ホームページ超入門 HTML5&CSS3

警告が来るまでの経緯

WordPressで構築したサイトをかなり放置していたら、悪意ある第三者に乗っ取られてスパムの温床になってしまった。

WordPress乗っ取り対策しなかったらスパムの踏み台にされサーバー凍結、アップデート放置は危険! - はぴらき合理化幻想

上記リンク先に記載したとおり、WordPressでの運用をやめてHTMLファイルでサイトを再構築。しかし、最低限のタグしか使っていなかったところ、ウェブマスターツールから表題の警告が来た。

WordPress使用時はスマホ対応していたが、HTMLファイルで作りなおしたサイトではスマホ対応してなかった。よって、スマホ未対応という警告が来たのだろう。

ちなみに、当ブログをスマホでGoogle検索すると下図のとおり「スマホ対応」というラベルが付いているが、警告が来たサイトにはラベルがなかった。

Google検索結果でスマホ対応ラベル表示されている具体例

ウェブマスターツールからのメール

次のメールが送られてきた。最初は何事かと驚いたよ。

Google のシステムは、貴サイトの 1 ページをテストし、そのうちの 100% に重大なモバイル ユーザビリティ上の問題を検出しました。この 1 ページの問題の影響で、モバイル ユーザーは貴サイトを十分に表示して楽しむことができません。これらのページは Google 検索でモバイル フレンドリーとは見なされないため、スマートフォン ユーザーにはそのように表示、ランク付けされます。

Amazon.co.jp: 恐怖新聞全9巻 完結セット

対処前後の具体例

viewportのあるなしだけが違う簡素なサンプルページを用意した(コメントアウトしてるかしてないか)。モバイル フレンドリー テストの結果ページへのリンクも載せている。

ビフォー

モバイル フレンドリー テストの結果:モバイル フレンドリーではありません

アフター

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

まとめおよび所感

まじめにサイトを構築していればviewportは必ず入れる。しかし、本文の表示だけを優先していたがために、viewportどころかCSSなどもまだ未着手だった。これがきっかけでGoogleウェブマスターツールからこういった警告が来るのを知れた。これはこれでおもしろかった。

Amazon.co.jp: 転んでもただでは起きるな!

てすとてすと