How to add the viewport meta tag
Without a viewport tag, phones render the page at desktop width and shrink it. Google indexes that shrunken desktop layout as your mobile page.
Step by step, with screenshots: Responsive font size: readable text on phones with rem and clamp() →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
Or run only this check with the free Mobile-friendly test + CSP generator or the free Meta tag checker.
What it is
The viewport meta tag, <meta name="viewport" content="width=device-width, initial-scale=1">, tells phones to lay the page out at the width of the screen instead of at a desktop width. Without it, mobile browsers render the page about 980 px wide and shrink it, so text is tiny and people have to pinch and zoom.
Google indexes the mobile version of every site, so a page without a viewport tag is judged on that shrunken layout. Responsive CSS media queries also do nothing without it, because the phone pretends to be a desktop screen.
OK looks like this: one viewport tag in the head with width=device-width and initial-scale=1, and no maximum-scale=1 or user-scalable=no that would block zooming. getReport fails the page when the tag is missing.
What a passing site looks like
- Viewport meta tag is presentfail · −6 ptseffort S
Viewport meta tag is missing
Why it matters. Without a viewport tag, phones render the page at desktop width and shrink it. Google indexes the mobile version first, so this hurts rankings directly.
- Add <meta name="viewport" content="width=device-width, initial-scale=1"> in <head>.
In a report the technical detail reads: Detected 0 <meta name="viewport"> elements.
Questions people ask
What is a viewport meta tag?
It is a meta tag in the head of a page that tells mobile browsers how wide to lay out the page and how far to zoom at first. The standard version is <meta name="viewport" content="width=device-width, initial-scale=1">, which makes the layout match the screen width so responsive CSS works.
What does the viewport meta tag do?
It stops phones from pretending to be a desktop screen. Without it, a mobile browser renders the page around 980 px wide and scales it down; with width=device-width, the layout uses the phone's real width, text stays readable and your CSS breakpoints take effect.
How do you add the viewport meta tag in WordPress?
Almost every current WordPress theme already prints it in header.php. If yours does not, add the tag through your theme's header settings, a child theme's header.php, or a plugin that inserts code into the head. SEO plugins such as Yoast do not add it; the theme is responsible.
Why is my viewport meta tag not working?
Usually the tag is inside the body instead of the head, is misspelled, or appears twice with different values. Fixed-width elements wider than the screen also make the page look zoomed out even with a correct tag. Keep one tag in the head and give wide elements max-width: 100%.