Google completed its mobile-first indexing rollout in 2023: the mobile version of your page is now the canonical version for ranking. Content hidden on mobile via CSS — using patterns like hidden md:block on headings or product descriptions — is treated by Googlebot as absent content. This directly reduces keyword coverage for those pages: if your desktop hero contains the H2 keywords that your page targets, and that H2 is hidden on mobile, those keywords lose their heading-weight signal in the index. The iso-25010:2011 performance-efficiency concern compounds this: serving non-performant mobile experiences alongside hidden content produces two independent ranking penalties.
Critical because mobile-first indexing means content hidden on mobile is absent from the indexed version, directly reducing keyword coverage and heading-weight signals for every affected page.
Audit your CSS for hidden md:block or hidden lg:block patterns on non-decorative elements. The safe rule: use responsive classes to change styling, not to toggle content existence. If desktop and mobile need different layouts for the same content, render both with CSS visibility control — not conditional rendering via JS.
// Before (hides content from Google's mobile crawler):
<h2 className="hidden md:block">Product Features</h2>
// After (same content, different styling):
<h2 className="text-sm md:text-2xl">Product Features</h2>
For your Next.js App Router pages, confirm the viewport metadata is set in app/layout.tsx:
export const metadata = {
viewport: { width: 'device-width', initialScale: 1 },
}
For a complete mobile responsiveness audit, the Mobile Responsiveness audit covers touch targets, scrolling behavior, and layout shift in depth.
ID: marketing-advanced-seo.mobile-performance-seo.mobile-first-rendering
Severity: critical
What to look for: Count all viewport meta tags and responsive CSS configurations. Enumerate whether server-side rendering serves mobile-appropriate content by default. Check for patterns where SEO-critical content is hidden on mobile but visible on desktop. Since Google uses the mobile version of pages for indexing, content hidden on mobile via CSS is treated as absent. Look for: (1) CSS or Tailwind classes that hide content on mobile but show it on desktop — specifically hidden md:block or hidden lg:block patterns on elements containing H2, H3, paragraph text, or product descriptions, (2) CSS media queries using display: none at mobile breakpoints on elements with meaningful text content, (3) server-side rendering that delivers different content to mobile user agents. Distinguish between hiding navigation toggles or decorative elements (acceptable) versus hiding substantive text content (not acceptable for SEO).
Pass criteria: No SEO-critical text content (headings, paragraphs, product descriptions) is hidden exclusively on mobile via CSS. The mobile rendering contains the same substantive content as the desktop rendering. 100% of pages must have proper viewport meta tags and serve mobile-appropriate content as the default rendering.
Fail criteria: Content elements containing SEO-relevant text (H2, H3, descriptive paragraphs, product summaries) are hidden on mobile via CSS with no mobile-visible equivalent.
Skip (N/A) when: The project has no frontend pages (API-only). Or the project uses server-side rendering with no mobile-hidden content patterns.
Report even on pass: Report the viewport configuration found: "Viewport configured as width=device-width, initial-scale=1; X of Y pages have responsive CSS."
Cross-reference: For CLS prevention on mobile, see cls-prevention. For mobile-hostile patterns, see mobile-hostile-config.
Detail on fail: "Mobile-first indexing risk: SEO-relevant content elements are hidden on mobile via CSS (e.g., Tailwind 'hidden md:block' on H2 elements and product description paragraphs). Google indexes the mobile version — hidden mobile content will be underweighted."
Remediation: Since 2023, Google uses only the mobile version of your page for indexing. Content hidden on mobile is treated as absent. Restructure your layout so the same content is visible at all breakpoints — use CSS to style elements differently on mobile, not to hide them. Check for hidden md:block or hidden lg:block patterns on content containers (not navigation toggle buttons or purely decorative elements). For a deeper analysis of mobile responsiveness, the Mobile Responsiveness audit covers layout, touch targets, and mobile UX in depth.
// app/layout.tsx — mobile-first viewport
export const metadata = { viewport: { width: 'device-width', initialScale: 1 } }