スマホのポップアップはSEOに不利?|Googleの説明に沿った大きさと出し方

「スマホでポップアップを出すと検索順位が下がる」と聞いて、ポップアップそのものをやめてしまうショップがあります。けれども、Googleが避けるよう求めているのは ポップアップ全般ではなく、コンテンツを読む邪魔をする「煩わしい」表示です。小さな画面ほど、同じポップアップでも邪魔になりやすいのは確かなので、 スマホでは大きさ・出し方・タイミングを分けて考える必要があります。この記事では、Google検索セントラルの日本語のドキュメントに書かれていることだけを根拠に、 スマホで安全なポップアップの形と、公開前に確かめることを整理します。

更新

結論:問題になるのは「煩わしい」ポップアップ

Google検索セントラルの「煩わしいインタースティシャルやダイアログを避ける」では、対象を次のように説明しています。

「煩わしいインタースティシャルやダイアログとは、主にプロモーション目的で、ユーザーのコンテンツ閲覧を妨害するページ要素のことです。インタースティシャルはページ全体を覆うオーバーレイ、ダイアログはページの一部のみを覆うオーバーレイであり、場合によっては元のコンテンツが見えにくくなります。」(Google検索セントラル「煩わしいインタースティシャルやダイアログを避ける」より)

つまり、ポップアップは大きく2つに分けて考えられています。ページ全体を覆うもの(インタースティシャル)と、一部だけを覆うもの(ダイアログ)です。どちらであっても、閲覧を妨害するものが「煩わしい」とされます。逆に言えば、読む邪魔をしない小さなお知らせまで避ける必要はありません。

同じページでは、検索への影響についても触れています。

「煩わしいダイアログやインタースティシャルが表示されると、Google や他の検索エンジンがコンテンツを把握することが困難になり、検索のパフォーマンスが低下する可能性があります。」(同ページより)

ここで書かれているのは「可能性があります」という表現です。ポップアップを1つ出したら必ず順位が下がる、という決まりが示されているわけではありません。ただ、同じページは、使いにくいと感じたお客さまはサイトに再び来る可能性が低くなる、とも述べています。検索の評価より先に、目の前のお客さまを逃すという点で、煩わしいポップアップは損です。

ページエクスペリエンスとの関係

Googleの「ページ エクスペリエンスが Google 検索の検索結果に与える影響について」には、自己評価のための質問が並んでいます。その中に「コンテンツはモバイル デバイス上で適切に表示されていますか。」「ページで煩わしいインタースティシャルの使用が避けられていますか。」という2つの質問があります。

一方で、同じページのよくある質問には「Core Web Vitals 以外のページ エクスペリエンスの要素が検索結果でのランキング上昇に直接貢献することはありません。」とも書かれています。続けて、そういった要素はユーザー満足度を向上させる可能性があり、それは通常、ランキングシステムでも高く評価される、という説明があります。

まとめると、次のように理解するのが正確です。

よく聞く話Googleのドキュメントに書かれていること
ポップアップを出すと順位が下がる煩わしいダイアログはコンテンツの把握を難しくし、検索のパフォーマンスが低下する「可能性がある」
ポップアップは一切使わないほうがよい画面のほんの一部だけを覆うバナーの使用を勧めている。ニュースレター購読の案内にも使えると説明
インタースティシャルさえ避ければ順位が上がるCore Web Vitals以外の要素が順位の上昇に直接貢献することはない、と説明
表示速度やずれは関係ないCore Web Vitals(読み込み・応答性・視覚的安定性)はランキングに使われると説明

最後の行は見落とされがちです。ポップアップや帯の出し方によっては、ページの読み込みやレイアウトのずれ(後で説明するCLS)に影響します。こちらはCore Web Vitalsの話なので、見た目の邪魔さとは別に確認が必要です。

スマホで問題になりやすい理由

PCの画面で中央に小さく出るモーダルも、スマホで開くと画面の大半を覆うことがあります。PC用に作った横長の画像をそのまま縮めると、文字が読めない大きさになるか、逆に画面いっぱいに広がります。

さらにスマホでは、閉じるボタンが指で押しにくい位置や大きさになりやすく、画面外にはみ出して見えなくなることもあります。PCでは気にならなかったポップアップが、スマホでは「閉じられない全画面の広告」に変わってしまうわけです。スマホの表示は、PCの縮小版ではなく別のデザインとして考えるのが安全です。

出し方別の比べ方

Googleのドキュメントは「ページ全体を覆うインタースティシャルではなく、画面のほんの一部だけを覆うバナーを使用しましょう」と勧めています。この考え方で、ネットショップでよく使う出し方を並べると次のようになります。

