SEO Small

Add a viewport meta tag

The viewport meta tag tells mobile browsers how to scale the page instead of rendering it at desktop width and shrinking everything down. It is a prerequisite for any responsive CSS to actually take effect on a phone, and Google has used mobile-friendliness as a ranking factor for years.

Why it matters

Without a viewport tag, mobile browsers render the page at desktop width and shrink it, making text unreadable and hurting both mobile usability and Google's mobile-first ranking.

How to fix

  1. 1 Add <meta name="viewport" content="width=device-width, initial-scale=1"> to <head>.
  2. 2 Verify the layout responds correctly at common mobile widths.

Common mistakes

  • Adding the tag but setting a fixed width instead of width=device-width, which still forces the same rendering problem it was meant to fix.
  • Setting user-scalable=no or a restrictive maximum-scale, which improves layout consistency but harms accessibility for users who need to zoom.
  • Adding the tag only to some templates (e.g. the homepage) and missing it on others generated by a different code path.

How to verify

  1. 1 View page source and confirm <meta name="viewport" content="width=device-width, initial-scale=1"> is present.
  2. 2 Load the page on an actual mobile device or a browser device emulator and confirm text and layout scale correctly without manual zooming.
  3. 3 Run the page through a mobile-friendliness testing tool to confirm no warnings are raised.

Related checks

Ready to see where you stand?

Scan your site and get your Engineering Score with a prioritized roadmap in under a minute, no signup required.

Scan your site