一定のページだけ「ページがモバイル フレンドリーではありません。」と表示される

Simplicityの特徴 › フォーラム › Simplicityについての質問 › 一定のページだけ「ページがモバイル フレンドリーではありません。」と表示される

  • このトピックには13件の返信、2人の参加者があり、最後にぴろりんにより9年、 10ヶ月前に更新されました。
13件の返信スレッドを表示中
  • 投稿者
    投稿
    • #47509
      ぴろりん
      ゲスト

      お世話になっております。
      掲題の通りなのですが、一部のページのみ「ページがモバイルフレンドリーではありません」と表示されます。モバイルフレンドリーテストはOKなのですが、なぜか表示だけ出てくるような状況です。
      トップページ
      http://piro02.com/
      問題のあるページ
      http://piro02.com/1023.html
      http://piro02.com/1032.html
      原因がわからず四苦八苦しております。
      解決方法をご教授頂けると大変ありがたいです。
      何卒宜しくお願い致します。

    • #47518
      アバター画像わいひら
      キーマスター

      とりあえずは、モバイルでも子テーマのstyle.css指定されている以の設定が生きているので、モバイル端末の幅がはみ出しています。

      .article h2 {
          margin: 40px -15px 20px;
      }

      モバイル端末で見ると横スクロールが出ていて、動かしたりするとページが横にグラつくと思います。
      モバイル端末では、-15pxとなっているのを0となるようにCSSを、メディアクエリを用いて、もしくはmobile.cssに書かなくてはなりません。
      とりあえずここを修正してみてください。

    • #47529
      ぴろりん
      ゲスト

      わいひらさん

      ご回答ありがとうございます。

      mobile.css に設定をいれ、とりあえず画面が横に揺れないようになりました。

      @charset "UTF-8";
      
      /*ここにモバイルのスタイルを書く*/
      
      .entry-snippet{
        display:none;
      }
      
      .article h2 {
          margin: 40px 0px 20px;
      }
      
      @media screen and (max-width: 30em) {
        .article h2 {
          padding: 15px 30px;
          margin: 40px 0px 20px;
        }
      }

      ただ未だ一部のページのみ「ページがモバイルフレンドリーではありません」と表示されてしまいます。

      設定に何か問題はありますでしょうか?

      お忙しいところ申し訳ありませんがご回答頂けると幸いです。

      宜しくお願い致します。

    • #47536
      Hidekichi
      ゲスト

      http://piro02.com/1023.html はモバイルフレンドリーですと出てきますが、そのモバイルフレンドリーではない「一部のページ」はどれになりますか?

    • #47538
      ぴろりん
      ゲスト

      エラー

      お世話になります。
      画像は1023.htmlになりますが、1032.htmlも同じように検索結果でモバイルフレンドリーでないとメッセージがでます。

      問題のあるページ
      http://piro02.com/1023.html
      http://piro02.com/1032.html

      モバイルフレンドリーテストを行うと、問題ないと出てくるのですが原因が分からない状況です。

      何卒宜しくお願い致します。

    • #47539
      Hidekichi
      ゲスト

      今回の原因とは関係ないかも知れませんが、いくつかcssを修正してください。

      子テーマstyle.cssの:beforeが: beforeとなってます。
      擬似クラスと擬似要素を分けるために、E::beforeと書くのが良いかとおもいます。

      indexなのでどこに書いてあるかはわかりませんが、headタグ最後あたりのstyleタグの中のbackground-color: ;は必要ないなら消してください。

    • #47549
      アバター画像わいひら
      キーマスター

      まだ昨日の修正が、モバイルフレンドリーを判断するクローラーに補足されていないということではないでしょうか?
      モバイルフレンドリーテストでエラーが出ない以上、これ以上どうしようもないかもしれません。
      とりあえず長くて1週間から2週間くらい様子を見る必要があるかもしれません。

    • #47577
      ぴろりん
      ゲスト

      Hidekichiさん
      ありがとうございます。E::beforeに変更してみました。
      ただ、background-color: ;はどこにあるのか分からずそっとしておきました。。。

      わいひらさん
      ありがとうございます。
      様子見しかないのでしょうか。。。
      新しく追加したページも同じ現象が出ております。
      http://piro02.com/1060.html
      うーん。。。
      全く原因が分からず。子CSSと親のheader.phpのviewportぐらいしか触ってないのですけど、良く分かりません。
      良い方法があればご教授頂けると幸いです。
      何卒宜しくお願い致します。

    • #47578
      Hidekichi
      ゲスト

      E::beforeというのは、EはElementsつまり要素ということです。なので要素名の後に::beforeとするということです。

      元々が、
      h3: before {}
      こうなっていたのを、:の後にスペースが開くのはおかしいので、

      h3:before {}
      //あるいは
      h3::before {}

      としてはどうですかという意味です。

      またamazonのスクリプトにdocument.writeが使われています。モバイルでは表示されてませんが表示しようとするためにアクセスしているんだろうと思います。document.writeは2010年ぐらいには既に非推奨になっているので他に同じような、今時の仕様の広告のコードがあるかも知れません。ここらは問い合わせるか調べてみてください。

      amazonのスクリプトはサイドバーのウィジェットに入ってるんですかね?
      そしたら、中のスクリプトを

      if (window.innerWidth > 768) {
        //ここに広告コード
      }

      みたいにするなどして、常に読み込まないようにするほうが良いです。768は768pxということですが、メディアクエリでサイドバーが表示されるサイズに合わせて変更してください。
      上記の場合、画面幅が768px以上の時に広告コードを実行するという感じです。

      background-color: ;はextension-style-inline-cssとあるのでそれらしいのを探してみてください。

    • #47601
      アバター画像わいひら
      キーマスター

      viewportは、モバイルフレンドリーの影響をもろに受けるところなんで、心配ならば戻した方が良いんじゃないでしょうか。
      もし、それでも改善しない場合は、1度、まっさらな親テーマと子テーマに戻して様子を見ながらカスタマイズしていくしかないかもしれません。
      当サイトでは、そういったメッセージを出ていないので、それ以外は何とも言えないかもしれません。

      それ以外には、よりGoogleについて詳しい人が集まるGoogleフォーラムで質問すると、どなたか賢者が原因を知っておられるかもしれません。

    • #47604
      みき
      ゲスト

      http://piro02.com/1023.html、
      http://piro02.com/1060.htmlと
      http://piro02.com/1032.htmlは
      モバイルフレンドリーです
      モバイルフレンドリーかは以下のツールで確認できます

      https://search.google.com/search-console/mobile-friendly

      今までも同じようなことがあったみたいです
      参考

      なんか普通に書いてたらスパムみたいな文になったww

    • #47607
      みき
      ゲスト

      これがそう表示される原因かもしれないです

    • #47611
      アバター画像わいひら
      キーマスター

      確かに、みきさんの貼られたこの記事以上の対策方法はないかもしれません。
      モバイルフレンドリーテストに合格しているのにモバイルユーザビリティレポートでエラーが出る理由 | 海外SEO情報ブログ

      それでも気になるようであれば、新しくカスタマイズなしの状態からやるしかなさそう。

    • #47744
      ぴろりん
      ゲスト

      hidekichiさん みきさん わいひらさん
      ご回答ありがとうございます。
      何にせよ様子を見て、改善しないようであれば初期の状態に戻して対応するように致します。
      丁寧なご返信に感謝致します。

13件の返信スレッドを表示中
  • トピック「一定のページだけ「ページがモバイル フレンドリーではありません。」と表示される」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)