Add the viewport meta tag — v0

Without the viewport meta tag, phones render your page at 980px wide and zoom out — Google flags this as not mobile-friendly and demotes the page.

rocket_launch

Fixing this in v0

Vercel AI component and app generator

v0 scaffolds Next.js App Router code — most fixes live in metadata objects and Server Components. Paste the prompt below into your v0 chat and the fix rolls out across the project in one pass.

Using a different tool? Pick your stack:

Lovable Cursor Bolt v0 Replit Windsurf Claude Code Base44

The prompt for v0

Copy and paste this into your v0 chat exactly as-is.

Regenerate my v0 component / page with these fixes applied:

Add viewport meta tag

1. Add <meta name="viewport" content="width=device-width, initial-scale=1"> to <head>.

Why this matters

Since 2016 Google has flagged sites without a viewport meta tag as "not mobile-friendly" in Search Console. Since 2019 mobile-first indexing means Google primarily ranks based on the mobile version. No viewport = capped mobile ranking.

The tag tells the browser: render this page at the device width, do not zoom out. Without it, a phone renders at 980px and shrinks the whole page — text becomes unreadable, buttons become un-tappable.

AI tools usually include this by default in their scaffold templates, but some do not. A 5-second check saves hours of mobile-SEO debugging later.

How to use this prompt in v0

1. Open your v0 project.
2. Copy the prompt above with the copy button.
3. Paste into the v0 chat and send.
4. Review the diff, accept the changes, redeploy.
5. Verify the fix using the checklist below.

Common mistakes to avoid

error_outlineShipping `user-scalable=no` — breaks accessibility, Google flags it.
error_outlineUsing `initial-scale=0.5` because "it looks nicer zoomed out" — breaks everything.
error_outlineMissing the viewport tag entirely — 1 minute to add, many rankings to lose.
error_outlineSetting `width=1024` instead of `width=device-width` — forces a fixed width on mobile.

How to verify the fix worked

check_circleView source — the viewport meta tag exists with correct content.
check_circleGoogle Mobile-Friendly Test (https://search.google.com/test/mobile-friendly) — passes.
check_circleChrome DevTools → Device toolbar → iPhone — no horizontal scroll, text readable.
check_circleLighthouse → SEO — "Has a <meta name=viewport> tag" passes.

Frequently asked questions

Can I disable zoom?expand_more

Technically yes, but don't. Zoom is an accessibility feature and Google flags `user-scalable=no` as an issue.

What is initial-scale?expand_more

The initial zoom level. 1 means 100% (normal). Use 1; anything else is usually wrong.

Want all 34 prompts tailored to your v0 site?

Pantra scans your site in 10 seconds, detects the stack, and generates the exact prompts that apply — only the ones you actually need.

Scan my site

Related v0 prompts

Performance