# Viewport meta tag is properly configured
- **Pattern:** `ab-002513` (`seo-fundamentals.meta-tags.viewport-configured`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002513
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002513)
## 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 `` tag:
```ts
// 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 ``.
## 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, `` components, or `_document.tsx`.
- **Pass criteria:** Enumerate all viewport meta tag declarations in the project. A `` 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:
```ts
// 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 1.4.4
Taxons: findability, accessibility
HTML version: https://auditbuffet.com/patterns/ab-002513