ブログ。モバイルユーザビリティが困ったことに…

ビジネス
スポンサーリンク

翼屋です

※この記事内で説明している内容は全てスマホ(iPhone X)のみでおこなっております

2月2日にGoogle search console Team様からこんなメールが届きました▼

内容はモバイルユーザビリティでのエラーでした

問題とされたのは

・テキストが小さすぎて読めません

・コンテンツの幅が画面の幅を超えています

・クリック可能な要素同士が近すぎます

翼屋
翼屋

一難去ってまた一難😭

ということでしたので色々探ってみました

スポンサーリンク

モバイルユーザビリティとは

モバイルユーザビリティというのはモバイル端末でのWebサイトなどの操作性や使いやすさのこと。サイトの表示を問題なくできるかチェックできる機能です

Googleサーチコンソールの拡張機能の中にあります

モバイルフレンドリーを調べるには

モバイルフレンドリーとはスマートフォンでサイトを快適に観覧できるようになっていることです

モバイルフレンドリーではありませんということはスマホに最適化されていないとGoogleのクローラーに判断されているということです

調べるにはサーチコンソール内のモバイルユーザビリティから調べれますが

直接モバイルフレンドリーテストツールで調べることができます

エラーになった理由

Googleの誤認や読み込み速度が遅くてエラーが出る場合があるらしいんですが僕の場合、上記3つの問題が出る理由がなんとなくわかりました

HTMLやCSSは触った覚えはないし、自分のスマホや他の人にURLを送って見てもらっても問題なく閲覧できました

それなのに何度モバイルフレンドリーテストをしてみても【モバイルフレンドリーではありません】と叱られてしまいます

わけがわからずモヤモヤしながらテスト済みのページをとりあえず探ってみてそこにあったスクリーンショットを表示させると!?

記事のページが左に寄る現象が起こっていたのです

これでは文字が小さいだの言われても仕方ありませんよね

通知が来たページ以外も調べてみると、トップページのURLはモバイルフレンドリーでスクショも通常なのに記事のページURLは全部がスクショを表示すると左に寄ることがわかりました

試してみたこと

色々原因を疑ってやることはやってみました

何もせずに検証開始

たまにGoogle botが誤認してエラーを出すパターンがあるようなのでそれに期待して何もせずに検証してみましたが何度やってもダメでした。誤認だとここでモバイルフレンドリーとなるようです

AMPを有効化してみる

サイトの速度が重いとたまにbotが部分的に読み取れないということもあるようなので、使って無いプラグインを全て削除してcocoon設定からAMPを有効にしてみました。

もともとcocoonの高速化でHTMLとCSSとJavaScriptの縮小化はしてあったのでAMPを有効にしたんですがダメだったので元に戻しました!

結果

2月5日に解決するまでに至りました

スクショ画面もこの通りです

2月7日に検証結果が届きました

過去記事でカバレッジの除外について検証した結果もここまでの過程で除外項目がかなり減りました

これくらいの除外と重複なら問題ないでしょう▼

原因

解決するまでの約3日間かなり苦戦しましたが意外と単純なオチでした。原因はcocoonテーマのバージョンアップがされていなかったこと

ワードプレスがバージョンアップしたために古いバージョンでは不具合が起こっていたようです

しかし、いつもこまめに更新はしているので気づかずにcocoonをバージョンアップしていなかったわけではないです

今回のバージョンアップも間違いなくアップグレードしてあったはずなんですが

何故か親テーマが2つあると言う現象が起こっていました

上記の画像は2つある方の上が適用されている方で古いバージョン、下にあるのがバージョンアップされた方です

バージョンアップを更新すると何故か新しい方が2つ目として出てきていたので古い方が使われ続けていたわけです

※これに気づけたのはcocoonのサイトのフォーラムページで質問して答えを導いてもらいました。そこでのやり取りで、リフィトリーさんと言う方に「テーマは親テーマと子テーマに分けた方が良い」ということを助言いただいたのでcocoonを親と子に分けて入れてみることにしました

親テーマと子テーマを入れるメリット

親テーマで全て設定を行っていると親テーマをアップデートした時に今までイジってきたカスタマイズが失われる可能性があるかも知れないので、子テーマの方でアナリティクスやサーチコンソール、広告、cocoon設定やページのカスタマイズを行う。(子テーマはアップデートの頻度が少ない)親テーマはインストールした状態から何もカスタマイズせずデフォルトのままにしておく。そうすることでどんどん親テーマがアップデートされていっても心配がいらなくなるということです

解決法

まず今使っている古いcocoonを新しくしなければいけないので設定をバックアップし、cocoonの子テーマに移します

子テーマはcocoonのサイトからダウンロードしてきました

子テーマを有効にしたら新しいバージョンのcocoonを残して古い方のcocoonテーマを削除。これで完了です

親テーマから新しいバージョンの親テーマに変えても解決しますが、バックアップを取って移設するという工程が子テーマを入れても同じことをすることになるのでこれを機に子テーマを入れました

使っていた親テーマのcocoonがconohawingでダウンロードしたテーマだったのでそういう現象が起きたのかもしれませんね(conohaのサイトからもテーマのダウンロードが可能でもしかしたら仕様が違うのかも)

一応今後こんなことがないようにcocoon公式の方から親テーマもダウンロードし直しておきました

最後に

conoha仕様のcocoonをアップグレードすると2つ目のcocoonテーマが現れるのは謎なままです(conohawingに問い合わせをしてみていますが返事待ちです)が今回の【モバイルユーザビリティに関する問題】については解決とします

以上です

ご意見ご要望・質問等ありましたらコメント欄か問い合わせまで、Twitterもやっていますので気軽にご連絡ください

コメント

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