vibecheck0.3.0
Search visibilityseotitle-too-longwarning

Page title is too long in Vue

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.

Framework fixes
GeneralReactNext.jsVueSvelte

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 catches it

In your widget · Problems

warningseoPage title is too long

To your coding agent · MCP

agent › get_detected_issues
→ { detector: "seo", issue: "Page title is too long", threshold: "<title> longer than 60 characters (TITLE_MAX)" }

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

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

See the general, framework-agnostic fix →

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.