モバイルフレンドリーテストでのエラーの原因がどうしても分からない | ブログ相談 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
モバイルフレンドリーテストでのエラーの...
 
Share:
Notifications
Clear all

[解決済] モバイルフレンドリーテストでのエラーの原因がどうしても分からない  


みるみ
(@mirumi)
Reputable Memberサイト
参加: 9か月 前
投稿: 264
みるみ - Twitter
2020年3月31日 22:45  

お世話になっております。

モバイルフレンドリーテストで「モバイルフレンドリーではありません」になってしまう件について、テーマとは関係ありませんが、この「ブログ相談」というスレッドで質問させていただければと思います。

【現在の状態】

該当ページ: https://milmemo.net/usb-complete-guide

テストの結果、

  • クリック可能な要素同士が近すぎます
  • テキストが小さすぎて読めません
  • コンテンツの幅が画面の幅を超えています

のいつもの3セットがエラーとして出ています。

レンダリング結果を見ると、本来表示されるべきスマホの横幅100%に対して、ページコンテンツ全体が明らかに縮小されていることも分かります。

投稿は3日前で、即インデックス、インデックスされた瞬間から今に至るまでずっとモバイルフレンドリーテストはエラーです。この後に投稿した記事など、他の記事は問題なくモバイルフレンドリーと診断されます。

また、「ページの読み込みに関する問題」というものも出ています(これは他の記事でも出ますし、中身のエラーは今回のものとは関係ないように思えます)。

【お聞きしたいこと】

過去にも同じエラーが出たことはありますが、時間による解決だったり、再度テストをすることで必ず解消できていました。

また、ページをチェックするとたしかにメインカラムから大きくはみ出ている要素があったこともありました(特にtableなど)。

しかし今回はいくらチェックしてもそういったものは見つけられていません。また、デベロッパーツール、モバイル実機の各ブラウザなどでは一切問題なく表示されています。

この原因について何かご存知の方がいましたら…というのが趣旨になります。同じようなご経験をされた方などの意見を聞ければ、と思っています。

かろうじて思いついたのが、「ページのコンテンツが多すぎて(5万字弱+画像多数あります)読み込みに時間がかかり、テストのGooglebotがちゃんとレンダリングできていない」という程度です。こんなことってありえますでしょうか?


みるみ
(@mirumi)
Reputable Memberサイト
参加: 9か月 前
投稿: 264
みるみ - Twitter
2020年3月31日 22:46  
ページの読み込みに関する問題

リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1562
2020年4月1日 01:46  

みるみさん

いつもお世話になっております。

サーチコンソールでエラーが出ると、なんだか気になってしまいますよね。

ネットで検索すると、モバイルで横スライドさせるグローバルメニューも、ひっかかったという記事もありました。

でも、それよりも気になったのは、実際に該当ページをスマホで閲覧しようとしたら、私の環境では読み込みにとても時間がかかりました。

たぶん、大きなサイズの画像をたくさんアップされていらっしゃることも要因の一つではないかと私は推測しています。

私は、写真の多い記事だと、画像は全てコンテンツ幅ぴったりにリサイズして、photoshopやTinyPing等でできるだけ軽いデータにしてアップしています。

レティーナデイスプレイを念頭に置いて大きいサイズをアップするなんてことは、ほぼしていません。

拡大しないとよくわからない画像でも800px程度にしています。

それでもiphoneで閲覧して、画像が汚いと感じることはほとんどありません。(大した記事がないこともありますが・・)さすがに、ピンチアウトすると、ちょっと粗く感じることはありますけども。

あと、長い記事は、分割してしまうという手もありますし・・

コンテンツ幅がオーバーしている箇所が、もしかしたら、あるのかもしれませんが、私のiphoneでスクロールしてみても、横揺れしてしまうという箇所は見つけられませんでした。

あまり知識のない私の書き込みでは、あまり参考にならないかもしれないですが・・

 

 


わいひら 件のいいね!
たなかま
(@tanakama)
Honorable Memberサイト
参加: 2年 前
投稿: 515
たなかま - Twitter
2020年4月1日 12:24  

