Viewport meta tag is properly configured

ab-002513 · seo-fundamentals.meta-tags.viewport-configured

Severity: highactive

Why it matters

Missing or misconfigured viewport metadata causes mobile browsers to render your page at desktop width, then shrink it — text becomes unreadable without zooming, tap targets collapse, and Google's mobile-first index penalizes the page in rankings. Worse, setting user-scalable=no with maximum-scale=1 violates WCAG 2.2 SC 1.4.4 (Resize Text), which requires users to be able to scale text to 200% without loss of content. Sites with pinch-to-zoom disabled routinely fail WCAG audits and see elevated bounce rates from mobile visitors.

Severity rationale

High because a missing or broken viewport tag directly degrades mobile usability and triggers ranking demotion in Google's mobile-first index, harming organic traffic at scale.

Remediation

Add or fix the viewport meta tag in your root layout. In Next.js App Router, export a viewport object from app/layout.tsx rather than placing a raw <meta> tag:

// app/layout.tsx
export const viewport = {
  width: 'device-width',
  initialScale: 1,
}

Remove any userScalable: false or maximumScale: 1 values — these block pinch-to-zoom and will fail WCAG 2.2 SC 1.4.4. If you are on Pages Router, set the tag in _document.tsx inside <Head>.

Detection

ID: viewport-configured
Severity: high
What to look for: Check for a viewport meta tag in the document head. In Next.js App Router, this is often handled automatically by the framework, but verify it exists. Look in root layout.tsx metadata, <Head> components, or _document.tsx.
Pass criteria: Enumerate all viewport meta tag declarations in the project. A <meta name="viewport" content="width=device-width, initial-scale=1"> tag (or equivalent) must be present in the document head, either explicitly or via framework default. The tag must include at least 2 required properties: width=device-width and initial-scale=1. Do NOT pass when user-scalable=no and maximum-scale=1 are both present — this blocks pinch-to-zoom and is an accessibility violation.
Fail criteria: No viewport meta tag is found, or the viewport tag uses problematic values like maximum-scale=1 combined with user-scalable=no (which blocks pinch-to-zoom and is an accessibility issue).
Skip (N/A) when: Never — every web project needs a viewport tag.
Detail on fail: Specify whether the tag is missing entirely or has problematic configuration. Example: "Viewport meta tag sets user-scalable=no, preventing pinch-to-zoom" or "No viewport meta tag found in document head"
Cross-reference: For a deeper analysis of zoom and scaling accessibility, the Accessibility Fundamentals audit covers this in detail.
Remediation: The viewport meta tag tells browsers how to scale your page on mobile devices. Without it, mobile users see a desktop-width page. In Next.js App Router, the framework adds a default viewport. If you need to customize it:
```
// app/layout.tsx
export const metadata = {
  viewport: 'width=device-width, initial-scale=1',
}
```
Avoid using user-scalable=no or maximum-scale=1 as these prevent users from zooming, which is both an accessibility and SEO issue.

External references

wcag:2.2 · 1.4.4 — Resize Text

Taxons

findability accessibility

History

2026-04-18·v1.0.0·Initial import from seo-fundamentals·automated

Why it matters

Remediation

Add or fix the viewport meta tag in your root layout. In Next.js App Router, export a viewport object from app/layout.tsx rather than placing a raw <meta> tag:

// app/layout.tsx
export const viewport = {
  width: 'device-width',
  initialScale: 1,
}

Remove any userScalable: false or maximumScale: 1 values — these block pinch-to-zoom and will fail WCAG 2.2 SC 1.4.4. If you are on Pages Router, set the tag in _document.tsx inside <Head>.

Detection

ID: viewport-configured
Severity: high
What to look for: Check for a viewport meta tag in the document head. In Next.js App Router, this is often handled automatically by the framework, but verify it exists. Look in root layout.tsx metadata, <Head> components, or _document.tsx.
Pass criteria: Enumerate all viewport meta tag declarations in the project. A <meta name="viewport" content="width=device-width, initial-scale=1"> tag (or equivalent) must be present in the document head, either explicitly or via framework default. The tag must include at least 2 required properties: width=device-width and initial-scale=1. Do NOT pass when user-scalable=no and maximum-scale=1 are both present — this blocks pinch-to-zoom and is an accessibility violation.
Fail criteria: No viewport meta tag is found, or the viewport tag uses problematic values like maximum-scale=1 combined with user-scalable=no (which blocks pinch-to-zoom and is an accessibility issue).
Skip (N/A) when: Never — every web project needs a viewport tag.
Detail on fail: Specify whether the tag is missing entirely or has problematic configuration. Example: "Viewport meta tag sets user-scalable=no, preventing pinch-to-zoom" or "No viewport meta tag found in document head"
Cross-reference: For a deeper analysis of zoom and scaling accessibility, the Accessibility Fundamentals audit covers this in detail.
Remediation: The viewport meta tag tells browsers how to scale your page on mobile devices. Without it, mobile users see a desktop-width page. In Next.js App Router, the framework adds a default viewport. If you need to customize it:
```
// app/layout.tsx
export const metadata = {
  viewport: 'width=device-width, initial-scale=1',
}
```
Avoid using user-scalable=no or maximum-scale=1 as these prevent users from zooming, which is both an accessibility and SEO issue.