Smart banners promote your app to website visitors. They are one of the most effective ways to convert web traffic into app installs. But Google has clear rules about mobile interstitials, and violating them can cost you search rankings.
This guide covers exactly what Google allows, what triggers penalties, and how to implement smart banners that drive installs without hurting SEO. For smart banner best practices, see smart banners and SEO. For Google's specific guidelines, see Google's interstitial guidelines and smart banners.
Google's Position on App Install Interstitials
In January 2017, Google began penalizing pages with intrusive interstitials on mobile. This specifically targeted app install prompts because so many sites were showing full-screen "Download our app" popups that blocked content.
What Google Penalizes
Google demotes pages in mobile search results when they show interstitials that:
- Cover the main content immediately after the user navigates from search.
- Require dismissal before the user can access the content.
- Use a layout where the above-the-fold portion looks like an interstitial.
What Google Does NOT Penalize
- Small banners that use a reasonable amount of screen space.
- Apple Smart App Banners (the native Safari banner triggered by
<meta name="apple-itunes-app">). - Banners that appear after user interaction (scrolling, time on page, clicking).
- Legal interstitials (cookie consent, age verification).
- Login dialogs for content behind a paywall.
The key distinction: Google penalizes interstitials that block content on the initial page load from search. Banners that appear later or take up a small portion of the screen are fine.
Banner Types and Their SEO Impact
Apple Smart App Banner (Safe)
<meta name="apple-itunes-app" content="app-id=YOUR_APP_STORE_ID, app-argument=https://yourapp.com/current-page">
SEO impact: None. Google explicitly exempts Apple Smart App Banners from the interstitial penalty. These are native to Safari, take up a small fixed amount of space, and are easily dismissable.
Limitations: Only works in Safari on iOS. Does not work on Android, Chrome, or other browsers.
Small Top/Bottom Banner (Safe)
A custom banner pinned to the top or bottom of the page, similar in size to a browser toolbar:
.app-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px; /* Small, non-intrusive */
z-index: 1000;
}
SEO impact: None, as long as it does not push content down or cover a significant portion of the viewport. Google considers banners that take up roughly 15% or less of the screen as non-intrusive.
Important: The banner must not cause Cumulative Layout Shift (CLS). If the banner pushes content down when it appears, it affects Core Web Vitals.
Inline Banner (Safe)
A banner embedded within the page content, not overlaying it:
<article>
<h1>Article Title</h1>
<p>First paragraph of content...</p>
<!-- Inline banner after first paragraph -->
<div class="app-promo-inline">
<img src="/images/app-icon.png" alt="YourApp" width="40" height="40">
<p>Read this on our app for a better experience</p>
<a href="https://links.yourapp.com/current-page">Open in App</a>
</div>
<p>More content...</p>
</article>
SEO impact: None. Inline banners are part of the page content. They do not block anything and do not trigger any penalty.
Full-Screen Interstitial on Load (Penalized)
<!-- DO NOT DO THIS -->
<div class="fullscreen-overlay" style="position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999;">
<h2>Download Our App</h2>
<button onclick="goToAppStore()">Download</button>
<button onclick="closeOverlay()">No thanks</button>
</div>
SEO impact: Ranking demotion for the page in mobile search results. Google specifically targets this pattern.
Delayed Full-Screen (Gray Area)
A full-screen overlay that appears after 30+ seconds or after the user has scrolled significantly:
SEO impact: Likely safe, but risky. Google's penalty targets interstitials shown "when navigating from search results." An interstitial shown after significant user engagement is less likely to trigger the penalty, but Google has not provided a specific time threshold.
Recommendation: Avoid full-screen app install prompts entirely. A well-designed small banner converts nearly as well without any SEO risk.
Implementing SEO-Safe Smart Banners
Requirements
An SEO-safe smart banner must:
- Not cover the main content on page load.
- Not cause layout shift (reserve space or use fixed positioning).
- Be easily dismissable (one tap to close).
- Remember dismissal (do not show again after the user closes it).
- Load asynchronously (do not block page rendering).
Implementation Example
<!-- Load banner script asynchronously -->
<script async src="https://cdn.yourplatform.com/banner.js"></script>
<style>
.smart-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid #e0e0e0;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 12px;
z-index: 1000;
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}
.smart-banner.hidden { display: none; }
.smart-banner__close {
padding: 8px;
cursor: pointer;
font-size: 18px;
}
</style>
<div id="app-banner" class="smart-banner hidden">
<button class="smart-banner__close" onclick="dismissBanner()">×</button>
<img src="/icon-48.png" alt="YourApp" width="48" height="48">
<div>
<strong>YourApp</strong>
<p style="margin:0;font-size:12px">Better experience in our app</p>
</div>
<a href="https://links.yourapp.com/current-page"
style="margin-left:auto;padding:8px 16px;background:#007AFF;color:#fff;border-radius:6px;text-decoration:none">
Open
</a>
</div>
<script>
function dismissBanner() {
document.getElementById('app-banner').classList.add('hidden');
localStorage.setItem('banner_dismissed', Date.now());
}
// Show banner only if not recently dismissed
const dismissed = localStorage.getItem('banner_dismissed');
const daysSinceDismiss = dismissed ? (Date.now() - parseInt(dismissed)) / 86400000 : Infinity;
if (daysSinceDismiss > 7) {
document.getElementById('app-banner').classList.remove('hidden');
}
</script>
CLS Prevention
The banner above uses position: fixed, so it does not affect document flow or cause layout shift. If you use a non-fixed banner (e.g., at the top of the page), reserve space:
/* Reserve space for non-fixed banner */
body {
padding-bottom: 60px; /* Match banner height */
}
Or inject the banner before the page renders using server-side code.
Measuring Banner SEO Impact
Before/After Comparison
When implementing or changing your banner:
- Record baseline metrics for 2 weeks before the change.
- Deploy the banner.
- Compare metrics 2 weeks after deployment.
Key metrics to compare:
| Metric | Source | Watch For |
|---|---|---|
| Organic mobile traffic | Google Analytics | Any drop after banner deployment |
| Mobile search impressions | Search Console | Drop in impressions = potential penalty |
| Mobile search position | Search Console | Position decrease = likely penalty |
| Core Web Vitals (CLS) | PageSpeed Insights | CLS increase from banner |
| Bounce rate | Google Analytics | Increase may indicate intrusive banner |
CrUX Data
Check the Chrome User Experience Report (CrUX) for real-user Core Web Vitals data. If your CLS score degrades after adding a banner, it will affect your search rankings through the page experience signal.
Manual Search Test
After deploying your banner, search for your pages on mobile and verify:
- The banner appears after content loads (not before).
- Content is readable without dismissing the banner.
- The banner is small enough that most content is visible.
- The banner disappears cleanly when dismissed.
Tolinku Smart Banners
Tolinku's smart banners are designed to comply with Google's interstitial guidelines. They load asynchronously, use fixed positioning (no layout shift), and are easily dismissable. Configure banner appearance, position, and behavior in the Tolinku dashboard.
For smart banner best practices, see smart banners and SEO. For Google's guidelines in detail, see Google's interstitial guidelines.
Get deep linking tips in your inbox
One email per week. No spam.