# Page title is too long

> Google truncates titles past ~60 characters, hiding the end in search results. Trim your <title> so the whole headline shows.

_Category: Search visibility · Detector `seo` · Check `title-too-long` · Severity: warning_

Google truncates the visible title in search results at roughly 60 characters (about 600 pixels), so anything past that is replaced with an ellipsis. A long, keyword-stuffed title buries your call to action where nobody sees it. Auto-generated titles that append the full site name and section path overflow this budget constantly.

## Symptoms

- Search snippets end in “…” mid-phrase
- The most important words sit past the cut-off
- Titles read like breadcrumbs: “Section · Subsection · Page · Brand · Tagline”

## 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 too long`
- **Threshold:** <title> longer than 60 characters (TITLE_MAX)

## Root causes

- A title template concatenates page + section + brand + tagline
- Keyword stuffing to “cover” more search terms
- The brand name is long and repeated in every title

## The fix

Keep titles at or under 60 characters. Lead with the unique, page-specific phrase and keep the brand suffix short. Drop redundant separators and section names that add length without meaning.

### Steps

1. Count the characters in your rendered title
2. Cut section/tagline noise and front-load the topic keywords
3. Re-check that it renders under 60 characters

_Before (74 chars) → after (28 chars)_

```html
<!-- too long -->
<title>Pricing Plans and Packages · Products · Acme Software Inc. · Home</title>

<!-- trimmed -->
<title>Pricing — Acme</title>
```

## Framework-specific fixes

### React

Render a concise `<title>` directly (React 19). Compute it so it can’t exceed your budget.

```tsx
<title>{`${page} — Acme`}</title>
```

### Next.js

Use a title template in the root layout so each page only supplies the short, unique part and the brand suffix is added once.

_app/layout.tsx — template; pages set only the leaf_

```tsx
export const metadata: Metadata = {
  title: {
    template: '%s — Acme',
    default: 'Acme',
  },
}
// app/pricing/page.tsx → title: 'Pricing' renders "Pricing — Acme"
```

[Next.js docs](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#title)

### Vue

Use `@unhead/vue` with a `titleTemplate` so the brand suffix is centralised.

```ts
useHead({
  title: 'Pricing',
  titleTemplate: (t) => (t ? `${t} — Acme` : 'Acme'),
})
```

### Svelte

Keep the `<svelte:head>` title short; centralise the brand suffix in your layout.

```svelte
<svelte:head>
  <title>Pricing — Acme</title>
</svelte:head>
```

## FAQ

### What is the exact title length limit?

Google renders titles by pixel width (~600px), which is about 60 characters for average text. VibeCheck flags anything over 60 characters.

### Does a long title hurt ranking or just display?

Mostly display — the truncated part still counts a little, but the practical harm is a weaker, cut-off headline that lowers click-through. Keep it readable.

## 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 a framework default](https://vibecheck.wcgw.fun/fix/placeholder-page-title.md) — Search visibility
- [Meta description is too long](https://vibecheck.wcgw.fun/fix/meta-description-too-long.md) — Search visibility

---

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