# Page title is too long in Vue

> How to fix page title is too long in Vue — with the exact fix and copy-paste code.

_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.

## The fix for Vue

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

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

### 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

## 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)

## 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.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/title-too-long.md

---

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