こんにちは。

かろうじて思いついたのが、「ページのコンテンツが多すぎて(5万字弱+画像多数あります)読み込みに時間がかかり、テストのGooglebotがちゃんとレンダリングできていない」という程度です。こんなことってありえますでしょうか?

調べてみたところ、あるようです。

モバイルフレンドリーテストのbotは、短い時間でタイムアウトするみたいです。

https://support.google.com/webmasters/thread/4318798?hl=en

https://support.google.com/webmasters/thread/8371348?hl=en

 

ページスピードインサイトでレンダリングできているので、おそらくGoogle検索のbotは、ちゃんとレンダリングしているのではないかと推測します。

×モバイルフレンドリーテストのbot

○Google検索のbot

の場合、順位に影響するのかは不明ですね・・・。

いずれにしても、スピードの改善が必要のように思えます。

https://developers.google.com/speed/pagespeed/insights/?hl=JA&url=https%3A%2F%2Fmilmemo.net%2Fusb-complete-guide

 

過去にも同じエラーが出たことはありますが、時間による解決だったり、再度テストをすることで必ず解消できていました。

サーバーの状況によっては、「外部リソースがたまたま読めない」ということは、よくありますね。

 

 


わいひら 件のいいね!
みるみ
(@mirumi)
Reputable Memberサイト
参加: 9か月 前
投稿: 264
みるみ - Twitter
2020年4月1日 20:01  

leafytreeさん、たなかまさん

ありがとうございます。

やっぱりページの読み込み速度に時間がかかりすぎなのが原因なのでは?ということですよね…。

投稿者:: @leafytree

コンテンツ幅がオーバーしている箇所が、もしかしたら、あるのかもしれませんが、私のiphoneでスクロールしてみても、横揺れしてしまうという箇所は見つけられませんでした。

ご確認もありがとうございました。

投稿者:: @tanakama

モバイルフレンドリーテストのbotは、短い時間でタイムアウトするみたいです。

言われて思い出したのですが、以前になにかの記事で鈴木謙一さんのブログでそのことについて読んだことがある気がしてきました。たしかにこの線が強そうですね。

しかしレンダリング崩れや明らかな異常があるわけではなく、あの微妙なレンダリング結果がよく分からないです…。

投稿者:: @tanakama

ページスピードインサイトでレンダリングできているので、おそらくGoogle検索のbotは、ちゃんとレンダリングしているのではないかと推測します。

PageSpeed Insightsのレンダリングbotは普段のGooglebotと同じものなのでしょうか?ものによってはちゃんとレンダリングしてくれているのは少し安心しましたが、(僕個人の)体感では順位の付きが悪く嫌な予感はしていました。

いずれにしても、そろそろページ速度とちゃんと向き合うべきかもと思いました。色々実験して再度報告させていただければと思います。
(他の方に需要があるかは分かりませんがトピックが閉じていなかったらいつかまた書き込みさせていただきます)

 


わいひら 件のいいね!
たなかま
(@tanakama)
Honorable Memberサイト
参加: 2年 前
投稿: 515
たなかま - Twitter
2020年4月2日 01:12  

PageSpeed Insightsのレンダリングbotは普段のGooglebotと同じものなのでしょうか?ものによってはちゃんとレンダリングしてくれているのは少し安心しましたが、(僕個人の)体感では順位の付きが悪く嫌な予感はしていました。

 

GooglebotとPageSpeed Insightsのbotは、ユーザーエージェントが違うので、別物みたいですね。

https://webtan.impress.co.jp/e/2019/12/06/34750

PageSpeed Insightsのユーザーエージェント

https://stackoverflow.com/questions/16403295/what-is-the-name-of-the-google-pagespeed-user-agent

 

以下のフォラームの回答をGoogle翻訳すると

https://support.google.com/webmasters/thread/8371348?hl=en

pagespeedツールはページを正しくレンダリングしているようです。つまり、速度の問題は別として、モバイルの使いやすさには問題がありません。
とのことなので、モバイルフレンドリーには、なっているのだと思います。

