Mobile-first rendering is properly configured

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.

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.