クリック 可能 な 要素 同士 が 近 すぎ ます。 サチコエラー!モバイルユーザービリティ―の問題を解決!コンテンツ幅が画面の幅を超えている!クリック可能な要素同士が近すぎているとエラーがでる!

モバイルユーザビリティの問題点を修正する

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

Google Search Consoleのモバイルユーザービリティ問題とは!? モバイルユーザービリティとは、モバイル端末でサイトをアクセスした際、モバイル用に使いやすい表示にしましょうということを指します。 つまり、 モバイルユーザービリティ問題とは、スマホ(モバイル)でブログなどのWebサイトにアクセスした場合、何か問題が起きているよ!ということになります。 なので、モバイルユーザービリティ問題が起きてしまった場合、まずスマホ側の表示(Webサイト)を確認しましょう。 ・ Googleが提供しているツールで無料で使うことができます。 こちらのツールによって、モバイル対応に問題がないかどうか確認することができます。 『俺のブログ運営』のエラーが出た対象ページでは、そのような問題を見つけることができなかったので、結果的に「何もしない」を選択しました。 Search Consoleのヘルプでは以下の説明がされています。 このレポートには、フォントサイズが小さすぎて文字が読めず、モバイル ユーザーがピンチ操作をして拡大しなければならないページが示されます。 ウェブページのビューポートを指定した後にフォントサイズを設定して、ビューポート内で適切にスケーリングします。 フォントサイズに関するベストプラクティスについて詳しくは、読みやすいフォントサイズを使用する方法についての記事をご覧ください。 出典元: テキストのフォントサイズが小さすぎてないか、まずは確認してみましょう。 このレポートには、ボタンやナビゲーション リンクなどのタップ要素同士が近すぎるために、モバイル ユーザーが隣接する要素をタップせずに指を使って目的の要素をタップすることが容易にできないサイトの URL が示されます。 これらのエラーを修正するには、ボタンやナビゲーション リンクのサイズやスペースをモバイル ユーザーに適するように正しく設定します。 詳しくは、タップ ターゲットのサイズを適切に調整するをご覧ください。 出典元: 文章から察するに、 クリックできる要素(内部リンク、外部リンク、広告リンクなど)同士が近すぎていないかということでしょう。 WordPressのエラーやサーチコンソールのエラーなどを対応してくれる人が結構いるんです。 ただ、この方法はお金がかかってしまうので、最後の手段です。 ちなみに、僕は有料でWordPressのエラー修正の依頼をしたことがあります。 の登録は無料ですし、何かと使う機会もありますので登録しておくと良いです。 さいごに 以上3点を確認した上で、特に問題が見つけらないようでしたら、まずは修正依頼を出してみるところから始めてみた方が良いかと思います。 どうしてもブログ運営をしているとこのようなエラーはどうしても発生してしまいます。 当ブログでは、遭遇したエラーについては、ブログでアウトプットしているので、もし良かったら参考にしてみてください。 最後まで読んでいただき、ありがとうございました。

次の

モバイル ユーザビリティで「クリック可能な要素同士が近すぎます」「コンテンツの幅が画面の幅を超えています」と言われて困っている話

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

