クリック 可能 な 要素 同士 が 近 すぎ ます。 クリック可能な要素同士が近すぎます 「モバイルユーザビリティ」に関する問題が新たに検出されました。 で対処したこと

「コンテンツの幅が画面の幅を超えています」のエラーの原因はtableタグ

クリック 可能 な 要素 同士 が 近 すぎ ます

「モバイル ユーザビリティ」は Google 検索結果で悪影響を受ける可能性がございます。 この問題をご確認のうえ、修正することをご検討ください。 新たに検出された上位 2 件の問題(影響を受けるページ数に基づく): クリック可能な要素同士が近すぎます コンテンツの幅が画面の幅を超えています 「スマホやタブレットだと見にくい・使いづらい」という問題が、私のサイトで2個所見つかったようです。 MEMO この記事では「クリック可能な要素同士が近すぎます」についてのみ書いています。 「コンテンツの幅が画面の幅を超えています」の問題については「」の記事にまとめました。 エラーが指摘されたページを Google 検索してみたら、ヒットした記事のタイトルの下に「ページがモバイル フレンドリーではありません。 」と表示されちゃってました。 これは嫌ですね。 でも、記事を PC で見たときはもちろん、スマホで確認しても、何も問題ないように見えるんですよね~。 どこがおかしいんだろ? 調査と修正 私が最初に発見した問題は、存在しない画像へのリンクタグ(a タグ)でした。 WordPress の記事にメディアライブラリから画像を挿入したけれど、メディアライブラリにあるその画像ファイルをうっかり削除してしまったために、記事の中に無効なリンクタグが残ってしまっていました。 そしてその無効なリンクタグが隣の画像のリンクタグと隣接していました(無効なリンクタグは WordPress のエディタ上(ビジュアルモード)では見えないため気が付かなかった)。 MEMO 当サイトでは Easy FancyBox というプラグインを使用しているため、すべての画像にクリック可能なリンクタグ(a タグ)が付きます。 そういう場所にキャレットが来ると、下図のように小さな青い枠が表示されることがあります。 ここに無効なリンクタグがありました。 このようなタグってエディタのビジュアル画面だと分かりにくくて、見逃してしまうことがありますね。 ちなみに下図のように画像の下部の全体が青い枠で囲まれている場合は正常です。 早速、ビジュアル画面からテキスト(HTML)画面に切り替えて、使用していない画像ファイルへのリンクタグ( ~ )を削除しました。 MEMO おそらく、修正が完了したら[修正を検証]ボタンをクリックしたほうが良さそうです。 これについては後述のケース3を参照してください。 ケース2:コメント投稿画面のボタン 前述のケース1と同じタイミングで、別の記事に対しても同じ問題が指摘されていました。 調査と修正 その記事を調べてみましたが、ケース1で見つかったような、隣接したリンクタグの問題はありませんでした。 いろいろ調べたけれど原因が分からず、ほとんど修正しないまま(うっかり)Search Console の[修正を検証]ボタンをクリックして再チェックを依頼してしまったら、後日、再チェックを依頼した記事とはまた別の記事に対して「クリック可能な要素同士が近すぎます」という指摘がありました。 で、「これは特定の記事の問題ではなく、記事全般に共通する問題かな」と思いました。 「何が問題なんだろ~?」とスマホ画面をじっくり眺めていると、コメントの投稿画面のボタン(投稿に HTML タグを追加するボタン)が密集しすぎてるような気がしてきました。 コメントシステムはすべての記事で共通しているので、これはあやしいと思いました。 当サイトのコメントシステムは WpDiscuz というプラグインを使用しています。 幸い、これらのボタンを非表示にする設定があったので(これらのボタンは無くてもいいや!と思って)非表示にしてみました。 下図のようにスッキリしました。 解決 Search Console の[修正を検証]ボタンをクリックして結果を待っていると、翌日の朝には問題が解決したことを知らせるメールが届きました。 今回確認した問題は「クリック可能な要素同士が近すぎます」です。 貴サイト内の 1 ページで修正が確認されました。 確認プロセスの詳細をチェックし、「モバイル ユーザビリティ」に関する未修正の問題が他にあるかどうかを見るには、次のリンクにアクセスしてください。 こちらは問題が解消されたことを示す Search Console の画面です。 ケース3:コード表示のツールバーのボタン Search Console で問題が指摘されていた ケース1のときのように Search Console から「問題があるぞ」というメールは来なかったんですが、ある日、Search Console の[モバイル ユーザビリティ]の画面を開いてみたら、また別の記事に対して「クリック可能な要素同士が近すぎます」という指摘がされていました。 調査と修正 エラーが指摘されている記事を確認したところ、Crayon というプラグインで作成したコード表示の画面があって、すぐに「あ、これかな?」と思いました。 Crayon のコード表示画面のツールバーのところにボタンが密集しています。 早速、Crayon の設定画面で、上図のボタンを常時表示するのをやめて、マウスカーソルを重ねたときだけ表示するようにしました。 PC で動作を確認(このとき、うっかりスマホで確認しませんでした)。 そして Search Console の画面でエラー箇所をクリックし・・・ [修正を検証]をクリック。 [初期検証中]の表示になり・・・ 検証状態が[開始]となりました。 ここで「あ、スマホで確認するのを忘れてた」と気付いてスマホを見てみると・・・「あれ? ボタンが表示されたままだ!」 「そっか。 さっきの設定はマウスに関係する設定だから、スマホには関係ないのかな?」 「どうにかならないのかな?」と、すぐに Crayon の設定を調べなおしてみたら・・・「あ、これどうだろう?」というオプションがありました。 「タッチスクリーンのデバイスではマウス関係の動作を無効にする」という設定。 これがオンになっていたのでオフにしました。 オンのままだと(スマホでマウス動作が無効になってると)スマホではツールバーのボタンが常時表示されてしまうのですが、オフにすると(スマホでマウス動作が有効になってると)デフォルトでは非表示になり、コード画面をタップすると表示されるようになりました。 デフォルト状態では下図のようにスッキリ・・・というか、なんかそっけない感じ?(アッサリ?シンプル?)になりました。 解決 それから数日待ちましたが、ケース2のときのように、検証結果を知らせるメールは届きませんでした。 「もう慣れたでしょ? 自分で確認してね」ということなんでしょうか? で、Search Console の[モバイル ユーザビリティ]を開いてみると、検証に合格していました。 ケース4:何も修正しなかったがエラーが消えた Search Console で問題が指摘されていた ケース3と同じく、ある日、Search Console の[モバイル ユーザビリティ]の画面を開いてみたら、また別の記事に対して「クリック可能な要素同士が近すぎます」という指摘がされていました。 調査と修正 エラーが出ている記事を確認したんですが、文字だけで構成されている非常にシンプルな記事でした。 文字数も多くなく、表も図もありません。 記事の執筆者の責任が問われるような問題は見当たりませんでした。 もしも問題があるとしたら、それは使用しているテーマか、WordPress そのものか、表示している広告、あるいは何かのプラグイン・・・等に問題があるとしか考えられません。 さすがにほぼお手上げ状態だと感じたので、「お代官様、もう私に直せるところはありまへん。 どうかもう勘弁してくだせぇ・・・」という思いを込めて、何も修正しないまま、[修正を検証]ボタンをクリックしておきました。 ・・・ま、「Search Console の指摘の方が間違ってるんでないの? 再検証してみてよ!」という気持ちもありました。 解決 数日後、Search Console を確認すると「検証に失敗しました」というようなメッセージに変わっていました。 エラーは消えていません。 「やっぱりどこかに問題があるのかなぁ??」と該当記事をもういちど穴があくほど凝視しましたが、何も思い当たるところはないので、しかたなく放置することにしました。 ところが・・・ それから1~2日後にまた Search Console を確認すると、なんとエラーが消えているではあ~りませんか! そういえば、以前、誰かが似たような体験を記事に書いてたような・・・。 こういうことってやっぱりあるんですね。 MEMO ケース4を書いたのが2019年1月24日頃。 2019年5月28日にも Search Console から同様の指摘があった(今回はメールが届いた)ので、該当記事を確認したがそれらしい問題は見当たらず。 で、今回も何も修正しないまま[修正を検証]ボタンをクリックして再検証を依頼。 すると翌日の朝にはエラーが消えて検証結果が「合格」になってました。 2019年6月16日、再び他の記事に対して同じエラーが出た。 その記事を確認したが問題がありそうには思えなかったので、同じ処理をしたら同じ結果になった。 2019年9月21日、同上。 う~ん。。。 やっぱり記事の横とか下とかに掲載してる広告に Search Console が反応してるのかなぁ?(広告は記事の表示を更新するたびに変わりますしね).

