vibecheck0.3.0
Search visibilityseotitle-missingwarning

Missing page title in Next.js

The <title> is the single strongest on-page ranking signal and the clickable headline in every search result. With none, Google shows your raw URL and browser tabs show a fragment of the address. AI scaffolds generate the app body but leave the document <head> alone, so the title never gets set for real routes.

Framework fixes
GeneralReactNext.jsVueSvelteVanilla JS

Symptoms

  • Search results show the URL instead of a headline
  • Browser tabs display the domain or “localhost” with no name
  • Shared links and bookmarks have no readable label
  • Lighthouse reports “Document does not have a <title> element”

How VibeCheck catches it

In your widget · Problems

warningseoMissing page title

To your coding agent · MCP

agent › get_detected_issues
→ { detector: "seo", issue: "Missing page title", threshold: "document.title is empty" }

The same string in your widget and in your agent’s context — no screenshot, no copy-paste.

Root causes

  • The head is never managed — the app only renders into <body>
  • A per-route title was planned but never wired to a head manager or metadata API
  • The base HTML template shipped with an empty <title></title>

The fix for Next.js

Use the App Router Metadata API. Export a static metadata object, or generateMetadata for dynamic routes; a title template in the root layout keeps branding consistent.

app/pricing/page.tsxtsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Pricing — Acme',
}

Next.js docs →

Steps

  1. Decide a unique, keyword-led title for the route
  2. Set it via your framework’s head/metadata mechanism
  3. Verify it appears in the browser tab and in view-source

See the general, framework-agnostic fix →

FAQ

How long should a page title be?
Aim for 30–60 characters. Google truncates around 60, so keep the important keywords first and the brand name last.
Should every page have a different title?
Yes. Duplicate titles across routes confuse search engines about which page to rank. Give each route a title that reflects its unique content.
Where should the brand name go?
At the end, after a separator: “Pricing — Acme”. Front-load the page-specific keywords because the end is what gets truncated.