masalog(マサログ)

結婚・節約・投資をテーマに、もっと早く気づけばよかった、人生をちょっと賢く生きるコツを投稿します。

CLSに関する問題の解決法|2021年は「はてなブログプロ」にしないとヤバい件

f:id:kame_reon:20201027225844p:plain

 

Googleサーチコンソールを使っているあなたなら、2020年の5月に「ウェブに関する主な指標」が追加されたことに気が付いていますよね。

 

そして「はてな無料ブログ民」のあなたは、「CLSに関する問題」に悩まされているのではないでしょうか。

 

当記事の内容

✅「CLSに関する問題」とは

✅解決しないとまずい理由

✅CLSの解決方法

 

私も全ての記事に対して、CLSに関するエラーが出ていたのですが、エラーは全て解消しました!

 

f:id:kame_reon:20201027105107p:plain

 

以下でCLSの改善方法をご紹介しますね。

 

結論から言うと、難しいことはする必要はありません。はてなブログProに移行するだけです。

 

 

CLS に関する問題: 0.25 超(モバイル)って何??

f:id:kame_reon:20201027224946j:plain

 

いきなり、「CLSに関する問題が発生しています」なんて言われてもなんのことか分かりませんよね。

 

CLS(Cumulative Layout Shift):

読み込みフェーズにおけるページ レイアウトの移動量を示します。

 

評価スコアの範囲は 0~1 で、0 は移動なし、1 は移動量が最大であることを意味します。

 

この指標が重要なのは、ユーザーが操作しようとしたときにページ要素が移動すると、ユーザー エクスペリエンスが低下するためです。


レポートに表示される Agg CLS(集計 CLS)は、グループ内 URL へのアクセスの 75% に対する一般的な CLS の最低値です。

ウェブに関する主な指標レポート - Search Console ヘルプ

 

 難しく書いていますが、CLSとは要するに、

 

ページの画像を読み込んだりするにつれて、コンテンツが下にガタガタっとずれていってしまう量のこと

 

f:id:kame_reon:20201027111114g:plain

https://webmasters.googleblog.com/2020/05/evaluating-page-experience.htmlより引用

 

上記例だと、注文をキャンセルしようとしたのですが、注文ボタンを押してしまいましたね。

 

上部にアプリインストールの文言が出て、ページがカクッと下がってしまったせいです。

 

ページがずれてしまうと、ユーザにとって非常に不便ですよね。

 

2020年の5月にGoogleサーチコンソールに「ウェブに関する主な指標」の一つとしてCLSが追加されたのです。

 

「ウェブに関する主な指標」とは?

 

➡︎ユーザーの使いやすさを評価するための新しい3つの指標

 

LCP:コンテンツの表示完了までの時間

FID:クリックや入力に対する応答時間

CLS:ページレイアウトの移動量

 

なぜ「はてな無料ブログ」はclsでエラーになるのか

f:id:kame_reon:20201027225009j:plain

 

 読み込みにより、コンテンツがガタッと落ちてしまうのが問題であることが分かったところで、はてなブログにおいては何が原因なのでしょうか。

 

答えは「はてなブログ側の自動広告」です。

 

以下をご覧ください。

 

f:id:kame_reon:20201027123412g:plain

 

青い画像の上にはてなブログ側の自動広告(バナー)が入ってしまい、ガクッと下にコンテンツが下がってしまっていますよね。

 

Googleサーチコンソール上も以下のようにエラーが出ている状態でした。

 

f:id:kame_reon:20201027124550p:plain

 

この自動広告をどうにかしなければなりませんが、はてなブログ側が設置している自動広告なのでhtmlやcssをいじれそうにもありません。

 

CLSに関する問題を解決する方法

f:id:kame_reon:20201027225041j:plain
 

CLSに関する問題を解決するためには、はてなブログProに変更しましょう。

 

はてなブログプロに変更することで、「はてなブログ側の自動広告」を削除することができます

 

CLSに関する問題の解決法

✅はてなブログProに変更する

✅自動広告を削除する

 

この対応をすることで実際にエラーは0件になりました。

 

