How to Add a Mobile Viewport Meta Tag
Add the mobile viewport meta tag so pages render responsively on phones — exact steps for WordPress, Wix, Squarespace, Webflow, Shopify and custom sites.
On this page
If ScoutRival’s SEO Score flagged “Add a mobile viewport tag,” it means your pages are missing the small piece of code that makes them render properly on phones — so mobile visitors see a shrunken, hard-to-use desktop layout. Since Google ranks primarily on the mobile version of your site, this matters. It’s a quick fix, usually five minutes, and this guide covers every major platform.
What is the mobile viewport meta tag?
The viewport meta tag is a single line of HTML in the <head> of your page that controls how your content is scaled and sized on different screens. The standard version reads <meta name="viewport" content="width=device-width, initial-scale=1">. In plain terms, it tells the browser: “Match the page width to this device’s screen, and don’t zoom in or out to start.”
Here’s the analogy. Imagine handing someone a large paper map and asking them to read it through a phone-sized window. Without instructions, they’d hold the whole map far away to fit it in the window — technically everything’s visible, but the street names are far too small to read. The viewport tag is the instruction that says “redraw this map to fit the window instead,” so the content is sized for the screen it’s actually on.
Without the tag, mobile browsers assume your page was built for a wide desktop monitor (typically around 980 pixels) and shrink the whole thing to fit the phone — leaving visitors pinching and zooming just to read a sentence. The device-width part ties the layout to the real screen width, and initial-scale=1 starts the page at normal zoom. Together they let your responsive design actually respond. In one sentence: the viewport meta tag makes a page render at the device’s own width so it displays correctly on phones and tablets rather than as a zoomed-out desktop layout.
Why it matters for your SEO
This is a bigger deal than its one line of code suggests, because Google uses mobile-first indexing — it looks at the mobile version of your site to decide how you rank. Missing the viewport tag causes real damage:
- You fail the mobile-friendly test. A page without the tag is treated as not mobile-friendly, which is a negative signal for mobile rankings — where most searches now happen.
- Visitors bounce. A shrunken, unreadable layout on a phone sends people straight back to the search results. High bounce and low engagement work against you.
- Core Web Vitals suffer. Non-responsive pages tend to score worse on the real-user experience metrics Google measures, compounding the ranking hit.
ScoutRival’s SEO Score checks whether each page includes a viewport meta tag. If it’s missing, the check fails as a medium-severity technical issue — and the one-line fix below clears it.
How to check if you have this problem
Two quick ways to check, in under a minute:
The instant visual check: open your site on your phone (or resize your desktop browser window to a narrow, phone-width column). If the layout reflows to fit — readable text, tappable buttons — you likely have the tag. If everything looks like a tiny, zoomed-out version of the desktop site, the tag is probably missing.
The definitive check: on desktop, open the page, right-click and choose View Page Source (or press Ctrl+U / Cmd+Option+U), then use Ctrl+F to search the code for viewport.
- You find
<meta name="viewport" content="width=device-width, initial-scale=1">→ you’re set. - No match at all → that’s the problem this guide fixes.
Google’s own Mobile-Friendly and Lighthouse tools will also flag a missing viewport tag, and your ScoutRival SEO Score checks it automatically across every page.
How to fix it — step by step
The exact tag you’re adding is:
<meta name="viewport" content="width=device-width, initial-scale=1">
It belongs inside the <head> of every page. Pick your platform below.
WordPress
Virtually every modern WordPress theme includes the viewport tag automatically, so first confirm it’s genuinely missing (View Page Source → search for viewport). If it is missing — usually because of an old theme or a custom build — add it:
- The safest way is a small snippet plugin like WPCode (formerly Insert Headers and Footers) or your theme’s built-in header scripts area. Go to the plugin’s settings and find the Header /
<head>section. - Paste the viewport tag there and save. It will be injected into the
<head>of every page. - If your theme hard-codes its own
<head>inheader.php, add the tag there instead — but a snippet plugin is safer and survives theme updates. - Consider switching to an actively maintained, responsive theme if yours is old enough to lack this tag entirely.
Wix
Wix sites are responsive and include the viewport tag automatically — you don’t add it manually:
- There’s no viewport setting to toggle; Wix handles mobile rendering for you.
- Instead, focus on the mobile editor: open the mobile view (the phone icon at the top of the editor) and adjust how your sections stack, hide, or resize on small screens.
- Publish. If a page still looks off on mobile, the fix is in the mobile editor layout, not a missing viewport tag.
Squarespace
All Squarespace templates are responsive and include the viewport tag by default:
- You don’t need to add or edit the tag — it’s built into every template.
- To improve the mobile experience, preview your site in the mobile view (the device toggle in the editor) and adjust spacing, image sizes and section settings for small screens.
- If mobile display looks wrong, check for any custom code you’ve injected that might override responsive behaviour, rather than looking for a missing viewport tag.
Webflow
Webflow adds the viewport tag to published sites automatically:
- The tag is included by default — you don’t insert it manually.
- Use the responsive breakpoints (the device icons at the top of the Designer: desktop, tablet, mobile landscape, mobile portrait) to fine-tune your layout at each screen size.
- Publish. If you’ve added a custom
<head>code in project settings, make sure you haven’t accidentally removed or overridden the viewport tag.
Shopify
Shopify’s themes are responsive and include the viewport tag in the theme layout:
- Modern Shopify themes already have it — confirm with View Page Source first.
- If you use a heavily customised or very old theme and the tag is missing, go to Online Store → Themes → Edit code, open
layout/theme.liquid, and make sure the<head>contains the viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Save. If you’re not comfortable editing theme code, updating to a current theme from the Shopify Theme Store restores it cleanly.
Any other website (custom or unlisted CMS)
If you hand-code your site or use a builder not listed above, add the tag to your base template’s <head>:
- Open the file that renders your page’s
<head>— oftenindex.html, a sharedlayoutfile, or your framework’s root template. - Inside the
<head>section, add the viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Save and re-publish. Because it lives in the shared
<head>, one edit usually covers every page. - Finally, make sure your CSS is actually responsive — remove fixed pixel widths (like
width: 980px) on containers that block the layout from adapting. The viewport tag enables responsiveness, but your CSS has to cooperate.
How to confirm it’s fixed
- Reload the page and open View Page Source again — searching for
viewportshould now find the tag inside the<head>. - Open the page on an actual phone (or resize your browser to a narrow width): text should be readable, buttons tappable, and no horizontal scrolling.
- Run Google’s Mobile-Friendly Test or a Lighthouse audit — the missing-viewport warning should be gone.
- Re-run your ScoutRival SEO audit. The “Add a mobile viewport tag” item should now pass, and your Technical & Performance pillar score should tick up.
Common mistakes to avoid
- Disabling zoom. Avoid adding
user-scalable=noormaximum-scale=1— it stops visitors pinch-zooming, which is a real accessibility problem. Stick to the standardwidth=device-width, initial-scale=1. - Putting the tag outside the
<head>. A viewport tag in the page body is ignored. It must live inside<head>. - Adding the tag but keeping fixed-width CSS. The tag alone won’t fix a layout hard-coded to a desktop pixel width. Make sure your styles are fluid.
- Adding it twice. If your theme already includes the tag, don’t paste a second one — a single, standard viewport tag is all you need.
- Testing only on desktop. Always verify on a real phone or an accurate mobile emulator; a page can look fine full-width and still break on a small screen.
The bottom line
The mobile viewport meta tag is a single line of code, but it’s the switch that turns a shrunken, unusable phone experience into a proper responsive one — and with Google indexing mobile-first, that directly affects your rankings. Confirm whether your theme already includes it, add the one standard tag to your <head> if it doesn’t, test on a phone, and you’ve cleared another important technical item off your SEO checklist.
Want to see every page that’s failing mobile checks alongside your other fixes? Run a free SEO Score with ScoutRival for a prioritised, plain-English to-do list for your whole site. Mobile experience and speed go hand in hand — our guide on how to improve Core Web Vitals is the natural next step.
Frequently asked questions
What is the mobile viewport meta tag?
Where do I put the viewport meta tag?
What does "width=device-width, initial-scale=1" mean?
Does my website builder already have the viewport tag?
How does the viewport tag affect SEO?
Should I use "user-scalable=no" to lock zoom?
Why does my site still look bad on mobile after adding the tag?
Nasir Uddin is an SEO consultant and ScoutRival's SEO & Growth Lead. He's spent years helping small businesses climb the search results — and now the AI answers too — and writes about SEO, AI-search visibility, and turning organic traffic into real growth.
Keep reading
All SEO →
Stop reading about it. Ship it this week.
ScoutRival turns competitor intel into ready-to-post content and graphics — for a fraction of an agency.