---
title: "Add a meta viewport tag"
description: "The viewport meta tag tells mobile browsers to use the device width. Without it, pages render at a virtual desktop width and text becomes unreadable. Add width=device-width, initial-scale=1, do not disable zoom, and verify the tag is in the server response."
url: "https://seo-mcp.io/t/add-a-meta-viewport-tag"
---

# Add a meta viewport tag

The viewport meta tag tells mobile browsers to use the device width. Without it, pages render at a virtual desktop width and text becomes unreadable. Add width=device-width, initial-scale=1, do not disable zoom, and verify the tag is in the server response.

## Prerequisites

- Access to the root layout or head template

## Steps

1. **Add the tag to the root layout** — Insert a meta name=viewport tag with width=device-width, initial-scale=1 in the head. Remove any maximum-scale or user-scalable restrictions.
   Check: The layout source contains the viewport meta tag and no user-scalable=no.
2. **Confirm it ships in the response** — Fetch production HTML and search the head. Frameworks that inject head tags client-side will fail this check.
   Check: curl -s your production domain/ | grep -c 'name="viewport"' returns 1.
3. **Check the mobile rendering** *(general best practice)* — Open the page at a 390-pixel viewport and confirm text is readable without zooming and no horizontal scroll appears.
   Check: document.documentElement.scrollWidth is less than or equal to 390 at a 390-pixel viewport.

## Source

@seo-mcp on 2026-10-19: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing

Canonical: https://seo-mcp.io/t/add-a-meta-viewport-tag