次の

Google Search Consoleに「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」と言われた→解決しました!

クリック 可能 な 要素 同士 が 近 すぎ ます

1つめが、クリック可能な要素同士が近すぎます。 2つめが、コンテンツ幅が画面の幅を超えています。 という二つの問題です。 クリック可能な要素同士が近すぎる サーチコンソールヘルプで確認してみると、 ボタン、ナビゲーション、リンクなどのクリック可能な要素が近すぎて、タップが容易ではない時に表示されるエラーのようです。 クリック可能な要素は、7mm~10mm程度が望ましいと言われています。 私の場合は、どこかの箇所で、テキストリンクとボタンなど近い位置にあるためエラーが表示されているのかもしれません。 とりあえず疑わしい所を修正してみる。。 コンテンツの幅が画面の幅を超えている サーチコンソールヘルプで確認すると、 画像表示するために、横?に水平スクロールするページがある時に表示されるエラーメッセージのようです。 私の使用しているエマノンプロは、もともとスマホ対応化しているテーマを利用しているためこういったエラーメッセージは表示されないのですが、どこかのページでサイズ幅が大きいものがあるのかなって思っていますが、どこのページが具体的にわからないです。 スマホで一つ一つ調べるのも、大変です。 最近きたエラーメッセージのため、ここ数日近くに書いた記事を確認してみる コンテンツ幅が、画面の幅を超えているメッセージに関してはスマホで調べてもよくわかりませんでした。。。 でも、クリック可能な要素については、いくつか疑わしい箇所があったのでとりあえずは修正は完了です。 ここ最近はエラーがでていなかったので、疑わしい所はここ最近にかいた記事なのかなって思い、そこらへんあたりを修正しました。 とはいえ、とりあえず、修正しすぎに時間をかける事はできないので、修正したあとはサイトマップ送信して終了します。 まとめ インターネットで『サーチコンソールエラー』で、検索するとこういったエラーというのは結構でてくるようです。 しかも、モバイルフレンドリーテストでは、『モバイルフレンドリー』と問題なく表示されているため、どこが具体的なエラーページなのかちょっとよくわからないですよね。 という流れで修正。 という流れになるでしょうか。