出し方スマホでの覆い方向いている内容注意点
ページの上の帯ごく一部。本文はそのまま読める送料無料の条件、セールのお知らせ本文を押し下げる作りだと、レイアウトのずれにつながる
画面の隅に浮かべる(フローティング)一部。下の本文はほぼ見えるクーポン、メール登録の入り口固定のカートボタンやチャットと重ならないか確かめる
小さいモーダル中央の一部。背景が見える大きさなら圧迫感は小さいメール登録、初回特典ページを開いた直後に出さない。閉じるボタンをはっきり
全画面のインタースティシャルページ全体を覆う法律で必要な確認(年齢確認など)販促目的ではGoogleが避けるよう求めている形

販促のお知らせは、帯かフローティング、または背景が見える小さいモーダルで足ります。全画面で出したくなる内容があれば、それは帯にできないか、ページ本文の中に書けないかを先に考えます。

Googleが挙げている「よくあるミス」

同じドキュメントは、法律で義務付けられている場合を除いて、次の2つを避けるよう書いています。

  1. インタースティシャルでページ全体を覆わないようにする。スマホでは、小さく作ったつもりのモーダルが実質的に全体を覆っていないかも確認します。
  2. 同意や入力のために、ユーザーを別のページにリダイレクトしないようにする。メール登録やクーポンの受け取りのために、まず別ページへ飛ばす作りは避けます。

お酒を扱うショップなどで年齢確認を出す場合は「必須のインタースティシャル」に当たり、このガイドラインの対象外とされています。それでも、すべてのURLを1つの確認ページにリダイレクトするとGooglebotはそのページしか取得できない、という注意が書かれています。年齢確認を入れる場合は、ドキュメントの「必須のインタースティシャル」の項を読んでから作りましょう。

スマホで安全なポップアップの作り方

  1. 大きさ:背景のページが見える大きさにする。画面の一部に収め、何のページを見ていたかが分かる状態を保ちます。迷ったら帯かフローティングにします。
  2. 画像:スマホ用に作り直す。縦長または正方形に近い形にし、文字はスマホで読める大きさに。PC用の横長画像の縮小で済ませないようにします。
  3. 文字量:見出し1行と補足1行まで。スマホでは長い説明を読んでもらえません。条件の詳細はリンク先に書きます。
  4. 閉じるボタン:見える位置に、押せる大きさで。画面の外にはみ出していないか、背景と同じ色で見えにくくなっていないかを確かめます。
  5. タイミング:ページを開いた直後に出さない。ある程度スクロールしたとき、一定の時間ページにいたとき、帰りそうなときなど、読んだあとで出します。
  6. 出すページ:購入手続きの途中では出さない。入力中のお客さまに割り込むと、購入そのものを止めてしまいます。

離脱しそうなときに出す方法は、PCとスマホで判定のしかたが違います。詳しくは離脱防止ポップアップの仕組みと出し方をご覧ください。メール登録を目的にする場合の文言や特典の決め方は、メール登録ポップアップの作り方で説明しています。

レイアウトのずれ(CLS)にも気をつける

Googleの「Core Web Vitals と Google 検索の検索結果について」では、視覚的安定性の指標としてCLS(Cumulative Layout Shift)を挙げ、「CLS スコアを 0.1 未満に収めるようにします」と目安を示しています。web.devのCLSの解説は、予期しないレイアウトの変化は、テキストが突然移動して読み進めにくくなったり、間違ったリンクやボタンをクリックしたりする原因になると説明しています。

販促の表示で起きやすいのは、ページが表示されたあとに上から帯が差し込まれ、本文全体が下へずれる形です。商品の写真をタップしようとした瞬間に位置がずれれば、お客さまにとっても不便です。ページの上に重ねる形(本文を押し下げない形)で出すか、あらかじめ場所を空けておく作りにします。

web.devの解説には、ユーザー入力から500ミリ秒以内に発生したレイアウトのずれは計算から除外できる、という説明もあります。ボタンを押した結果として開く表示は、操作と関係が分かるので問題になりにくい、ということです。勝手に差し込まれる表示ほど注意が必要です。

marketingLABOでスマホ向けに設定する手順

marketingLABOのポップアップバナーは、計測タグ1行で動き、出し方・端末・きっかけを分けて設定できます。スマホ向けに作るときの手順は次のとおりです。

  1. テンプレートを選びます。「お知らせの帯」「送料無料」「クーポン・割引」「メール登録(フォーム付き)」などの分類から選び、文言と色を直します。
  2. 出し方を選びます。ページの上に帯で出す、画面の隅に浮かべる(フローティング)、画面の中央に重ねる(モーダル)の3つです。スマホで迷ったら帯かフローティングから始めます。
  3. 出す端末を選びます。すべての端末、スマホだけ、PCだけ、PCとスマホで画像を分ける、の4つです。画像を使う場合は「PCとスマホで画像を分ける」を選び、スマホ用の画像を別に用意します。
  4. 表示のきっかけを選びます。最初から表示、ページの○%までスクロールしたら表示、ページの滞在時間が○秒を超えたら表示、ユーザ離脱時にモーダルで表示、の4つです。スマホではスクロールか滞在時間がおすすめです。
  5. 表示するページのURLを入れます。商品ページの共通部分までを入れて前方一致にすると、配下のページが対象になります。購入手続きのページは含めないようにします。
  6. 公開したら、自分のスマホで実際にサイトを開き、どのタイミングで出るか、閉じるボタンが押しやすいか、本文がずれないかを確かめます。

