Technical
How to fix a missing mobile viewport tag
Without a viewport tag, a phone draws your page at desktop width and then shrinks the whole thing to fit. Text comes out too small to read, taps land on the wrong link, and Google indexes the mobile version of your site, so this is the version that counts.
What it is
Why it costs you
How to fix it
Add this to the <head> of every page: <meta name="viewport" content="width=device-width, initial-scale=1">
- WordPress / Shopify / Webflow: their themes ship with it; if it is missing, you are on a custom template. Add the line to the header file (
header.php,theme.liquid, or the head-embed field). - Hand-coded: add the line to your shared head partial so every page gets it.
How to check your site
View source and look for name="viewport". On your phone, if the page loads zoomed out with tiny text, the tag is missing or wrong. Google’s Mobile-Friendly Test confirms it.
What this looks like in practice
A one-page hand-coded site looked fine on the founder’s laptop and unusable on a phone. Adding the single viewport line fixed the layout on every device at once.
Questions people ask
- The tag is there but the page still is not mobile-friendly.
- The tag is necessary, not sufficient. You also need a layout that uses relative widths rather than fixed pixels. See the mobile-friendly check.
- Should initial-scale be anything other than 1?
- No.
width=device-width, initial-scale=1is the standard; avoid disabling zoom, which hurts accessibility.
Does your site have this?
Check your site to see which pages phones cannot render properly.
See also
- How to improve your Core Web VitalsGoogle watches how quickly your page becomes usable and how much it shifts around as it loads, and it feeds that into ranking. The more direct problem is simpler: a slow page loses readers before they see anything at all.
- How to fix a missing character encodingThese pages do not declare a character set, so the browser guesses. When it guesses wrong, accented characters and quotation marks come out as garbage.
- How to make your pages mobile-friendlyThese pages fix their layout to a desktop width in pixels. On a phone that means horizontal scrolling and tiny text, and since Google ranks what it sees on mobile, it is the version that counts.
- How to fix content that only appears after JavaScriptMost of the text on these pages only appears after JavaScript runs. Search engines do render JavaScript, but later and less reliably, so content that is not in the HTML your server sends may never be indexed.