attention admin about comments trackbacks you may also like

新しいサチコ(Google Search Console)でモバイルユーザビリティの問題をゼロにしました!

2018年09月02日
Topics
20
サチコ Google Search Console MFI モバイルユーザビリティ

サチコって、筆者の新しい愛人(笑)じゃなくて Google Search Console の略した言い方なんです。
そう呼んでいる人ってけっこう多いみたいですね、筆者もですけど ^^

そう、 Google Search Console サチコ ですね~ ってルビ振って遊ぶと分かり易い?(爆)

新しいサチコは今までのサチコ画面の、、、

[ 新しい Search Console を試す ]のリンクから開くことが出来ます。

過日、Web知識の師であるAkira先生の下記ブログカード(マウスONするとちょっとイヤイヤします(笑)が何処でもクリック出来ます)の記事を読んでいたんです。


Search Consoleでモバイルフレンドリーなのにユーザビリティエラーを指摘された件

これたぶん他の方にも発生してると思うんですよね (´・ω・`) ブログテンプレートが レスポンシブデザイン で表示上何も問題が無いにもかかわらず何故か突然 モバイルユーザビリティエラーを指摘される という現象が...

同記事から 「えっ? そんなエラーって表示されたっけ?」 って感じで、筆者も久しぶりに新しいサチコを開いてみたんでした。
そしたら、なんとAkira先生のエラーと同じように、、、

たくさんのモバイルユーザビリティ問題がドバドバって感じで表示されて「 げっ( ̄□ ̄;)!! なんだこりゃ? 」っと唖然としてしまったんです、以前サチコを覗いた時にはエラーなんてゼロだったんですから (^^;; アセアセ
エラーの始まりの 2018/07/26(木曜日) 時点ではなんと19件もあったのが、筆者がこのエラーの山を今回初めて見た 2018/08/26 には7件にまで自然減少している様子も!

  • クリック可能な要素同士が近すぎます
  • コンテンツの幅が画面の幅を超えています

  • ※ この2つのエラーは、MFIに於いて、パソコン用固定幅テンプレートでパソコン用画面そのままをスマホ画面に表示される(スマホ版テンプレートでは表示しない)設定になっていると起きるエラー表現で、レスポンシブテンプレートではこれは発生しにくいものです !

エラー項目は上記二つだけなんですが、弊ブログで利用しているテンプレートはAkira先生の優秀なレスポンシブテンプレートでして、それから考えたらこのようなエラー表示の方が変!って思うのが普通なんです(爆) それでもエラーが起きているとしたら、記事中で使ったHTMLタグの打ち間違い(例えば閉じタグ忘れとか)が存在いていたか、そのテンプレート構造が壊れていると言うことになりますから、念のため HTML終了タグチェッカー弊ブログ内で再配布しております )で改めてチェックしてみたんですけど、異常なしの結果に(笑)

ネットでの同様情報記事を書いておられる皆さんやAkira先生はこの問題について「何もしないでそのまま放置」の方が多かったんですが、筆者は「何かやってみよう(笑)」と興味本位で、実は 2018/08/26 のグラフにはまだ2件のエラーが存在している様子の時点で、サチコ画面の「URL検査」から、トップページURLを記入して「検査」をやってから、即「モバイルユーザビリティ」を覗いてみたんです(爆) そうしたところ、、、

このように、一挙に問題が解消されたようなこんな表示がされた(つまりは元からエラーは存在していなかったと言う意味になります)んでしたが、筆者がサチコに表示されていた今回のエラーについて何かのアクションを実行したのはこれが初めてだったんです。

そして、丸1日過ぎたところで、再度サチコを開いて「URL 検査」を実施したところ、下図のような結果が、、、(笑)

案の定、弊ブログ Webテク倉庫 は「このページはモバイルフレンドリーです」が表示されて、エラーの存在は消えておりました (^。^;)ホッ
でも、更に念のためとして(執拗ですね~(爆))、前回エラーがあると指摘された記事ページのURLも個々にチェックしてみましたが、やっぱり何も問題は存在しておりませんでしたからとりあえずは良かったのですが、ではこのエラー表示の山はなんだったの?と言うことになりますよね。

エラーのグラフを見る限りでは、事の発端は 2018/07/26(木曜日) からになっておりますが、このサチコの時間表示は、Google本社が所在するカリフォルニア州のシリコンバレー地域の標準時である太平洋夏時間(PDT)で表示されているものですから、日本時間とは16時間のズレがあります。

と言うことで、弊ブログのエラーグラフ?(笑)を前述のAkira先生記事の同グラフと照らし合わせると、同じ日にそれが発生しているように見えます! Akira先生のものには日付が特記されてはおりませんが、そう見えます。

そして、他のネット情報を収集すると、同じ日付頃を基点としてサチコ画面にそのような変異があることが手に取るように解って来ました。

そして、エラー項目も筆者のものとみな同じで、、、

  • クリック可能な要素同士が近すぎます
  • コンテンツの幅が画面の幅を超えています

こうなんですから、これはもう各ブログ個別の問題ではなくて、サチコ自体の異常であることがハッキリと解ります。

そこで思い出すのは、弊ブログで今年の4月に下記ブログカードの記事を書いておりました。


MFIはもう始まっている確証が見えて「2018/04/17は弊ブログのMFI記念日」になったようです

モバイルファーストインデックス = MFI(Mobile First Index) はもう既に始まっている確証が見え始めて来たようですが、皆さんのブログでは如何でしょうか? 「GoogleのMFIは2018年4月より始まる 」...


いま思えば、上記記事を書いていた時には『 本格的にMFIが始まったらスマホ用Googleクローラーの巡回が増えるだけじゃなくて、検索順位を決定するための検索アルゴリズム(200以上あるとされている)にもやがてMFIに合わせた修正変更が何度かあるんだろうねぇ(笑) 一般ユーザーの目に見える形にはならないだろうけど(笑) 』と予見はしていたことがあったんです ← これ、けっして後からのこじつけじゃないんですからね、ほんとです (^^ゞポリポリ

もしかして、この時に推察していた「MFIによるアルゴリズムの修正変更」が行われた結果、エラーグラフ(笑)として一般ユーザーの目に漏出してしまったのが今回のこの騒動なんじゃないでしょうか?

そう、バグではなくて、つまりはシステム切り替え時のGoogleのちょんぼ!なんでは?と推察出来ます(爆)

[ 画像クリックで GO & STOP ]


[ 画像クリックで GO & STOP ]

筆者は何もしていないのに、日を追って自然とエラー件数が減少していく様子をGIFアニメーションに録画してみましたが、最後の「エラー 0」のポップアップだけ後付け合成してあります(画面右に外れて見えなくなってしまいましたので)


サチコのエラーが解消してホッとした筆者

[ エラー表示がなくなってホッとしたぞぉ♪ ]

弊記事は筆者の私見ですが、なにかの参考になれば幸いです ^^

追記: 見つけた! Googleの言い訳(笑) 2018/09/03 09:25

このエラーグラフ(笑)について、Googleがサチコの インデックスステータス/インデックスページ に於いて理由を述べておりましたので、スクショにて明示しておきます(笑)

上図赤枠部分の表現は正当な表現なの?と筆者は笑いがこみ上げて来てしまいました(爆)
まぁ、アルゴリズム修正変更は当然あることですが「もっと短期間にユーザーの目に漏出せずにもっと上手に実施出来なかったの?」って思ってしまいましたよ~ (≧ω≦。)プププ


あなたのブログはモバイルフレンドリーですか?
Google モバイルフレンドリーテスト

あなたのブログ内分析はGTmetrixが強力です!
GTmetrix


検索からの方はトップページへもどうぞ

関連する記事
ぼっちん
Author: ぼっちん
坊ちゃんじゃありません、ぼっちんです(笑)
PC弄くりは35年ほどのキャリア(ただ長いだけかも)の年金生活ブロガーです。
そんな私が、初心者さんにも楽しめるWebテクを専門用語を極力省いて、体験的見地からその時のスクリーンショットやGIFアニメーションを用いて分かり易く解説致します。
対話好きですから記事に関わらないコメントでも遠慮なくしてくださいね~♪

コメント(20)

There are no comments yet.

ジュレ  

2018/09/04 (Tue) 12:31

今日はジュレでコメントさせて頂きます。
この度、ブログ常時SSL化に伴い
リニューアルいたしました事を
ご報告させて頂きます。

このコメントは
旧ブログの相互リンク及び
にゃ~にゃ~の日にリンクされたブログに
コピー&ペーストにて
お知らせしていることを
お許し下さいませ。

今後とも
きららとジュレのブログを
どうぞよろしくお願い致します。

-  

2018/09/04 (Tue) 12:37

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ぼっちん  

2018/09/04 (Tue) 16:14
ぼっちん

To ジュレさん

ジュレさん、こんにちは ^^

WordPress化とそのSSL化、拝見致しましたよ~ 素晴らしいです (^-^)//""パチパチパチ
私はいつまで経ってもWordPressって苦手で、本格的にやる気になれなくてダメですね~ (^_^; アハハ…
だから、すっかりFC2ブログに浸り込んでます(笑)

わざわざのお知らせをありがとうございました m(_ _)m

ぼっちん  

2018/09/04 (Tue) 16:32
ぼっちん

To 鍵コメさん

台風21号! 私のところよりも鍵コメさんのところの方が近い様子ですから、きっと風雨が強いんでしょうね (^^;; アセアセ
私のところは、なんとかいまギリギリで真っ赤な豪雨帯から外れてまして、風雨とも想定よりはずっと弱くてとりあえず「やれやれ」って感じですけど、このまま過ぎて欲しいもんです (^^ゞポリポリ

IE! 私はもう完全に見切りを付けてます(笑)から、影響なんて無関心ですよ~ (≧ω≦。)プププ

そうそう、私も前の前のテンプレート「Axis」の時にA(100%)出してしまった(笑)時からもうGTmetrixスコアには無関心になってしまって、いまはChromeのデベロッパーツールのスマホ閲覧での3G回線での表示速度分析に凝ってます(笑)
こちらの方が体感的なものに近いように感じますけどね~ ^^

-  

2018/09/05 (Wed) 17:43

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ぼっちん  

2018/09/05 (Wed) 20:14
ぼっちん

To 鍵コメさん

鍵コメさん、こんばんは ^^

あら探ししてませんからご安心くださいね~(笑)
鍵コメさんが上手にタイトルロゴ画像を表示なさってたものですから「マネさせて戴こう」って感じでソースを覗き始めたら「おやぁ?」って偶然見つけちゃったんですよ (^_^; アハハ…
で、慌ててコメントさせて戴いたら、肝心の初期の目的を忘れてしまって(爆)
また後でソース覗かせてくださいね~ (≧ω≦。)プププ

-  

2018/09/05 (Wed) 20:59

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ぼっちん  

2018/09/05 (Wed) 22:13
ぼっちん

To 鍵コメさん

鍵コメさん、またまたこんばんは ^^

「フリーフォントで簡単ロゴ作成」← これ、初めて知りました、ありがとうございます ^^
いや、マジで私もタイトルをロゴで作りたくなっちゃいましたよ(笑)
時間をみてチャレンジしてみようっと(笑)

私がHTMLソースを覗くのを趣味にしている(笑)のは「その方のテクニックをマネする」為なんですけどね~ 本心は(笑)

-  

2018/09/06 (Thu) 11:31

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ぼっちん  

2018/09/06 (Thu) 11:42
ぼっちん

To 鍵コメさん

鍵コメさん、こんにちは ^^

タイトルロゴ画像作りで遊んじゃいましたよ~(笑)
こんなカラフルなのにしてしまったから、グローバルナビゲーション内に転用出来ないから、改めて適当なので作らなくちゃ (^_^; アハハ…
そして、小さい画像(160px)だと漢字が潰れてしまって、なかなか大変です (^^ゞポリポリ

お誉め戴いてありがとうございます _(^^;)ゞテレマスゾ~

------
追記です(笑)
グローバルナビゲーション内も画像化完了です、テキストっぽく仕上げました~ (^。^;)ホッ

-  

2018/09/06 (Thu) 19:15

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ぼっちん  

2018/09/06 (Thu) 19:30
ぼっちん

To 鍵コメさん

鍵コメさん、こんばんは ^^

フッターはそのままで変更しません(笑)
閲覧者さんはそこは殆ど見ない(意識しない)部分ですし~(笑)
ブログタイトルのロゴ化は、もうこれで終了です ^^

アポロム  

2018/09/17 (Mon) 00:47

タグクラウドについて

ぼっちんさん こんばんは

いつも質問ばかりですみません。
今回はタグクラウドについてなんです。

ぼっちんさんのブログにもAKIRA先生のブログ(タグクラウドについて調べていたら偶然見つけました。)
にもタグクライドがあり、ネットで調べるとSEO効果があるみたいなことが書いてあったので取り付けてみることにしました。

そもそも、記事にタグをつけていなかったので、そこからのスタートでしたが、いちから記事を見直さないと
いけないので相当重労働だなとちょっと及び腰になっています。

タグクラウドについては
https://selifelog.com/blog-entry-316.html
の方のブログを参照に入れることが出来ましたが、改行されません。

HTML も CSS も全くわからない私にはこれが限界でした。
他の方のブログの内容ですので大変恐縮ですが、編集の仕方をお教えいただけると幸いです。

ぼっちん  

2018/09/17 (Mon) 07:47
ぼっちん

To アポロムさん

アポロムさん、おはようございます ^^

そもそも、記事にタグをつけていなかったので、そこからのスタートでしたが、いちから記事を見直さないと
いけないので相当重労働だなとちょっと及び腰になっています。

えっ? 過去記事に遡ってタグ設定をされるってことなんですか? そりゃ大変ですねぇ (^_^; アハハ…
私だったらたぶん2~3記事くらいは遡って設定作業するかもしれませんけど「新記事からで良いや(笑)」ってなっちゃうと思います (^^ゞポリポリ

ブログを参照に入れることが出来ましたが、改行されません。
あららら、なんとまぁ、右のサイドバーの枠を突き抜けてしまってますねぇ (^^;; アセアセ
タグクラウドのHTML+CSSを拝見したところでは、

<style>
ul.tagcloud{
margin: 0;
padding: 0.5em 10px;
line-height: 1;
font-family: "メイリオ", Meiryo, sans-serif, Verdana;
font-size: 13px;
line-height: 1.4;
white-space: nowrap; ← この一行を文字列前の空白を含めて全削除
}

のように処理したら、キチンと枠内に収まるかと思います。
お試し下さい ^^

アポロム  

2018/09/17 (Mon) 10:25

ぼっちんさん
ありがとうございました。
治りました。

タグ付けすると単語が他とリンクして(FC2の検索サイト?)
単語の色も変わってしまうんですが、
そういうものですか?

ぼっちん  

2018/09/17 (Mon) 10:44
ぼっちん

To アポロムさん

アポロムさん
はい、タグクラウド、キチンと表示されるようになりましたね~ 良かったですね~(^。^;)ホッ
ただ、正直言ってこのタグクラウドのHTML+CSSはレスポンシブテンプレートでの利用には不向きな構造です!
恐らく、今とは別のレスポンシブテンプレートを利用すると、ブログ構造が壊れる場合があるかもしれません (^^;; アセアセ
私の本意としたら、キチンと「共有プラグイン」にあるタグクラウドを利用されるようにお勧めします (^^ゞポリポリ
先のお返事後に、私が借り設置してみてそれに気がつきました (^^ゞポリポリ

タグ付けすると単語が他とリンクして(FC2の検索サイト?)
単語の色も変わってしまうんですが、
そういうものですか?


それは、タグ設定した記事内のタグの文字列をリンクに「変換する」方法と「変換しない」方法の設定があるんです。

ブログ管理ページの左メニュー「設定」→「環境設定」→「ブログの設定」→「記事の設定」→「投稿設定」→「ユーザタグ変換」の項で 記事本文のタグテキストをリンクに[ 変換しない ]に設定すれば、リンクは外れます ^^

アポロム  

2018/09/18 (Tue) 14:49

教えてください。

ぼっちんさん いつも、的確かつ簡易な説明をしてくださり本当にありがとうございます。

お陰様でタグのリンクは外すことが出来ました。疑問ですが、タグをリンクにしておくメリットってありますか?

あと、タグクラウドですが、共有プラグインで調べたのですが、2013年を最後に新しいものは出てこなかったのですが、
[TopNTagCloud]で平気でしょうか?まだ変更はしていません。

あと、カテゴリーの記事を読み込むと2枚目にいけません。
記事(カテゴリ別)を10枚にしているので、例えばアポロムの横顔は12記事有り
1/2表示されますが、1ページから2ページに移動するボタンが見当たりません。
これは出来ないということでしょうか?

最後に、労働基準法にプラスα(カテゴリ)のように1問1答の記事を始めました。
今は、追記の機能を使って回答を表示させていますが、他のページと行ったり来たりになって
回答を見るのが少し面倒な感じです。なにかいい方法がありましたらお教えいただければ幸いです。

いつも記事に関係ない質問ばかりで済みません。

ぼっちん  

2018/09/18 (Tue) 15:47
ぼっちん

To アポロムさん

アポロムさん、こんにちは ^^

お陰様でタグのリンクは外すことが出来ました。疑問ですが、タグをリンクにしておくメリットってありますか?
それは私には解りません、メリットに繋がっているか否かを調べる方法がありませんから (^^ゞポリポリ
かなり高機能なアクセス解析を要して、かなり時間を掛けて調べれば「メリットがあるのかどうか」の判断にはそれなりに辿り着けるのかもしれませんが、そもそも記事設定のタグにSEO効果はないと言う人が多いんです(笑)私も「おまけ」程度にしか思っておりません(笑)

あと、タグクラウドですが、共有プラグインで調べたのですが、2013年を最後に新しいものは出てこなかったのですが、
[TopNTagCloud]で平気でしょうか?まだ変更はしていません。

共有プラグイン欄の検索でプラグイン名の部分ではなくて、その右側の「プラグイン説明」欄にタグクラウドと入力すると、もっと複数出てきますよ。

あと、カテゴリーの記事を読み込むと2枚目にいけません。
記事(カテゴリ別)を10枚にしているので、例えばアポロムの横顔は12記事有り
1/2表示されますが、1ページから2ページに移動するボタンが見当たりません。
これは出来ないということでしょうか?

この原因はブログテンプレートが壊れているからだと思います(ページ遷移ボタンが表示されない状態になってしまっている)。
恐らくは私が指摘しました、いま設定してある「タグクラウド」によるレスポンシブテンプレートには向かない構造から起因しているものと思われますが、、、(~ヘ~;)ウ~ン それともアポロムさんのカスタマイズ部分に原因が?
ブログフッター(ブログ下部)もまったく表示されておりませんし (^^;; アセアセ

最後に、労働基準法にプラスα(カテゴリ)のように1問1答の記事を始めました。
今は、追記の機能を使って回答を表示させていますが、他のページと行ったり来たりになって
回答を見るのが少し面倒な感じです。なにかいい方法がありましたらお教えいただければ幸いです。

トップページを拝見する限りでは「労働基準法にプラスα」の記事が見つかりませんので検証が出来ません (^^ゞポリポリ

アポロム  

2018/09/18 (Tue) 17:09

こんにちは

本当にいつも助けて頂き、ありがとうございます。

ぼっちんさんのおっしゃる通り、タグクラウドの設置でテンプレートが壊れていたみたいです。取り外してみたら治りました。

私が独りで考えていたら一生かかっても壊れていることさえ分からなかったと思うと身震いがするとともに、ぼっちんさんの的確なご指導に感謝です。

>「労働基準法にプラスα」の記事が見つかりませんので検証が出来ません
につきましては、すみません。

カテゴリー ☆社労士受験 基本にプラスα のなかの 子カテゴリーなんですが、

見せ方の根本がなっていないみたいで、もう少し修行してから改めてご相談させて頂きます。

今後とも宜しくお願いします。

ぼっちん  

2018/09/18 (Tue) 20:21
ぼっちん

To アポロムさん

アポロムさん、こんばんは ^^

ぼっちんさんのおっしゃる通り、タグクラウドの設置でテンプレートが壊れていたみたいです。取り外してみたら治りました。
やっぱりそうでしたか、もっと複雑な壊れ方でなくて良かったですね~ ^^

カテゴリー ☆社労士受験 基本にプラスα のなかの 子カテゴリーなんですが、
見せ方の根本がなっていないみたいで、もう少し修行してから改めてご相談させて頂きます。

閲覧者さんにとって、複雑な動きを要するような凝った見せ方をしてしまっては、かえって虻蜂取らずなことになってしまってもマズイですから、基本は単純明快な構造の方が良いと思うんですけどね ^^
その研究、楽しみながら頑張って下さいね~♪