What does the viewport meta tag do?

It tells mobile browsers to lay the page out at the width of the screen. Without it they render a desktop-width page and shrink it, so text is tiny and Google treats the page as not mobile-friendly.

Should I turn off zooming?

No. maximum-scale=1 or user-scalable=no stop people from pinch-zooming, which fails accessibility guidelines for readers who need larger text.

Why does my report mention the viewport twice?

Two checks, one in the SEO group and one among the general page checks, read the same tag, and this page covers both. Adding the tag fixes both.

Best Practices Small

Viewport meta tag missing: how to add it

Add a responsive viewport tag

A responsive viewport tag is what lets the rest of a site's responsive CSS actually take effect on a phone or tablet. Without it, mobile browsers render the page at a fixed desktop-like width and scale it down, making text unreadably small and forcing visitors to pinch and zoom just to read anything.

Find out whether your site has this problem, and every other check, in one free scan.

Check your site free

Why it matters

Without a responsive viewport tag, the page renders at desktop width on phones, forcing visitors to pinch and zoom, which drives them away.

How to fix

1 Add <meta name="viewport" content="width=device-width, initial-scale=1"> to <head>.
2 Confirm layouts adapt correctly at common breakpoints.

Fix it in your stack

HTML

Inside <head>.

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

Next.js

App Router adds this tag by default. To change it, export viewport from the root layout.

export const viewport = { width: 'device-width', initialScale: 1 };

WordPress

Current themes print it. On an older theme, add the HTML line to header.php, before wp_head().

Common mistakes

Adding the tag with a fixed pixel width instead of width=device-width, which still forces the same desktop-scaled rendering problem.
Applying it inconsistently across templates, so some pages (e.g. an old landing page or an email-generated page) never got the tag.
Combining it with an overly restrictive maximum-scale/user-scalable=no, trading one usability problem for an accessibility one.

How to verify

1 View page source and confirm <meta name="viewport" content="width=device-width, initial-scale=1"> is present.
2 Load the page on a real mobile device or a device emulator at common breakpoints and confirm the layout adapts correctly.
3 Check less-visited templates (landing pages, error pages) to confirm the tag was not missed on a different layout.

Questions

What does the viewport meta tag do?: It tells mobile browsers to lay the page out at the width of the screen. Without it they render a desktop-width page and shrink it, so text is tiny and Google treats the page as not mobile-friendly.
Should I turn off zooming?: No. maximum-scale=1 or user-scalable=no stop people from pinch-zooming, which fails accessibility guidelines for readers who need larger text.
Why does my report mention the viewport twice?: Two checks, one in the SEO group and one among the general page checks, read the same <meta name="viewport"> tag, and this page covers both. Adding the tag fixes both.

Ready to see where you stand?

Scan your site and get your Engineering Score with a prioritized roadmap in under a minute, no signup required.

Scan your site