モバイルフレンドリーまでの道のり(その3)

このシリーズ、「モバイルフレンドリーまでの道のり」、「モバイルフレンドリーまでの道のり(その2)」 と書いてきて、いよいよ今回「その3」で最終回です。

モバイルフレンドリーまでの道のり
数ヶ月前に、GoogleのSearch Consoleが「新しいSearch Console」を使用するようメッセージが出るようになってから...
モバイルフレンドリーまでの道のり(その2)
すみません、本当は、リトのほうの記事をアップしようと思ってたんですが、今晩、イチロー引退の緊急会見が入ってしまったので、下書きしてあるほうを...

このサイトをスマホで見ている人がいたら、もう気がついているかもしれませんね。

スポンサーリンク

アイキャッチ画像とは

「アイキャッチ画像」とは、言葉通り、人目を引くための画像です。

ブログの場合、何について書いてあるかを文字のみでなく、画像を使って、こんなことが書かれているのかな、とイメージングするための画像です。

どうやら、モバイルユーザビリティのエラーの原因は、アイキャッチ画像のモバイルでの表示にあるのかも、とわかったので、こんどは、アイキャッチ画像について、調べまくりました。

でも、検索の仕方、キーワードの引っかけ方が悪いのか、「モバイルフレンドリーまでの道のり(その2)」で書いた広告の幅の問題のように、アイキャッチ画像に関しては、「PC用」「モバイル用」といった切り分けが探し出せませんでした。

アイキャッチ画像の非表示

アイキャッチ画像を、PC用、モバイル用と別個に設定できないのであれば、、

「外してしまえ!」


だって、それしか思いつかないんだもん。笑

だとしても、アイキャッチ画像が表示されるところは、2ヶ所あって、アイキャッチ画像のすべてを削除や表示させないようにしなくても、エラーの原因らしい各ページの本文のタイトルの下に表示される分だけを表示させないようにすればいいんでないか?と気づきました。

ページ本文のアイキャッチ画像を非表示にしても、タイトル一覧のページ「ブログ(新着順)」では、サムネイル表示されています。

実をいえば、ちょっと抵抗あったんですよね。
各ページごとのタイトルの下にある、えらいデカい画像が。笑

それを表示させないためのチェックマークを入れたり入れなかったりの箇所は見つけられたので、とりあえず、それを非表示にしてみることにしました。

これで、モバイルユーザビリティのエラーが改善されるか確認した上で、このアイキャッチ画像とやらの、PCとかモバイルだとかの表示について、じっくり調べてみようと思ったんです。

モバイルフレンドリー

翌日、Google Search Consoleをチェックすると、エラーの数が少し減ってました。毎日、少しづつ減っていって、1週間弱くらいかな?全部のエラーがなくなるまで。

Googleのロボットさんがクロールするのにある程度の時間がかかるということでしょう。

そして、不思議なことに、「コンテンツの幅が画面の幅を超えています」の対策として、本文ページでのアイキャッチ画像を非表示にしただけなのに、他の2つのエラー、「クリック可能な要素同士が近すぎます」と「テキストが小さすぎて読めません」(これは、エラーが一つだけだったから、本当にエラーだったのかも不明)も消えていきました。

そして、ついに、念願の「モバイルフレンドリー」サイトになりました。

モバイルでのアイキャッチ画像

モバイルでもちゃんとアイキャッチ画像が表示されるように調べて、対応していこうと思っていたんですけどね、いろいろモバイル表示とか調べているうちに、べつの気がかりなことが出てきました。

最近は、ネットワークスピードも速くなったとはいえ、画像はページが重い原因になり、重いページ、遅いページは、離脱率が高くなると。

たしかにそうですよね、モバイルであるサイトを見ようとして、なかなかページが表示されなかったら、べつのページを探しますよね、自分もそうします、せっかちなので。笑

ならば、モバイルの本文ページには、そもそもアイキャッチ画像は不要なのではないか、と。

じゃあ、PCのほうは?

んー、PCのほうもなくてもいい気がする。
大きすぎるなーと違和感あったし。笑

ということで、とりあえず、本文ページから、PCサイトもモバイルサイトも、アイキャッチ画像は非表示にする、ということで、解決しました。

いままでもモバイルで見てくれてた方は、軽く感じますか?

今回のエラー対応で学んだこと

WordPressは、いろいろ自由がきく分、いったんエラーが出てしまうと、ちょっと大変です、いや、すごく大変でした。笑

ただ、今回のエラーがあったことにより、いままで知らなかったこと、わからなかったことを調べ、考えたことで、たくさんの知識を得ることができたと思います。

何かしら、トラブルとか不具合、不都合がないと、なかなか人は動きませんから。笑
そういう意味では、とても貴重な経験ができたと思います。

ジャジャジャジャジャジャーン!!!

「くろのすけはかしこさが3あがった」