当記事は、 2019年10月25日時点での個人的な経験をもとに作成し、以降若干の情報更新を加えたものです。 はじめまして! 人生初のブログ運営に奮闘中の初心者ブロガー、Pollyと申します。 私の現在のブログ歴は 約3ヶ月半、記事数は 43記事。 未だ収益はほとんどありませんが、明るい未来を信じてマイペースに取り組んでいるところです。 そんな中でも最近、新しい記事を書くことと同じくらい重点を置いているのが「過去記事の見直し作業」。 記事をちょこちょこ改良してみたり、更新後にサーチ・コンソールにインデックス登録をリクエストしたり。 そう、 サーチ・コンソール。 ここで本記事の主役の登場です。 「 公開URLをテスト」や「 モバイルフレンドリーテスト」、自分では思い当たる節がなくても、けっこう引っかかったりしませんか?! そこで本記事では、私がついさっき2回続けて直面した「 クリック可能な要素同士が近すぎます」を中心に、 もしかしたらGoogleに「モバイルフレンドリーではない」と言われている原因かもしれない幾つかの具体例をシェアしたいと思います。 コンテンツの幅が画面の幅を超えています• テキストが小さすぎて読めません• クリック可能な要素同士が近すぎます 初めてのときは頭から血の気が引くような思いがしましたが、けっこう誰にでもあることなんだと思われます。 私も何度か経験し、今では「 あ、 またかー、 どれどれ…」という感じです(笑) それではここから、私が 原因をより具体的に感じられた項目順に、体験談をご紹介していきたいと思います! クリック可能な要素同士が近すぎます これは、「そのリンクを指で押そうとしたら、近くにあるやつまで押しちゃうんじゃない? 大丈夫?」ということですよね。 言い換えれば、 指先で一度にかかってしまうような狭い範囲内に、 クリックできる箇所を2つ以上は並べないでね、ということ。 …言われている意味は分かるんだけど、具体的にどの部分か分からない! 引っかかったページをよ~く眺めまわしてみて、ようやく気付いたのがこちら、 「 記事内広告や記事下広告がくる直前の文章に、リンクを貼った単語が含まれていた」。 私が使っている広告はアドセンスです。 特に記事下広告は固定で入れているので編集画面では気付きづらく、すっかり見落としていましたが、「もしや…」と思ってリンクを外してみたらすぐに合格になりました。 広告直前のリンクが原因で引っかかったのは今までで2回(2ヵ所)あったのですが、そのうちの一つは囲み枠の中の、たった4文字の単語だったのにも関わらず、ばっちり引っかかっていました。 Googleチェックの精度、すごいもんですね。 ありがたいことです。 テキストが小さすぎて読めません この項目は比較的原因箇所に気付きやすいのではないかと思います。 私はWordpressを使っているのですが、記事の作成画面に慣れてくると、文字サイズを変えられることにもようやく気付いたりして、嬉しくていろいろいじってしまうんですよね…。 そりゃあ、キャプションがダメと言われたら、「じゃあ入れられるようにしないでよ!」と怒っちゃいますよね。 コンテンツの幅が画面の幅を超えています これが3つの中では一番よく分からない項目なのですが、とりあえず私がやってみたのは以下のようなことです。 スマホで見ると端が切れてしまっている囲み枠がないかどうかチェックする• 私は一度、「aタグ」とやらで、かなり長めのリンクテキストをHTMLの囲み枠内に記載したことがあり、おそらくそれが理由で引っかかったことがありました。 (リンクテキスト、というようなやつです。 ) そのリンクテキストが、スマホで見ると折り返しになっておらず、半分以上がちょん切れてしまっていたのです。 初心者につきその仕組みはよく分かりませんが、そんなこともありますので、 囲み枠関連に心当たりがないかどうか一応チェックしてみるといいかもしれません。 これがなにしろ、スライドしなければ全部を見られないものですから、「はみ出てるよ!」「だめじゃん、一度に全部見えなきゃ!」とGoogleさんとしては思う、のかもしれません。 ということで、スマホ用グローバルナビをオフにしてみたら通ったのですが、それが 本当に「 コンテンツ幅」 に引っかかっていたのかは不明です。 もしかすると「クリック可能な要素同士が近すぎます」の方に引っかかっていたのか、はたまた同時に直した別の何かが功を奏しただけだったのか。 そもそも、 Googleに嫌われるようなオプションをテーマ作成者が作るとも考えづらいので、実際はこれは関係ないのかもしれません。 どれか一つ直せば全てが解決したりもする 「このページはモバイルフレンドリーではありません」と言われた場合、問題として表示される項目は2個だったり3個だったり、状況によって数もいろいろだと思います。 そして、これら全ての項目に対処せずとも、 1つ2つを改善するだけで合格することもあるようで、このあたりの基準は謎です。 特に「コンテンツの幅が画面の幅を超えています」に関しては、直接それについて何かしなくても、他の項目に対応できていれば、再チャレンジしたときにどさくさに紛れて(?)一緒にOKになったりもするようです。 とにかく 思い当たることを全部やってみたなら 、 とりあえずは再度挑戦してみるといいのではないかと思います! 今までに、どうしても問題となっている箇所が見当たらず、何もせずに再度テストしてみたらあっさり「 登録できます」になったこともありましたよ(笑) 公開URLテストやインデックス登録リクエストでエラーが発生する原因は? 以降はおまけとして、個人的にいつも苦労している「インデックス登録でのエラー」について書いてみたいと思います。 「このページはモバイルフレンドリーではありません」ときっぱり言われてしまう場合は、なんとなくでも理由を教えてくれるのでまだいいのですが、 「インデックス登録をリクエスト」や「公開URLをテスト」をした結果、「 問題が発生しました」や「 エラーが発生しました」となって先に進めないときもあると思います。 画面に出るメッセージはこれら。 サチコさんの御機嫌?• Googleが、そのページの重要性をすぐに判断できない?• 写真数が100枚、14,000文字を超えるような重たいページだった• モバイルフレンドリーではない箇所があった サーチ・コンソールの御機嫌ばかりはどうしようもなく、何度かやってみたり、数時間空けてやってみたりするしかないですよね…。 2点目も同じく、待つしかないです。 この時点で「タイトルのキーワードが弱かったかな?」などといじっても、おそらくほとんど意味はないのではないかと個人的には思います。 3点目については、確実にエラーの理由になっていたと思います。 私のブログは自然観光地の紹介をメインとしており、結構な枚数の写真とともにレポート記事を書いたりもするのですが、 長くて画像の多い記事はリクエストしたときにエラーとなる可能性がかなり高いです。 全部読み込む前にタイムアウトになり、結果判定できずにエラーになっているような感じ。 そんなときは、写真を圧縮・リサイズし直したり、記事を2つに分けたり、写真を減らせないかどうか再チェックしたりして、 できる限り記事がコンパクトになるように再調整してみています。 というか、それしか手がないかもしれません(汗) いろいろ手を尽くしてみても状況が変わらなければ、こちら側からはどうしようもないGoogle側の事情だと割り切るしかない! すっきりしないお気持ちは痛いほど分かりますが、ここ最近の経験からは、 腹を括ってしばらく放置してみると時間が解決してくれることも多いようです…。 10追記 その後もまたURL検査とお付き合いしていて、何となく分かったことがあるのでシェアします。 記事を更新したことを知らせるために「インデックス登録をリクエスト」してエラーになる場合の理由については依然としてよく分からないのですが、 新記事のインデックス登録がエラーになる場合、 「 カバレッジ」 内のステータスも見てみると状況把握に役立つことが分かりました。 私の最近の経験からは、新記事が検索結果に反映されるまでは以下のような段階を踏んでいるようです。 「URL が Google に認識されていません」で、カバレッジのステータスも「URL が Google に認識されていません」• 「URL が Google に認識されていません」で、カバレッジのスタータスが「検出 — インデックス未登録」• 「URL が Google に認識されていません」で、カバレッジのステータスが「クロール済み — インデックス未登録」• 「URL は Google に登録されています」で、カバレッジのステータスが「送信して登録されました」で、クロールのユーザーエージェントが「パソコン用 Googlebot」• 「URL は Google に登録されています」で、カバレッジのステータスが「送信して登録されました」で、クロールのユーザーエージェントが「スマートフォン用 Googlebot」 まどろっこしい感じになってしまいましたが、 スマートフォン用Googlebotにクロールされてようやくゴールとなるようなんです。 そして、それまでの間にいくらリクエストをしてもエラーにしかならないケースがほとんどのよう。 そんなこんなで、 サイトマップが送信されていれば後はもう何もせずに、 ただ待つしかない!というのが私の最近の結論です。 参考までに…。 おわりに 以上、一初心者ブロガーの経験談ではありましたが、 サーチコンソールからダメ出しがでたときの対処法について、把握している範囲で書き綴ってみました。 この記事が、どなたかの解決に少しでも繋がることを願っています! 最後までお付き合いいただき、どうもありがとうございました。 Polly.

