meta error meta/viewport

Viewport Meta Tag SEO Rule

Ensure the viewport meta tag is correctly configured for mobile-first indexing and responsive design

What This Rule Checks

Validates the viewport meta tag exists, includes width=device-width and initial-scale=1, detects multiple viewport tags, and flags user zoom restrictions (maximum-scale=1 or user-scalable=no).

Why It Matters for SEO & GEO

The viewport meta tag is essential for mobile rendering. Without it, mobile devices display desktop layouts, hurting user experience and mobile-first indexing.

How to Fix

Add a viewport meta tag with width=device-width and initial-scale=1. Remove maximum-scale=1 and user-scalable=no to allow user zooming for accessibility.

Examples

Bad

<meta name="viewport" content="width=1024">

Good

<meta name="viewport" content="width=device-width, initial-scale=1">

How VibeLinter Checks Viewport Meta Tags

VibeLinter’s meta/viewport rule performs these checks on every page:

  1. Existence — Errors when no viewport meta tag is found (required for mobile optimization)
  2. Multiple tags — Warns about multiple viewport meta tags on the same page
  3. Empty content — Reports viewport tags with empty content attributes
  4. width=device-width — Warns if the viewport does not include width=device-width
  5. initial-scale=1 — Warns if the viewport does not include initial-scale=1
  6. Zoom restrictions — Warns when maximum-scale=1 or user-scalable=no is found (accessibility issue)

Configuration

// vibelinter.config.cjs
module.exports = {
  rules: {
    'meta/viewport': {
      enabled: true,
      severity: 'error'
    }
  }
}

SEO Impact

Proper viewport configuration affects:

  • Mobile-first indexing — Google primarily uses mobile content for indexing and ranking
  • Mobile usability — Correct viewport ensures content fits mobile screens properly
  • Core Web Vitals — Poor mobile rendering impacts CLS and user experience metrics
  • GEO (Generative Engine Optimization) — Mobile-optimized pages are more likely to be surfaced by AI search assistants, which prioritize well-formatted, accessible content

Related SEO Topics

viewport meta tag SEOmobile-first indexingresponsive design viewportwidth device-width settingmobile optimization metaviewport accessibility check

Related Rules

References