What is the viewport meta tag?
The viewport meta tag tells mobile browsers how wide the page's layout area should be and how to scale it. The standard version is <meta name="viewport" content="width=device-width, initial-scale=1">, and it belongs in the <head> of every page.
Without it, phone browsers assume the page was designed for a desktop screen, lay it out at roughly 980 pixels wide, and shrink the whole thing to fit. Text becomes tiny and visitors have to pinch and zoom. Your responsive CSS media queries never apply because the browser thinks the screen is wide.
How it works
width=device-width sets the layout viewport to the device's width in CSS pixels, so a phone that is 390 CSS pixels wide gets a 390-pixel layout. initial-scale=1 sets the zoom level to 100 percent when the page loads.
With the viewport set, media queries like @media (max-width: 600px) fire as intended and a responsive design adapts to the screen. Google crawls primarily as a smartphone under mobile-first indexing, so a page without a viewport tag is evaluated as a hard-to-use mobile page. Lighthouse flags the missing tag, and it also affects tap delay on some browsers.
Example
The standard tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
A version to avoid:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
user-scalable=no and a maximum-scale below 5 stop people from zooming, which fails accessibility guidelines for users with low vision. Modern iOS Safari ignores user-scalable=no for this reason, but other browsers honor it.
In WordPress
Nearly every modern WordPress theme includes the viewport tag in its header, and block themes add it automatically. It goes missing on very old themes, custom-coded templates, and some landing page tools that output their own <head>. View the page source on a live page and search for viewport to confirm. The hydrogenseo.com bulk audit reports pages without it, and Hydrogen SEO's site health score has a mobile area; see site health score.
Common mistakes
- Leaving the tag out on custom or legacy templates.
- Disabling zoom with
user-scalable=noormaximum-scale=1. - Fixed widths like
width=1024, which defeat responsive design. - Adding the tag to a non-responsive layout, which makes a desktop design overflow the screen instead of shrinking.
Common questions
Is the viewport meta tag a ranking factor?
Not on its own. It is needed for a page to work on phones, and mobile usability affects how users and Google's smartphone crawler experience the page.
Where should the viewport tag go?
In the head of every HTML page, typically right after the charset declaration.