モバイルフレンドリーでのエラーが分からない。修正方法

2019/01/25

最近Google search consoleグーグルサーチコンソールのエラーが頻繁に出るようになってきました。

Googleはスマートフォン向けのコンテンツの強化に力を入れていて、スマートフォンで見にくいコンテンツは修正を促すように、エラーを警告してきます。

実は自分も半年間かけて探してやっとエラーを見つけてようやく解消に向けて動き出した所です。

エラーを見つける為のヒントになればいいかと思います。

■目次

　▶エラーが４６！？

　▶クリック可能なボタンが近すぎる

　▶コンテンツの幅が大きすぎる

　▶素人には難しい

　▶まとめ

■エラーが４６！？

どうせたいしたことにはならないだろうと思っていると、いつな間にかエラーが４６にまで膨れ上がっていました。

こんなにもエラーがあると修正する気にもなりません。記事を書きたいのにモバイルフレンドリーの為にかなりの時間を割かないといけません。

自分のブログが検索上位に上がる為にはエラーを修正しないとSEO的にもよくありません。

諦めていたエラーの修正を一からやることにしました。まずはグーグルサーチコンソールでエラーの確認をして問題のページを見つけることです。

そしてエラー内容にそって少しでもおかしなところがないか注意して探しましょう。

簡単なことではないですが、かなり根気がいります。

▶目次にもどる

■クリック可能なボタンが近すぎる

まず始めに修正を試みたのがクリック可能なボタンが近すぎるというエラーです。

見つけようとするのですが、なかなか見つかりません。ブログがレスポンシブになっているとブログ全体のクリック可能なボタンが近いように見えてどれがエラーなのか分かりません。

ここでひらめいたのが、テンプレートにはほとんど異常はないので自分が後から追加したボタンではないのか。ということです。

そしてじっくり見ていくとSNSボタンが少し変なのに気づきました。たしかにSNSボタンは後から自分が追加したんですが、自信をもって大丈夫だと思っていました。

でもSNSボタンが横一列に、はてなブログ、ツイッター、フェイスブック、Google+、ラインと並んでいて文字が途中で途切れています。

そこでこのSNSボタンを３つに絞ってみることにしました。ツイッター、フェイスブック、ラインの３つにしてみました。

するとすっぽりきれいに画面に収まりました。きっとこれではないかと思ったのでサーチコンソールでエラーを検証してみました。

１日で４３件のエラーを解消することに成功しました。２件はまだ保留ですが、きっと後数日で０になるのではないかと思います。

１つの修正でエラーがほとんど消えるという結果に大満足です。

▶目次にもどる

■コンテンツの幅が大きすぎる

このエラーは４５件出ていたので探そうと思っていたら、SNSボタンを３つにしたらいつの間にか修正できていました。

自分で作ったSNSボタンが原因でコンテンツの幅もスマートフォン表示では無理していたみたいです。

やはりまず疑うのは自分で作成した場所を徹底的に調べるのがいいと思います。

▶目次にもどる

■素人には難しい

自分も素人なんですが、モバイルフレンドリーの修正はHTMLを書きかえないといけないので素人はかなり難しいと思います。

SNSボタンは他の人がブログにやり方を載せていてくれたので自分のブログにコピペしました。

貼りつけした時は６つもSNSボタンがあったんですが、HTMLを３つ消して、ＣＳＳでも不要なところを消して色の調整をおこないました。

モバイルフレンドリーのエラーを修正することは簡単なことではありません。

エラーを出さない為にはテンプレートをレスポンシブで最新なものにするか、自分でカスタマイズしないほうが良いのかもしれません。

▶目次にもどる

■まとめ

このSNSボタンの修正で４５個のエラーは修正することができましたが、どうしてもエラーが解消できないものが１つあります。

全記事一覧を表示するとレスポンシブにならずにPC表示されてしまうことです。これはどうしても解消してエラーを０にしていかなければなりません。

エラーを修正する方法として、Googleでかなり調べまくることが大切です。そして情報を得て修正したいと思っています。

▶目次にもどる

関連記事