How to fix title too long on Next.js

Steps for Next.js

1. Audit every page's title: search your codebase for `title:` inside `generateMetadata` (App Router) or `<title>` inside `<Head>` (Pages Router) and list any that exceed 60 characters.
2. Create a shared utility helper `lib/seo.ts` that trims any title to ≤60 characters at the nearest word boundary — use this everywhere titles are composed.
3. App Router (`app/**/page.tsx`): update each `generateMetadata` export to pipe its title string through the helper before returning it.
4. Pages Router (`pages/*/.tsx`): update each `<Head><title>` or `defaultTitle` in `next/head` to pipe through the same helper.
5. For dynamic routes (e.g. product/category pages), ensure the fetched name/brand combination is truncated before interpolation so the full string — including separators like ` | Brand` — still fits within 60 chars.
6. Run `next build` and spot-check titles in the generated HTML (`curl` the page or open DevTools) to confirm no title exceeds 60 characters.

What is title too long?

Every web page has a title tag — a short line of HTML that tells search engines and browsers what the page is about. It's the large blue (or purple) clickable headline you see in Google search results. When your title is too long, Google cuts it off mid-sentence and adds "…" at the end. Google's practical display limit is roughly 600 pixels wide, which corresponds to about 50–60 characters in a typical font. Keeping titles within that range ensures shoppers and Google see your full intended message.

A truncated title in search results looks incomplete and unprofessional, which directly reduces click-through rates — and fewer clicks means less organic traffic and revenue, even if you rank well. Google also uses the title as a primary signal for what the page is about; an overstuffed, cut-off title can dilute your target keywords and make it harder to rank for any single term. In some cases, Google will silently rewrite a title it considers too long or spammy, replacing it with text of its own choosing that may not align with your brand or target keywords at all. Fixing title length is a quick win that immediately improves both your rankings and the first impression shoppers have of your store.

See the complete Title too long guide for every platform and the full background.