# Missing page title
> With no , search results and browser tabs fall back to your URL. Add one unique, descriptive title under 60 characters.
_Category: Search visibility · Detector `seo` · Check `title-missing` · Severity: warning_
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.
## 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 detects it
The `seo` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.
- **Issue string:** `Missing page title`
- **Threshold:** document.title is empty
## 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>`
## The fix
Give every route a unique, descriptive `` of roughly 30–60 characters that front-loads the page’s topic. Set it per page — a single site-wide title is almost as bad as none.
### 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
```html
<head>
<title>Invoicing for freelancers — Acme
```
## Framework-specific fixes
### React
React 19 hoists a `` rendered anywhere in your tree into the document head — no helmet library needed. On React 18, use `react-helmet-async`.
_React 19_
```tsx
export function PricingPage() {
return (
<>
<title>Pricing — Acme
{/* page content */}
)
}
```
### 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.tsx_
```tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Pricing — Acme',
}
```
[Next.js docs](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)
### Vue
Set the title reactively with `@unhead/vue`’s `useHead` (built into Nuxt).
```vue
```
[Vue docs](https://unhead.unjs.io/usage/composables/use-head)
### Svelte
Put a `` inside `<svelte:head>` on the page component; it is set per route.
```svelte
<svelte:head>
<title>Pricing — Acme
```
### Vanilla JS
Set the `` in each page’s static `<head>`, or assign `document.title` at runtime for a client-rendered view.
```html
<title>Pricing — Acme
```
## 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.
## Related problems
- [Page title is a framework default](https://vibecheck.wcgw.fun/fix/placeholder-page-title.md) — Search visibility
- [Page title is too long](https://vibecheck.wcgw.fun/fix/title-too-long.md) — Search visibility
- [Missing meta description](https://vibecheck.wcgw.fun/fix/missing-meta-description.md) — Search visibility
- [Missing og:title](https://vibecheck.wcgw.fun/fix/missing-og-title.md) — Search visibility
---
Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-page-title. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt