Missing Viewport Meta Tag: How to Fix It

Missing viewport meta tag: why your page looks tiny on phones

A missing viewport meta tag means the page does not tell mobile browsers how wide to render it, so phones fall back to a virtual desktop-width screen and shrink everything to fit. Text becomes unreadably small and visitors have to pinch and zoom. The fix is one line in the page's head: <meta name="viewport" content="width=device-width, initial-scale=1">.

This is rated critical because Google indexes the mobile version of pages, and most visitors on most sites use phones. A page without a viewport tag is not mobile-friendly, however responsive its CSS is: without the tag, the CSS media queries never see the phone's real width.

Updated September 30, 2026By the Hydrogen SEO team

What it looks like in the HTML

Before

html

<head>
  <meta charset="UTF-8">
  <title>Cold Brew at Home | Bean Notes</title>
</head>

After

html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cold Brew at Home | Bean Notes</title>
</head>

Why it matters

Mobile browsers assume a page without a viewport tag was designed for desktops, and render it on a layout roughly 980 pixels wide before scaling it down to the screen. Your responsive CSS, the breakpoints that stack columns and enlarge text on small screens, never kicks in, because as far as the browser is concerned the screen is wide.

Google uses mobile-first indexing, crawling and evaluating the mobile version of your pages. A page that is painful to use on a phone is a worse result for mobile searchers, and visitors who land on it tend to leave.

Why WordPress pages lose it

Nearly every modern WordPress theme includes the viewport tag, so a missing one usually points to something specific:

An old or hand-built theme with a header.php written before responsive design was standard.
A custom template that prints its own head. Landing page templates, coming-soon and maintenance plugins, and hand-coded HTML pages sometimes skip it.
A child theme that overrides header.php and dropped the line while making other changes.
Headless front ends that do not add it themselves.

How to fix it in WordPress

Confirm it is missing. View source and search for name="viewport". If it is on some pages and not others, the problem is a specific template.
Add it to the theme's head. In a classic theme, open your child theme's header.php and add the tag inside <head>, before wp_head(). If you do not have a child theme, create one first so updates do not remove your change.
Or add it with a small snippet. In a child theme's functions.php or a code snippets plugin:

php

add_action( 'wp_head', function () {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1">' . "\n";
}, 1 );

Only do this if the theme truly does not print one, or you will have two. 4. Fix custom templates and plugins. If a maintenance-mode or landing page plugin prints its own head, check its settings, or contact its developer. 5. Do not disable zoom. Avoid maximum-scale=1 or user-scalable=no. They stop people with low vision from zooming in, and most mobile browsers ignore them anyway.

Hydrogen SEO does not print a viewport tag; that is the theme's job. The Mobile area of its site health score will show whether mobile problems remain.

How to check the fix

View source and confirm there is exactly one viewport tag. Then open the page on a phone, or in your browser's developer tools device mode, and check that text is readable without zooming and nothing scrolls sideways. Run Lighthouse in Chrome DevTools for a mobile check, and rerun the free SEO audit on the URL.

Common questions

What is the correct viewport meta tag?

For almost every site: <meta name="viewport" content="width=device-width, initial-scale=1">. It tells the browser to use the device's real width and start at normal zoom.

Is a responsive theme enough without a viewport tag?

No. Without the tag, mobile browsers render at a desktop width, so the theme's responsive CSS breakpoints never apply.

Does the viewport tag affect Google rankings?

Google evaluates the mobile version of pages, and a page that is not usable on phones is a poor result for mobile searchers. The tag is a basic requirement for a mobile-friendly page.