Mobile SEO Checklist

1 Verify Mobile-First Indexing in GSC

Open Google Search Console and check your indexing status. Go to Settings and look for "Googlebot" type. It will show whether Google uses mobile or desktop crawling for your site. Most sites are already mobile-first, but verify to be sure.

2 Use Responsive Design Framework

Responsive design uses CSS media queries to adapt layout to screen size. This is Google's recommended mobile configuration. Avoid separate mobile URLs (m.example.com) or dynamic serving. Responsive design is simpler to maintain and preferred by SEO.

/* Responsive media queries */
/* Mobile: default styles for small screens */
.container { padding: 0 16px; }

/* Tablet: 768px+ */
@media (min-width: 768px) {
  .container { padding: 0 24px; }
  .grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
  .grid { grid-template-columns: 1fr 1fr 1fr; }
}

3 Configure Viewport Meta Tag Correctly

The viewport meta tag is essential for responsive design. Without it, mobile browsers render pages at desktop width requiring pinch-to-zoom.

<meta name="viewport" content="width=device-width, initial-scale=1">


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

4 Optimize Touch Targets

Buttons and links should be at least 48x48 pixels with adequate spacing. Small targets frustrate mobile users and increase accidental clicks. Google's Mobile Usability report flags touch targets that are too close together.

/* Minimum touch target size */
button, a, .clickable {
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
}

/* Adequate spacing between targets */
.nav-item + .nav-item {
  margin-left: 16px;
}

5 Set Minimum 16px Font Size for Body Text

Body text below 16px on mobile requires users to pinch-zoom to read, creating a poor experience. Line height should be 1.5x the font size. Use relative units (rem) for scalability.

/* Mobile-first font sizing */
html { font-size: 16px; }

body {
  font-size: 1rem;        /* 16px */
  line-height: 1.6;
}

h1 { font-size: 2rem; }     /* 32px */
h2 { font-size: 1.5rem; }   /* 24px */
h3 { font-size: 1.25rem; }  /* 20px */

/* Max line length for readability */
p { max-width: 65ch; }

6 Avoid Intrusive Interstitials and Popups

Full-screen popups that cover content on mobile are penalized by Google. Use slide-ins, banners, or sticky bars instead. Cookie consent banners and age verification are exempt as long as they are easily dismissible.

<!-- Good: dismissible slide-in banner -->
<div class="slide-in-banner" role="dialog" aria-label="Newsletter">
  <p>Get weekly SEO tips.</p>
  <button onclick="this.parentElement.remove()">No thanks</button>
</div>

<!-- Bad: full-screen interstitial -->
<div class="fullscreen-popup" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;">
  <!-- This will trigger Google's intrusive interstitial penalty -->
</div>

7 Ensure Content Parity Between Mobile and Desktop

With mobile-first indexing, Google indexes your mobile content. If your mobile site hides content, text, images, or links that exist on desktop, you lose ranking signals. Use the URL Inspection tool to compare rendered mobile vs desktop content.

8 Test Mobile Core Web Vitals Separately

Mobile CWV thresholds are the same as desktop (LCP under 2.5s, INP under 200ms, CLS under 0.1), but mobile networks are slower. Test specifically on mobile in PageSpeed Insights and monitor CrUX mobile data separately.

9 Simplify Mobile Navigation

Mobile navigation should be simplified. Use a hamburger menu for primary navigation. Include a search bar. Keep menus 1 level deep. Avoid mega menus on mobile.

<!-- Mobile hamburger navigation -->
<nav class="mobile-nav">
  <button class="hamburger" aria-label="Menu">
    <span></span><span></span><span></span>
  </button>
  <ul class="nav-menu" hidden>
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

10 Remove Horizontal Scrolling

Horizontal scrolling is the #1 mobile UX complaint. Ensure all content fits within the viewport width. Use overflow-x: hidden on elements that cause horizontal scroll. Test on a real phone, not just a browser resize.

11 Implement PWA Basics

Progressive Web App features (manifest.json, service worker) improve mobile UX and can provide SEO benefits. Add to Home Screen capability increases engagement. Service workers enable offline access and faster repeat visits.

// manifest.json (PWA manifest)
{
  "name": "Your Site Name",
  "short_name": "Site",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#C9A227",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

// Register service worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

12 Test on Real Devices and Emulators

Browser DevTools device emulation is useful but not sufficient. Test on real phones with real mobile connections. Check GSC Mobile Usability report for issues detected by Googlebot. Common issues: content wider than screen, clickable elements too close, text too small.