モーダルのポップアップは、開くと操作の対象が中に移り、キーボードで項目を選んだり、Escキーで閉じたりできます。読み上げソフトにも対応しています。ただし、文言の分かりやすさや画像の文字の大きさは作る側の責任なので、スマホでの見え方は必ず実機で確認してください。

公開できるバナーの数は、フリープランで1つ、ライトプランで3つ、スタンダードプランで無制限です(料金)。なお、marketingLABOにはバナーのA/Bテストや、表示回数の上限を決める設定はありません。

公開前のチェックリスト

  1. 販促の表示がページ全体を覆っていない(スマホの実機で確認した)
  2. 背景のページが見え、何を見ていたかが分かる
  3. スマホ用の画像・文字の大きさで作ってある
  4. 閉じるボタンが画面内にあり、指で押せる
  5. ページを開いた直後ではなく、読んだあとに出る
  6. メール登録やクーポンのために別ページへリダイレクトしていない
  7. 購入手続き・入力中のページでは出ない
  8. 帯やバナーが本文を押し下げてずらしていない
  9. 同じページで複数の表示が重ならない

公開後の確かめ方

Search ConsoleのCore Web Vitalsレポートで、ページのパフォーマンスを確認できます(Googleの「Core Web Vitals と Google 検索の検索結果について」に記載)。ポップアップを公開した前後で、モバイルの状態が悪くなっていないかを見ておきましょう。

あわせて、marketingLABOのレポートで、対象ページの滞在時間や回遊の変化を見ます。何人かの訪問者の行動履歴を開くと、ポップアップがどのページの何秒後に出て、そのあとどのページへ進んだかが分かります。クリック数だけでなく、本来の目的(メール登録や購入)が減っていないかを確かめてください。

よくある質問

スマホでモーダルを使うと、それだけでSEOに不利になりますか?

Googleのドキュメントは、モーダルという形そのものを禁止してはいません。避けるよう求めているのは、閲覧を妨害する煩わしい表示です。背景が見える大きさで、読んだあとに出て、すぐ閉じられるなら、問題になりにくい作りといえます。それでも不安なら、帯かフローティングを選ぶのが確実です。

Cookieの同意や年齢確認の表示も避けるべきですか?

法律で必要な表示は、Googleのドキュメントでも別扱いです。ただし、コンテンツが少なくとも一部は見えるようにする、別ページへリダイレクトしない、といったおすすめが書かれています。なお、marketingLABOには同意管理の機能はないため、同意の表示が必要な場合は別のツールで用意してください。

帯なら何本出してもよいですか?

帯も、何本も重なれば画面の上部を大きく占めます。スマホでは1本に絞り、内容は送料無料の条件やセールの期限など、全ページで共通のお知らせにします。帯とポップアップの使い分けは、送料無料のお知らせはどこに出すかで詳しく説明しています。

初めての人とリピーターで出すものを変えられますか?

できます。訪問回数や前回の訪問からの日数を条件にすると、同じ人に同じポップアップを何度も見せずに済みます。初めての人とリピーターで出すものを変えるで設定の例を紹介しています。

まとめ

Googleが避けるよう求めているのは、ポップアップ全般ではなく、閲覧を妨害する煩わしい表示です。スマホでは同じ表示でも邪魔になりやすいので、帯・フローティング・背景が見える小さいモーダルから選び、スマホ用の画像を用意し、読んだあとに出します。公開後は実機とCore Web Vitalsの両方で確かめましょう。まずは無料で登録して、スマホだけに出す帯を1つ作るところから始められます。

参考にした資料

Google検索セントラル「煩わしいインタースティシャルやダイアログを避ける」(最終更新2025年12月18日、2026年10月12日閲覧)

Google検索セントラル「ページ エクスペリエンスが Google 検索の検索結果に与える影響について」(最終更新2026年9月25日、2026年10月12日閲覧)

Google検索セントラル「Core Web Vitals と Google 検索の検索結果について」(最終更新2025年12月18日、2026年10月12日閲覧)

web.dev「Cumulative Layout Shift(CLS)」(2026年10月12日閲覧)

フリープランは期限なしで無料。クレジットカードの登録は不要です

無料で始める

ほかの記事