メニュー
アーカイブ
カテゴリー

Cocoonのモバイルユーザビリティエラーを修正する方法

  • URLをコピーしました!

↑↑この記事をシェアする↑↑

Wirurun.comは大学生の管理人「Wiru」によって運営されている個人ブログです。

あなたの「シェア」や「フォロー」は運営継続の大きな支えになります。

今回の記事はCocoon使用している時にGoogleのモバイルフレンドリーテストでエラーが発生する原因解決方法を紹介。

ちなみにかなり予想外な解決方法となっていたので記事にすることにした。

**追記、新しい修正項目が見つかったので、こちらもチェックを!(記事下にもリンクを貼ってあるので、こちらの記事の修正を行なってから、こっちもチェックしてくだされ。)

あわせて読みたい
Cocoonモバイルの「テキストが小さすぎて読めません」を解消する方法 モバイルフレンドリーテストで「テキストが小さすぎて読めません」、「クリック可能な要素同士が近すぎます」、「コンテンツの幅が画面の幅を超えています」の3つの問題が生じた時の解決方法について紹介する。
目次(クリック可能)

自分もエラーが発生した原因が分からず色々と検索

まず検索によってついた知識で「CSSが読み込まれていない」ということが判明。

チェック方法は簡単。(改善には必要なし)

「モバイルフレンドリーテストを行う」→「テスト済みページを表示」→「その他情報」→「ページのリソース」に読み込むことの出来ていないURLの一覧が出ているので、ここで確認できる。

ここにCSSの文字があれば読み込まれていないことが確定。

これはGoogleのボットCSSの読み込みに時間がかかり過ぎるため、諦めたという報告になる。

別記事の解決方法

他の記事ではGoogleボットが読み込めるように高速化をするというのを紹介している。

高速化によって解決へ

https://kahrnblog.com/mobile-friendly-test-with-cocoon/

ここの記事の通り「CSS縮小化」を行うことで部分的に解決することができる。でも…

デザインが一瞬壊れる

CSSの縮小化を行なうと(仕組みを詳しくは分からないが)一瞬文字だけの状態が見えてしまう。

予想では遅延して読み込んでいるため、まず文字のデータだけが読み込まれ、次にCSSが読み込まれることとなるため、見た目がかなり汚い

正しい解決方法

正しい解決方法は「何もしない」ということ。

スマホで実際に見てみて問題がなければGoogleが勝手に解決してくれるっぽい。

実際の取得はツールよりも時間をかけてくれるので、よほど遅くない限りはページを取得してくれているはずです(ツールは速く結果を返すためにタイムアウトを短く設定しているようです)。 とはいえ、まずはパフォーマンスを改善することを推奨します。

https://support.google.com/webmasters/thread/7888742/

本当の検索結果はGoogle Search Consoleモバイルユーザビリティより確認できるので、こちらの数字が増えていれば問題ないらしい。時間かけて頑張ったのに悲しい…

あわせて読みたい
Google Search Console Use Search Console to monitor Google Search results data for your properties.

**追記、新しい修正項目が見つかったので、こちらもチェックを!

あわせて読みたい
Cocoonモバイルの「テキストが小さすぎて読めません」を解消する方法 モバイルフレンドリーテストで「テキストが小さすぎて読めません」、「クリック可能な要素同士が近すぎます」、「コンテンツの幅が画面の幅を超えています」の3つの問題が生じた時の解決方法について紹介する。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次(クリック可能)