ちなみに、対応をしてから1ヶ月以内にエラーを解消することができましたよ。

 

f:id:kame_reon:20201027105107p:plain

 

でも「はてなブログプロ」にするとお金かかるんだよなぁ

 

分かります。私もかなり悩みました。

 

1ヶ月相当:1,008円/月

1年コース:703円/月 相当

2年コース:600円/月 相当

 

しかし、はてなブログプロならサーバー代もドメイン代もかからず上記費用だけなので、そこまで金銭的なダメージはありません。

 

私は「はてな無料ブログ」で居続ける方が、デメリットがあると思い変更しました。

 

CLSに関する問題を放置し続けると、2021年移行に検索順位に大きく影響する可能性があるからです。

 

CLSに関する問題を解決しないとどうなるの?

f:id:kame_reon:20201027225100j:plain

 

どんなに内容が良いコンテンツでも、ページが見づらいと(上記のようなガクッと下がる現象等があると)ユーザーは使いづらいですよね。

 

Googleは、CLSを含む「Webに関する主な指標」を検索順位を決定する指標の一つとして追加すると言っています。

 

>>Official Google Webmaster Central Blog: Evaluating page experience for a better web

 

言い換えると、CLSの評価が悪いと検索順位に悪影響を及ぼす可能性があると言えますよね。

 

CLSのせいで検索順位が落ちて、アフィリエイト収益などが落ちてしまえば死活問題です。

 

私はちょっとでも検索順位に影響するリスクがあるなら、対応しておいた方が良いと判断しはてなブログPro変更しました。

 

CLSに関する問題はいつまでに解決すればいいの?

f:id:kame_reon:20201027225121j:plain

 

ではいつまでにCLSの問題を解決すればいいのでしょうか。

 

 

Googleは、

 

新型コロナウイルスの件もあるから、2020年の内は待ってあげる。

かつ、アップデートする6ヶ月前には通知するよ。

 

と言ってくれています。

(Official Google Webmaster Central Blog: Evaluating page experience for a better web)

 

 

今すぐにやる必要はありませんが、先延ばしにするといつまでもやらなかったり、忘れたりするのが人間です。

 

この記事を読んだ今のうちにはてなブログProしておくことをおすすめします。

 

このページを忘れないようにブックマークしておく。

このエントリーをはてなブックマークに追加

 

はてなブログProへの変更の仕方

f:id:kame_reon:20201027225145j:plain

 

はてなブログプロへの移行の仕方はとても簡単です。

 

まずは以下のリンクをクリックします。

>>はてなブログPro

 

 ❶「はてなブログProに登録する」をクリック

f:id:kame_reon:20201027133032p:plain

 

❷お好きなプランを選択

f:id:kame_reon:20201027133254p:plain

 

❸クレジットカードを登録

f:id:kame_reon:20201027133321p:plain

 

これで完了です!

 

はてなブログPro登録後は「設定⇨詳細設定⇨広告を非表示」からはてなの自動広告をOFFにしておきましょう。

 

f:id:kame_reon:20201027133530p:plain



これで自動広告が消えました。

 

Googleサーチコンソールでやること

最後にGoogleサーチコンソール側で、修正の検証を行います。

 

以下画像の左の「修正を検証」ボタンを押しましょう。

 

f:id:kame_reon:20201027124550p:plain

 

1ヶ月以内に検証してくれますよ。合格になればOKです。

 

ちなみに私は、一定の期間「改善が必要なurl」に分類された後、「良好」となりましたよ。

 

f:id:kame_reon:20201029223614p:plain

まとめ:はてなブログプロにすれば、CLS問題は解決!

f:id:kame_reon:20201027225213j:plain
 

今回は、

 

✅CLSに関する問題とは

✅解決しないとまずい理由

✅CLSの解決方法

 

についてお話しさせて頂きました。

 

はてなブログProにすれば、とりあえずCLSに関する問題は対応可能です。

 

f:id:kame_reon:20200711184301p:plain

2021年に向けて、あなたもそろそろはてなブログProに移行してみませんか?

 

今すぐ「はてなブログPro」に移行する

>>はてなブログPro