Googleサーチコンソールを使っているあなたなら、2020年の5月に「ウェブに関する主な指標」が追加されたことに気が付いていますよね。
そして「はてな無料ブログ民」のあなたは、「CLSに関する問題」に悩まされているのではないでしょうか。
✅「CLSに関する問題」とは
✅解決しないとまずい理由
✅CLSの解決方法
私も全ての記事に対して、CLSに関するエラーが出ていたのですが、エラーは全て解消しました！
以下でCLSの改善方法をご紹介しますね。
結論から言うと、難しいことはする必要はありません。はてなブログProに移行するだけです。
- CLS に関する問題: 0.25 超（モバイル）って何？？
- なぜ「はてな無料ブログ」はclsでエラーになるのか
- CLSに関する問題を解決する方法
- CLSに関する問題を解決しないとどうなるの？
- CLSに関する問題はいつまでに解決すればいいの？
- はてなブログProへの変更の仕方
- まとめ：はてなブログプロにすれば、CLS問題は解決！
CLS に関する問題: 0.25 超（モバイル）って何？？
いきなり、「CLSに関する問題が発生しています」なんて言われてもなんのことか分かりませんよね。
CLS（Cumulative Layout Shift）:
読み込みフェーズにおけるページ レイアウトの移動量を示します。
評価スコアの範囲は 0～1 で、0 は移動なし、1 は移動量が最大であることを意味します。
この指標が重要なのは、ユーザーが操作しようとしたときにページ要素が移動すると、ユーザー エクスペリエンスが低下するためです。
レポートに表示される Agg CLS（集計 CLS）は、グループ内 URL へのアクセスの 75% に対する一般的な CLS の最低値です。
難しく書いていますが、CLSとは要するに、
ページの画像を読み込んだりするにつれて、コンテンツが下にガタガタっとずれていってしまう量のこと
上記例だと、注文をキャンセルしようとしたのですが、注文ボタンを押してしまいましたね。
上部にアプリインストールの文言が出て、ページがカクッと下がってしまったせいです。
ページがずれてしまうと、ユーザにとって非常に不便ですよね。
2020年の5月にGoogleサーチコンソールに「ウェブに関する主な指標」の一つとしてCLSが追加されたのです。
「ウェブに関する主な指標」とは？
➡︎ユーザーの使いやすさを評価するための新しい3つの指標
LCP：コンテンツの表示完了までの時間
FID：クリックや入力に対する応答時間
CLS：ページレイアウトの移動量
なぜ「はてな無料ブログ」はclsでエラーになるのか
読み込みにより、コンテンツがガタッと落ちてしまうのが問題であることが分かったところで、はてなブログにおいては何が原因なのでしょうか。
答えは「はてなブログ側の自動広告」です。
以下をご覧ください。
青い画像の上にはてなブログ側の自動広告（バナー）が入ってしまい、ガクッと下にコンテンツが下がってしまっていますよね。
Googleサーチコンソール上も以下のようにエラーが出ている状態でした。
この自動広告をどうにかしなければなりませんが、はてなブログ側が設置している自動広告なのでhtmlやcssをいじれそうにもありません。
CLSに関する問題を解決する方法
CLSに関する問題を解決するためには、はてなブログProに変更しましょう。
はてなブログプロに変更することで、「はてなブログ側の自動広告」を削除することができます。
✅はてなブログProに変更する
✅自動広告を削除する
この対応をすることで実際にエラーは0件になりました。
ちなみに、対応をしてから1ヶ月以内にエラーを解消することができましたよ。
でも「はてなブログプロ」にするとお金かかるんだよなぁ
分かります。私もかなり悩みました。
1ヶ月相当：1,008円/月
1年コース：703円/月 相当
2年コース：600円/月 相当
しかし、はてなブログプロならサーバー代もドメイン代もかからず上記費用だけなので、そこまで金銭的なダメージはありません。
私は「はてな無料ブログ」で居続ける方が、デメリットがあると思い変更しました。
CLSに関する問題を放置し続けると、2021年移行に検索順位に大きく影響する可能性があるからです。
CLSに関する問題を解決しないとどうなるの？
どんなに内容が良いコンテンツでも、ページが見づらいと（上記のようなガクッと下がる現象等があると）ユーザーは使いづらいですよね。
Googleは、CLSを含む「Webに関する主な指標」を検索順位を決定する指標の一つとして追加すると言っています。
>>Official Google Webmaster Central Blog: Evaluating page experience for a better web
言い換えると、CLSの評価が悪いと検索順位に悪影響を及ぼす可能性があると言えますよね。
CLSのせいで検索順位が落ちて、アフィリエイト収益などが落ちてしまえば死活問題です。
私はちょっとでも検索順位に影響するリスクがあるなら、対応しておいた方が良いと判断し、はてなブログProに変更しました。
CLSに関する問題はいつまでに解決すればいいの？
ではいつまでにCLSの問題を解決すればいいのでしょうか。
Googleは、
新型コロナウイルスの件もあるから、2020年の内は待ってあげる。
かつ、アップデートする6ヶ月前には通知するよ。
と言ってくれています。
(Official Google Webmaster Central Blog: Evaluating page experience for a better web)
今すぐにやる必要はありませんが、先延ばしにするといつまでもやらなかったり、忘れたりするのが人間です。
この記事を読んだ今のうちにはてなブログProにしておくことをおすすめします。
このページを忘れないようにブックマークしておく。
はてなブログProへの変更の仕方
はてなブログプロへの移行の仕方はとても簡単です。
まずは以下のリンクをクリックします。
❶「はてなブログProに登録する」をクリック
❷お好きなプランを選択
❸クレジットカードを登録
これで完了です！
はてなブログPro登録後は「設定⇨詳細設定⇨広告を非表示」からはてなの自動広告をOFFにしておきましょう。
これで自動広告が消えました。
Googleサーチコンソールでやること
最後にGoogleサーチコンソール側で、修正の検証を行います。
以下画像の左の「修正を検証」ボタンを押しましょう。
1ヶ月以内に検証してくれますよ。合格になればOKです。
ちなみに私は、一定の期間「改善が必要なurl」に分類された後、「良好」となりましたよ。
まとめ：はてなブログプロにすれば、CLS問題は解決！
今回は、
✅CLSに関する問題とは
✅解決しないとまずい理由
✅CLSの解決方法
についてお話しさせて頂きました。
はてなブログProにすれば、とりあえずCLSに関する問題は対応可能です。
2021年に向けて、あなたもそろそろはてなブログProに移行してみませんか？
今すぐ「はてなブログPro」に移行する