次の

サチコエラー!モバイルユーザービリティ―の問題を解決!コンテンツ幅が画面の幅を超えている!クリック可能な要素同士が近すぎているとエラーがでる!

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

更新がしばらく滞っていたのですが,ちょっとブログに問題が起こっていたのです。 それがなんとか解決したというお話です。 ある日エラーのアラートが 昨年末,Google Search Consoleを眺めていると,モバイルユーザビリティのところにエラーが出ていることに気がつきました。 エラーは2つ,• 「テキストが小さすぎて読めません」• 「クリック可能な要素同士が近すぎます」 この時点では,これらの問題が3つのページにあるという指摘でした。 むむむ?気になって,自分のスマホ(iPhone)で該当ページをチェックしてみました。 けれども特に小さすぎる文字はないようです。 もともとこのブログは,スマホでも楽に読めるように,文字を18pxに設定していますし,小さな文字を打ち込んだ覚えもありません。 「クリック可能な要素同士が近すぎる」という点はよくわからないのですが,自分のスマホの画面を操作した限りではそんなこともありません。 …おっかしいなあ。 ググってみると,Googleのレンダリングがたまたまおかしくてこういうエラーが出ることがあり,放っておけば直ることも多いという記載をいくつか見つけました。 それでその時はあまり気にせず放置していました。 エラーアラートが増えてきた ところが1月中旬くらいから「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」のエラーがあるというページが増えてきたのです。 エラーを指摘されているページは,以前は何も問題なかったし,その後も何かいじったわけではないので不思議だったのですが…。 「モバイルユーザビリティ」のエラーが増えてきました さらにこの頃から,ブログのアクセス数が減ってきたのです。 もともと少ないPV数ですが,冬に入ってから徐々に増えはじめて喜んでいたのです。 それが急に減ってきたんですよね…。 「たまたまアクセスが少ない日が続いたのかな?」最初はそう思い込もうとしたのですが,検索数も明らかに落ちてきているし,これはやっぱり何か原因がありそう。 検索数も減ってきている感じがします… うーん,やっぱりモバイルユーザビリティエラーの影響かなあ。 もしそうなら,何とかした方が良さそうです。 モバイルフレンドリーテストをしてみると… そこでいくつかのページを,Googleのにかけてみました。 すると…。 さらに自分の記事を片っ端からテストにかけてみたのですが,どの記事もどの記事も「モバイルフレンドリーではありません」との判定です。 Search Consoleからエラーが指摘されていないページもです。 唯一合格したのはトップページのみで,記事を書いたページは全部? 不合格の模様。 こりゃ,ダメなページの数は,報告されているエラーの数(この時点で8)どころではないようです!…これではアクセスも減るはずだわ。 原因を探ってみます 画面が縮小して表示されている? モバイルテストで不合格なページでも,自分のスマホで見るとちゃんと表示されて文字も問題なく読めるのです。 気になるのは,モバイルフレンドリーテストの結果では,記事が縮小されて画面の左半分にしか表示されていないこと。 Googleの認識では,画面が縮小されている!? もしこんな風に表示される端末があったら,文字が小さすぎて読めないというのはその通りでしょうし,クリックできる要素が近すぎるというのもよくわかります。 一方,問題なしと判定されたトップページは,ちゃんと画面全体に表示されるという結果になっています。 どうやらこのあたりに原因がありそうです。 ピンチインできる!? ところでモバイルテストの結果のように,記事が縮小されて画面の左半分にしか表示されないというのは,スマホの画面をピンチインして画面を縮小した時に起こりそうです。 でもそんなことはできないはず。 そう思ってやってみると…あれ?僕のブログの記事ページはピンチインで画面が縮小される!そしてモバイルテストに合格したトップページはピンチインできない!さらに,試しに僕と同じテーマ( )を使っている他の人のブログをスマホに表示してみましたが,やはりピンチインできないのが正常なようです。 なぜかピンチインで縮小できる…これでは確かにテキストが読めない! むむむ…。 どうやらこの 「ピンチインした状態」がGoogle先生に認識されて,「文字が小さすぎる」と判定されている模様です。 それを踏まえて検索をかけてみたのですが,同様の症状が出たという例は見つかりませんでした。 CSSをチェックしてみる ブログの記事ページ全部がモバイルエラーの状態にあるということは,CSSの設定がおかしくて,それが記事全部に影響を与えている可能性があります。 ブログのカスタマイズを繰り返しているうちに,おかしなCSSを書いてしまったのでしょうか。 そこではてなブログの「デザイン」から「カスタマイズ」(工具マーク)に入り,「デザインCSS」をチェックしてみました。 けれども特におかしな点は見つかりませんでした。 うーん…。 そこで画面の表示領域を表す「viewport」をmetaタグで設定し,最低倍率を1. 0(つまり縮小しない)に設定してやることにします。 ということで,はてなブログの「設定」から「詳細設定」に入り,「headに要素を追加」のところに以下のコードを貼りました。 0」が「縮小表示をしない」という意味の設定になります。 これでなんとか行けるはず。 「変更する」ボタンをクリックして設定を保存したあと,記事ページをスマホで開いてみました。 いつの間にかブログがピンチインで縮小できるようになっていて,それがGoogleに認識されて不合格となる…というのはレアケースかもしれませんが(実際,検索してもそのようなケースは見つかりませんでした),一つの事例として記録しておくことにします。 もし同様の問題が発生している人がいたら,参考にしてもらえれば,と思います。 指摘された「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」の2つのエラーは,以前は出ていなかったのに最近になって出はじめたのは少し不思議です。 ともあれ,ひとまず問題は解決したので,次にGoogleのクローラが来た時に「問題なし」と判定してくれることをお祈りしています。 そしてまた検索/アクセス数が増え始めるといいなと思っています。 2月8日追記 モバイルユーザビリティエラーが指摘された記事を,改めてGoogleにインデックス申請した結果,エラーが0になりました!めでたしめでたし。 モバイルエラーが「0」になりました! 関連記事.

次の