こちらのゴールドプロダクトエキスパートさんの回答は、「モバイルフレンドリーだけど、速度には問題があるので、改善しましょう」というアドバイスなんだと思います。

 

僕なりの解釈だと、ユーザーにも、Googleにも、モバイルフレンドリーとは認識されてるんだと思います。←ただ、これの確実なソースが見つからなくて・・・。

Google botのレンダリングは、最新のChrome相当なので、大丈夫そうに思うのですが、上記のソースが見当たらない分、心配ですよね・・・。


わいひら 件のいいね!
みるみ
(@mirumi)
Reputable Memberサイト
参加: 9か月 前
投稿: 264
みるみ - Twitter
2020年4月2日 19:47  

@tanakama

たなかまさん、詳しいソースをたくさん提供くださりありがとうございます!

たしかに

投稿者:: @tanakama

僕なりの解釈だと、ユーザーにも、Googleにも、モバイルフレンドリーとは認識されてるんだと思います。←ただ、これの確実なソースが見つからなくて・・・。

ここが決定的に安心できない理由にはなっていますね。

しかしこちらに問題があるからどこかしら(今回はモバイルフレンドリーテスト)で不都合が発生しているわけで、結局は問題(読み込み速度?)に対処するしか方法はない気がします。

今週末にまた色々試してみる予定です!


わいひら 件のいいね!
Akira
(@akira)
Honorable Memberサイト
参加: 2年 前
投稿: 626
Akira - FacebookAkira - Twitter
2020年4月3日 00:07  

関係あるかは分かりませんが、HTML エラーチェッカーで調べると HTML のエラーが出ています。


わいひら 件のいいね!
みるみ
(@mirumi)
Reputable Memberサイト
参加: 9か月 前
投稿: 264
みるみ - Twitter
2020年4月3日 23:01  

Akiraさん、ありがとうございます。

色々確認してみたところ、キャプションを足した画像は他の記事も全てこうなっているようです。

<div>
<img/>(aタグがある場合はこのimgタグがaタグでちゃんと囲われている)
  <p id="caption-attachment-xxxxx" class="wp-caption-text">~~~~(閉じタグなしで終わり)
</div>

クラシックエディタ(のビジュアルエディタ)で普段作業をしていますが、これはなんの問題によるものなのでしょうか?みなさんはこうならないのでしょうか?

また、同じエラーが出ているページでもモバイルフレンドリーテストはパスしましたので直接的には関係なさそうです(要因のひとつにはなっているかもしれませんが)。


みるみ
(@mirumi)
Reputable Memberサイト
参加: 9か月 前
投稿: 264
みるみ - Twitter
2020年4月5日 15:44  

【解決しました】

報告させていただきます。
やったことや気付いたことを全て書くとまたすごい量になってしまうので、2点だけ。

①:

原因は、tableタグの中にあるimgタグが「配置なし」以外になっている(=alignnone以外のクラスが付与されている)ことでした。

意味不明ですが、これを直すと正しくレンダリングされました。

もともとデベロッパーツールのモバイル用ビューでも異常はなかったのですが、「PCビュー→モバイルビューに切り替える1回の瞬間だけモバイルフレンドリーテストのエラーレンダリングと同等の表示がなされる」ことが分かり、それを手がかりに記事のスクロールを繰り返したところ原因を突き止められました。

②:

Akiraさんに教えていただいた閉じタグが合わない件ですが、1つ上のレスでも申し上げたように、この問題は別件だったものの解決していないままです(切り分けのためにこの記事だけは手動で全部直すことも試みた上でです)。

というわけで「[caption]ショートコードで正しいHTMLタグセットが出力されない」という内容で別トピックにさせていただいてもいいものか検討中です。

WordPress側(img_caption_shortcode関数など)に異常があるとは思えないので僕の環境によるなんらかの不具合だと思います。

以上です。書き込みいただいた皆様、本当にありがとうございます。


わいひらたなかま 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:1年11ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年9ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:16年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

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