Rule: viewport-meta
The viewport meta tag controls how your page renders on mobile devices. Without it, mobile browsers render the page at a desktop width (typically 980px) and zoom out to fit the screen. The result: tiny, unreadable text that users must pinch-zoom. Since Google uses mobile-first indexing, a page without a proper viewport is penalized in rankings.
What it checks
Indxel checks for a <meta name="viewport" content="..."> tag in the HTML head. The rule passes if the tag exists with any non-empty content value. It does not validate the specific viewport values (width, initial-scale) — only presence. The standard value is width=device-width, initial-scale=1.
Thresholds
Viewport meta tag exists with non-empty content
Viewport meta tag is missing
Edge cases
Next.js automatically adds the viewport meta tag. You should never see this warning in a standard Next.js project unless you've overridden the default head.
Next.js 14+ uses the viewport export instead of putting viewport in metadata. Example: export const viewport: Viewport = { width: 'device-width', initialScale: 1 }.
Custom HTML projects or static site generators may not include viewport by default. Always add it manually to your HTML template.
A viewport with user-scalable=no prevents users from zooming. This fails accessibility guidelines (WCAG 1.4.4) but does not affect this Indxel rule.
Configuration
// indxel.config.ts
import { defineSEO } from "indxel";
export default defineSEO({
rules: {
"viewport-meta": true, // enabled by default
},
});
// Next.js 14+ viewport export:
// app/layout.tsx
import type { Viewport } from "next";
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
};Frequently asked questions
Why doesn't Indxel check the viewport content value?
The standard value (width=device-width, initial-scale=1) is used by 99%+ of responsive sites. Checking only for presence keeps the rule simple and avoids false positives from legitimate custom viewport values.
Does viewport affect SEO?
Yes, indirectly. Google uses mobile-first indexing, meaning it evaluates the mobile version of your page for ranking. Without a proper viewport, your page fails Google's mobile-friendly test, which negatively impacts rankings.