次の

「モバイルユーザビリティ>クリック可能な要素同士が近すぎます」エラーを対処した時の方法

クリック 可能 な 要素 同士 が 近 すぎ ます

『モバイルユーザビリティの問題が新たに検出されました』 Google Search Consoleからこの通知が来た。 という方は出来るだけすぐに対処をする必要があります。 モバイル スマートフォン からGoogleやその他検索エンジンを利用する方が多いこの時代で、Webサイトのモバイル画面が利用しにくいとなれば、せっかくアクセスしてきたユーザーも離脱してしまうことは明らかです。 SEOの観点から言えば、 モバイルユーザビリティにエラーが出ているのはGoogleから嫌われる1つの原因にもなります。 Googleもモバイルファーストという考え方を実際に提唱しているくらいです! そこで今回はモバイルユーザビリティにエラーが出るとやばい理由とから、Google Search Consoleで表示されるモバイルユーザビリティのエラー内容と改善方法まで徹底解説します。 モバイルユーザビリティは常に完璧にしておくという意識でWebサイトを作っていきましょう! 1:モバイルユーザビリティにエラーが出るとやばい2つの理由 記事冒頭でもお伝えした通り、Googleはモバイルファーストという考え方を提唱しています。 つまり、モバイルユーザビリティにエラーが出るということはGoogleからの評価は良くないということです。 簡単にいえば、SEOの敵ですね! 関連記事: 1-1:Googleからの評価が良くない モバイルユーザビリティのエラーはGoogleから警告を受けていると捉えましょう。 すぐに改善をしてGoogleへ修正を報告しなければ、検索上位表示されているページも激落ちしてしまいます。 だから、モバイルユーザビリティのエラーはすぐに改善する必要があるのです。 1-2:アクセスユーザーの離脱率が下がる Googleから嫌われるのも大きいですが、何よりアクセスしたユーザーにも嫌われる原因となる可能性も大いにあります。 現在のGoogleを使うデバイスの7割、8割はスマホからのアクセスです。 そうなればモバイル画面の見易さやデザインは整える必要がありますよね。 Googleアナリティクスで離脱率を確認してみてください。 関連記事: 2:モバイルユーザビリティのエラーを確認 まずは運営しているWebサイトにモバイルユーザビリティのエラーが出ているか確かめましょう。 Google Search Consoleでモバイルユーザビリティを確認することができます。 Webサイトを運営して行く上で、Google Search Consoleは必須ツールです。 まだ、Webサイトに導入していないという方はすぐに導入してください。 できるだけGoogleからの指摘に、すぐ対応することが大事です。 僕から言わせればWebサイト運営者なら、モバイルユーザビリティだけでなくGoogle Search Consoleは毎日欠かさず見るべき項目になります。 なぜなら、Googleからの評価もそうですが、アクセスユーザーの反応を常に把握しておくことができるからです。 3:モバイルユーザビリティで表示される4つのエラーと改善方法 Googleが検知し、Google Search Consoleの『モバイルユーザビリティ』に表示されるエラーは次の4つです。 「 クリック可能な要素が近すぎます」• 「コンテンツの幅が画面の幅を超えています」• 「テキストが小さすぎて読めません」• 「ビューポートが設定されていません」 当然、エラーになるのでどれか1つでもモバイルユーザビリティにエラーが出ればすぐに改善する必要があります。 エラーの内容とそれぞれの対処方法をすぐに理解しましょう。 3-1:クリック可能な要素が近すぎます ページ内のリンク同士が近い場合に通知されるエラーです。 ボタンリンクやテキストリンクのようなリンク要素を、近すぎる位置に設置している場合、改善が必要になります。 モバイルの画面サイズは端末の種類にもよりますが、僕がWebサイトをデザインするときには 750px以下で収まるようにレシポンシブデザインをします。 750pxはあくまで目安ですが、この幅以下で作っていけばエラーが出たことはありません。 ぜひ参考にしてみてください。 3-3:テキストが小さすぎて読めません テキストサイズでエラーが出るのは10px以下のテキストがあるページです。 一度このエラーが出たことが僕もあるのですが、11px以上にテキストサイズを変更するだけで改善することができました。 11px以上にテキストサイズを変更してあげましょう。 3-4:ビューポートが設定されていません HTMLのタグ内に『viewport』を入れていない場合に通知されるエラーです。 もしくは、viewportが正確でない可能性も考えられます。 一度見直してみることをお勧めします。 しかし、改善ができたからOK…ということではありません!!!! 必ず改善後は、次の2つの行動をとってください。 修正を検証• Googleインデックスを再送信 4-1:修正を検証 モバイルユーザビリティの改善ができたらまず行うのが『修正を検証』です。 地道ですが頑張りましょう。 4-2:Googleインデックスを再送信 修正が完了したら次はGoogleのクローラに再認識させるためにGoogleインデックスを再送信します。 SEO対策をしていく上での敵と考えておきましょう。 検索上位を狙うのであれば モバイルユーザビリティは常に完璧にしておくこと。 これが重要です。 ただし、意識をしてWebサイトを作り込んでもたまにモバイルユーザビリティのエラーが発生することもあります。 こんな時は落ち着いてすぐに改善をし、Googleへ再インデックス登録をして対処しましょう。 モバイルユーザビリティがSEOで重要なポイントであることは間違い無いのです。

次の