A missing viewport meta tag means the page does not tell mobile browsers how wide to lay it out. Phones then render it as a desktop page around 980 pixels wide and shrink it to fit, so text is tiny and visitors have to pinch and zoom. Google indexes the mobile version of your site, so this affects how every page is judged. The fix is one line in the <head> of your base template.
What the viewport meta tag does
The tag sits in the <head> and sets the layout width to the device's width:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-widthmakes the page as wide as the screen, so your responsive CSS and media queries work.initial-scale=1shows the page at 100% zoom when it loads.
Without it, mobile browsers assume the page was built for desktop:
<head>
<title>Trail running shoes</title>
<!-- no viewport tag: phones render at desktop width and zoom out -->
</head>
Why it matters
- Mobile-first indexing. Google crawls and indexes the mobile version of pages. A page that renders as a shrunken desktop layout gives Googlebot the same poor experience a visitor gets.
- Responsive CSS stops working. Media queries depend on the viewport width. Without the tag, a phone reports a desktop width and your mobile styles never apply.
- Visitors leave. Tiny text and links too close together make the page hard to use, and mobile visitors are often the majority.
- Taps feel slow. Without
widthand aninitial-scaleof at least 1, mobile browsers can delay taps by up to 300 milliseconds. Lighthouse flags this in the Optimize viewport for mobile insight, formerly the viewport audit.
Why it happens
- Old templates built before responsive design.
- Custom page templates, landing pages and email style pages that skip the base layout.
- A broken
<head>after a theme change, where the tag was in a file that is no longer used. - Pages served by a different system, such as a legacy app or an exported page builder file.
How to find pages without a viewport tag
- Check a single page. View the source and search for
name="viewport". Or open Chrome DevTools, switch to device mode and see whether the page renders zoomed out. - Check Lighthouse. The Optimize viewport for mobile insight in the mobile report flags a missing or incomplete viewport tag.
- Check every page. UpCrawler flags Missing viewport meta on any page whose
<head>has no viewport tag or one with empty content. Because the tag lives in the base template, the flagged pages show which templates skip it.
How to fix it
Add the standard tag to the base template that every page shares, so new pages inherit it automatically:
<meta name="viewport" content="width=device-width, initial-scale=1">
Do not add user-scalable=no or maximum-scale=1. They stop visitors from zooming, which fails accessibility guidance for people who need larger text.
The App Router adds the tag to every page automatically, together with the charset tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Do not write it yourself: a hand-written viewport <meta> in the layout's <head> leaves the page with two tags. To customise it, export a viewport object from a layout or page. Settings such as themeColor and colorScheme belong there too, not in metadata:
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: '#ffffff'
}
If a page is flagged, check for routes served outside the App Router, such as static HTML files in public/.
Block themes get the viewport tag from WordPress core. Classic themes print it themselves in header.php, inside <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
If it is missing, add it there, ideally in a child theme so updates do not remove it. Also check custom page templates that output their own <head> instead of calling get_header().
The tag belongs in layout/theme.liquid, inside <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
All current Shopify themes include it. If a page is flagged, check alternate layouts in the layout folder, such as a custom landing page layout, and add the tag to each one.
Let AI fix it, page by page.
Paste this prompt into AI with your project open. In UpCrawler, every affected page comes with a prompt like this, already filled in with its URL.
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the base template so every route inherits it. Do not disable user scaling.
Common viewport mistakes
A tag that exists but has the wrong content causes the same problems as a missing one:
- A fixed width such as
width=1024forces a desktop layout on every phone. Always usewidth=device-width. - An initial scale other than 1 loads the page zoomed in or out, so visitors see only part of it.
- Blocking zoom with
user-scalable=noormaximum-scale=1takes away a basic accessibility feature. - Content hidden behind the notch. If you add
viewport-fit=coverfor edge to edge designs, pad your layout with theenv(safe-area-inset-*)CSS values so nothing sits under the camera cutout.
Frequently asked questions
What is the correct viewport meta tag?
<meta name="viewport" content="width=device-width, initial-scale=1">. It works for every responsive site and is what Next.js, WordPress block themes and Shopify themes output by default.
Does a missing viewport tag affect rankings?
It affects how your page works on mobile, and Google indexes the mobile version. A page that is hard to use on a phone is a poor result for mobile searchers, so fix it on every template.
Should I disable zoom with user-scalable=no?
No. Blocking zoom stops people with low vision from enlarging text and fails accessibility guidance. Safari on iOS ignores it by default, but other browsers do not, and width=device-width already removes the tap delay it was once used for.
Can I have more than one viewport tag?
Avoid it. Browsers may apply a different one than you expect, so a second tag from a plugin or app can quietly override the correct one. Keep a single tag in the base template, the same rule that applies to canonical tags.
Share it with whoever runs your site’s SEO.
