インタースティシャル要素とは？
インタースティシャル要素とは何かの同意や広告のために画面上でポップアップ表示される要素ことです。
なにか商品やDMへ誘導するためにポップアップで表示するサイトが多くなってきました。
こういった動的コンテンツを使用したWebサイトますます多くなってきていると感じています。
年齢確認やCookie同意画面もインタースティシャル要素
何も広告に限った話ではなく成人向けコンテンツに必要な年齢確認画面もインタースティシャル要素です。
画面を読み込んだときに18歳以上ですか？YES/NOで選択を求める画面ですね。
他にも最近はプライバシーを守るためにCookieの同意画面がサイトによっては表示されています。
欧米圏のサイトでは必ずといって表示されているでしょう。
インタースティシャル要素はCLSにも影響する
最近話題になっているものにコアウェブバイタル対策があります。
5月からはGoogleのアップデートにより検索への影響も高くなります。
中でもCLS(Cumulative Layout Shift)に苦戦されている人が多いようです。
CLSとは要は読み込み時の画面のズレですね。
対応にはコーディングなどの専門的な知識が必要になってきます。
私もCLS対策を行っていますが、年齢確認やCookie同意画面のインタースティシャル要素がCLSにもかなり影響していることがわかってきました。
インタースティシャル要素は読み込み時に表示されることが多い
CLSに影響が大きいのもそれもそのはず、インタースティシャル要素は読み込み時に表示されることが多いからです。
何かの確認は一番最初にするものですから、サイトを初めて開いたときに表示にされます。
インタースティシャルが悪いわけではないですが、Googleに準拠していないサイトが多いです。
そのため、基本的にインタースティシャル要素＝改善の必要ありだと捉えてもらってかまいません。
Googleはインタースティシャル要素は認めている
インタースティシャル要素はGoogleも認めています。
ちょっとうざい要素が多いですが、適切にサイトに配置すれば良いようですね。
このあたりは公式のガイドラインを見て設置することをおすすめします。
参考：インタースティシャル広告の導入における禁止事項
Googleの自動広告でもインタースティシャル要素は使われている
実際にインタースティシャル要素はGoogleの広告にも使われています。
Googleアドセンスで自動広告にすると適用されるはずです。
別のページに飛ぶときに画面すべてを覆い隠す広告のことですね。
自分で作った上記のポリシーですからもちろん画面遷移時に表示するのは準拠しています。
インタースティシャル要素のCLSへの対処法
ここからはかいつまんでインタースティシャル要素のCLS対応について書いていきます。
コアウェブバイタル対策したいと考えている人は参考にしてみて下さい。
あくまでもここではCLS改善について書いていきます。
インタースティシャル要素自体に厳格なポリシーがあるので、そちらでもランキング順位を落としたくない人は公式サイトも参照してくださいね。
別のプラグインを検討する
割と見落としがちなこの対策。
年齢確認プラグインなど無数にあるので今の状態で悪いならばプラグインをまるっと変えてしまうほうが早い場合もあります。
手間とCLSへの影響も考えるならば有料プラグイン対応でも良いですね。
私の場合は別のプラグインにした上で修正しました。
ローディング機能を無効化する
テーマによっては最初にローディング機能が使われていることがあります。
ロードするタイミングでグルグルが表示されるものですね。
私も最初はきづかなかったですが、ローディング機能のローディングのロゴでCLSのズレが発生していました。
表示も遅くなりますし、思い切って無効化してみました。
CSSで固定化する
これは基本的なCLS改善と同じです。
CLSを生み出す要素はズレを生み出しているので、CSSで固定化させました。
要素を特定して検証を重ねて、確認するので結構時間はかかりますがインタースティシャル要素にも影響大です。
よければココナラで対応しているので一度ご相談下さい。
