Multiple Viewport Tags: How to Fix Conflicting Tags
- September 16, 2019
- HTML Structure, Viewport
Your page ships more than one <meta name="viewport"> tag, which hands mobile browsers conflicting instructions on how to scale the layout. Delete the extras and keep exactly one correct viewport declaration in the <head>.
What this check flags — and why it matters
The viewport meta tag tells a mobile browser how wide to treat the page and what zoom to start at, before it renders a single pixel. It is the one line that makes responsive design work on phones. This check fires when the crawler finds more than one viewport <meta> in a single page’s head. Only one is ever needed, and when two disagree the browser has to pick a winner — a choice you do not control reliably, which is how you end up with a layout that renders correctly on your phone and broken on someone else’s.
Why duplicates cause inconsistent rendering
A viewport tag is a direct rendering instruction, not advisory metadata like a description. When a browser hits two viewport tags with different content values, some engines honour the first, others apply the last and override what came before — and behaviour can differ across engines and even versions. The result is a page whose mobile scaling depends on which browser the visitor happens to use. That’s a real problem: mobile-first indexing means the version Google evaluates is the mobile one.
A real failing example
This is the classic collision — the theme prints one viewport tag, a plugin injects a second with different values:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
...
<meta name="viewport" content="width=1024">
</head>The first tag says “match the device and start at 100% zoom.” The second says “pretend the screen is 1024px wide.” A phone getting the second one renders the page zoomed out and unreadable. The fix is to remove the duplicate and leave one correct tag:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>One tag, one instruction, identical rendering everywhere. The tricky part is usually not writing the correct tag — it is finding which of your components printed the second one.
Where the duplicate usually comes from
| Source | How it sneaks in | Where to look |
|---|---|---|
| Theme header | Hard-coded viewport in header.php | Theme header template |
| Page builder | Builder adds its own on top of the theme’s | Builder global / head settings |
| SEO / head plugin | “Insert into head” field left populated | Plugin head-injection setting |
| Child theme | Re-declares the parent’s tag | Child header override |
| AMP / cache layer | Adds a viewport for its own rendering path | AMP or optimisation plugin |
How to detect it
- Screaming Frog — crawl the site and use a custom extraction with the XPath
//meta[@name='viewport']. Any URL returning two or more matches has a duplicate. This is the fastest way to find it site-wide. - Lighthouse — run the mobile audit; viewport problems surface under the SEO and accessibility categories, flagging pages where scaling instructions are off.
- View Source — open the raw HTML (Ctrl/Cmd+U) and search for
viewport. If it appears more than once in the<head>, that is the failure, plain as day. - DevTools Elements / axe — expand the
<head>in the Elements panel and count the viewport tags, or run axe DevTools, which reports duplicate viewport declarations.
How to fix it: keep exactly one
- Identify every source printing a viewport tag — use the table above as a checklist.
- Decide which one is authoritative. In WordPress, the theme header is usually the right home for it.
- Remove the duplicate at its source. Do not just tweak the second tag’s value — delete it so only one remains.
- Confirm the surviving tag is correct:
content="width=device-width, initial-scale=1". - Re-crawl or view source to verify exactly one viewport tag ships per page.
Do not solve a duplicate by removing the tag entirely — a page with no viewport tag has its own problem, where mobile browsers assume a desktop-width canvas.
Common mistakes
- Deleting both. Removing the duplicate and the original leaves the page with no viewport control at all. Keep one.
- Editing the wrong one. Fixing the value on the plugin tag while the theme still prints its own leaves you with two again. Remove, don’t edit.
- Locking zoom to hide the mess. Adding
maximum-scale=1oruser-scalable=noto force consistency breaks pinch-zoom and creates an accessibility failure. Fix the duplicate instead.
FAQ
Which viewport tag does the browser actually use?
There is no reliable answer — that is the whole problem. Some engines take the first, some the last, and it can vary by version. The only way to control the outcome is to ship exactly one tag.
Is this a high-priority fix?
Yes, when the two tags disagree. Conflicting scaling directly affects how mobile users and Google’s mobile crawler see the page. See mobile-first indexing verification for why the mobile render matters so much.
What’s the correct viewport value?
width=device-width, initial-scale=1 covers the vast majority of responsive sites. Avoid fixed widths and avoid disabling zoom. If yours is missing the width part, that’s a separate issue — see viewport missing width.
Could two identical viewport tags still fail?
The check flags more than one tag regardless of whether the values match — duplicates are messy and signal a config problem worth cleaning up. Remove the redundant one even if they happen to agree today.
What if a tag disables scaling?
That’s a related but distinct accessibility failure. Blocking pinch-zoom locks out low-vision users. See viewport meta tag prevents user scaling.
Need a full technical audit?
SEO ProCheck runs deep crawls that catch issues like this across your whole site.
Claude Vincent is a technical SEO consultant focused on crawlability, rendering, and AI-search visibility. He writes the field guides and case studies at SEO ProCheck, with a bias toward the durable, unglamorous work that decides whether search engines and AI answer engines can actually read and cite a site.
About SEO ProCheck
Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.
Work With Me
Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.
Subscribe to our newsletter!
