Agent Wranglers

WEB-246Recommended

Never cover the page with a pop-up

Never cover the content with a pop-up for a newsletter, an offer or an app install. Use a small banner instead, at most 25% of the screen height.

By Agent Wranglers. Updated .

How to do it

Google says pop-ups that hide the content make the page hard to understand and may hurt search results. Put the offer in a banner above or below the content, or inline after the first section. Show an app install offer as the browser's own banner, such as Safari's Smart App Banner. A notice the law requires, such as an age gate or a cookie choice, may overlay the page. Keep the content in the HTML under it, and never redirect to a separate page to ask. Keep every banner clear of the focused element, as Never hide the focused element says.

Examples

HTML example

<aside class="offer-banner" aria-label="Newsletter">
  Get our oak care tips each month. <a href="/newsletter">Sign up</a>
</aside>
<main>…</main>

How to check

A browser test opens each page type at 390 by 844 pixels and waits 5 seconds. No fixed, sticky or dialog element other than a legally required notice covers more than 25% of the viewport, and the h1 is visible.

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/website/seo/intrusive-interstitials">Agent Wranglers website playbook</a>. In code you write, add a comment next to it with the same link.