ふなさんブログ

ひとりごとブログ

気が向いたときに好きなことを書いています。趣味のブログですので、営業目的のお問い合わせはご遠慮ください。

【はてなブログ】SearchConsoleのスマホ表示エラーの原因は「レスポンシブデザイン」でした。

f:id:funasaan:20200519185407j:plain


こんにちは、ふなさんです。

 

先日、このような記事を書きました。

 

funasaan.hatenablog.com

 

投稿後、Google検索から見に来てくれる人が増え、エラーで困っている人が多いんだなと感じました。

 

ただ、この記事を書いた後も、モバイルユーザビリティのところに表示されるエラーは消えず…困っていました。

 

しかし!!原因っぽいものを見つけ、転機となったので紹介します。

 

このエラーを解決したことで、GoogleとYahoo!からのアクセス数が700PV/日くらいまで改善しました°˖✧◝(⁰▿⁰)◜✧˖°

 

 

「テキストが小さすぎて読めません」という表示

 

新たに、モバイルユーザビリティのところに「テキストが小さすぎて読めません」という表示がありました。

 

どういうこと??と思って確認したのですが、特におかしいところは見当たらず。

 

はてなブログの設定を色々といじってみたところ、はてなブログの「デザイン設定」のところで「レスポンシブデザイン」というところにチェックが入っているのを発見しました。

 

「テキストが小さすぎる」と表示が出たのはこれが原因のようです。

 

 

レスポンシブデザインとは?

 

レスポンシブデザインとは、PCとスマホの表示を同じにする設定です。

 

私はこのブログのサイドバーに広告を貼っているのですが、スマホ表示にするとサイドバーは表示されず、広告も見えなくなります。

 

そのため、かなり前にスマホとパソコンの表示が同じになるように設定し、サイドバーが見えるようにしたのでしょう(正直覚えてない)。

 

これにより、広告は表示されるようになりました。

 

しかし、スマホで表示された時の字がとても小さくなってしまい、読みづらくなりました。

 

レスポンシブデザインにしたときのスマホのスクショ

 

こちらがレスポンシブデザインにする前のスクショです。

 

f:id:funasaan:20200627144720j:plain

 

そしてこちらが、レスポンシブデザインにした後のスクショです。

 

f:id:funasaan:20200627144757j:plain

 

字がとても小さくなり、拡大しないと読めなくなったのがお分かりだと思います。

 

こちらの記事に、レスポンシブデザインのメリットとデメリットがとてもわかりやすく書かれていました。

 

www.stdio.jp

 

PCとスマホで同じ表示方法にするということは、スマホの方が不利になる(パソコンよりも表示速度が遅いため)ということです。

 

表示が遅いページとして、Googleからペナルティを受ける可能性もあります。

 

 

レスポンシブデザインの切り替え方法

 

はてなブログでレスポンシブデザインを切り替える方法についてです。

 

ダッシュボード→デザイン設定 ②スマホのアイコンをクリック ③詳細設定→レスポンシブデザインのチェックをはずす

 

私はレスポンシブデザインのところにチェックが入ってしまっていたため、スマホでの表示速度が遅くなっていました。

 

この設定をしたことで、表示速度が改善されました。

 

はてなブログの最新版ガイドブック↓

 

 

プライバシーポリシー お問い合わせ