# Page title is a framework default

> Shipping a default title like “React App” or “Vite App” tells Google your page is an unfinished template. Replace it with a real title.

_Category: Search visibility · Detector `seo` · Check `title-default` · Severity: error_

A title like “React App”, “Vite App”, or “Untitled” is the scaffold’s placeholder — shipping it signals to Google (and to any human) that the page is unfinished. Every search result and browser tab shows the generic string, and identical titles across your whole site collapse your pages into one indistinct blob. This is the most common title mistake in AI-built and starter-template projects.

## Symptoms

- Every tab and search result reads “React App” / “Vite App” / “My App”
- All routes share one identical, generic title
- The title clearly came from create-react-app, Vite, or a starter template

## 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:** `Page title is a framework default`
- **Threshold:** title matches a known placeholder (e.g. 'React App', 'Vite App', 'Untitled')

## Root causes

- The starter template’s default `<title>` in `index.html` was never changed
- The app renders into `<body>` and no route ever overrides the placeholder
- A copied boilerplate carried its original title through

## The fix

Replace the placeholder with a real, descriptive title — set a sensible site-wide default in the base template AND a unique per-route title. Never ship the scaffold’s default string.

### Steps

1. Search the project for the placeholder string (e.g. “React App”)
2. Replace the base template default with your real brand/home title
3. Add unique per-route titles via your framework’s metadata mechanism

_index.html — replace the scaffold default_

```html
<!-- scaffold default -->
<title>Vite + React</title>

<!-- real default -->
<title>Acme — Invoicing for freelancers</title>
```

## Framework-specific fixes

### React

Change the placeholder in `index.html` AND set a real per-view `<title>` (React 19) or via `react-helmet-async`.

_index.html_

```html
<title>Acme — Invoicing for freelancers</title>
```

### Next.js

Set a real `default` in the root layout’s title template so no route can fall back to a placeholder, then give each page its own title.

_app/layout.tsx_

```tsx
export const metadata: Metadata = {
  title: {
    default: 'Acme — Invoicing for freelancers',
    template: '%s — Acme',
  },
}
```

### Vue

Update `index.html` and set per-route titles with `useHead`.

```ts
useHead({ title: 'Acme — Invoicing for freelancers' })
```

### Vanilla JS

Replace the placeholder `<title>` in each HTML entry point with a real, page-specific title.

```html
<title>Acme — Invoicing for freelancers</title>
```

## FAQ

### Which titles does VibeCheck treat as placeholders?

Common scaffold defaults: “untitled”, “document”, “app”, “my site”, “home”, “react app”, “create react app”, “vite app”, “vite + react”, and “next app”.

### Why is this an error and not just a warning?

A placeholder title actively misrepresents the page to search engines and users on every route at once, so it is scored more severely than a merely missing one.

## Related problems

- [Missing page title](https://vibecheck.wcgw.fun/fix/missing-page-title.md) — Search visibility
- [Page title is very short](https://vibecheck.wcgw.fun/fix/title-too-short.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

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/placeholder-page-title. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt
