How to fix title too long on Next.js (Headless)

Steps for Next.js (Headless)

1. Locate every page that sets a `<title>` — in the App Router this means any `generateMetadata()` export or a static `metadata` object; in the Pages Router it means any `<Head>` block using `next/head`.
2. Create a shared utility (e.g. `lib/seo.ts`) that accepts a raw title string and hard-truncates it to 60 characters, appending an ellipsis only when the string is actually trimmed, so you never silently lose context.
3. Replace every raw title string in `generateMetadata()` / static `metadata` objects (App Router) or `<title>` tags (Pages Router) with a call to `truncateTitle()`.
4. For dynamic pages (products, collections, blog posts) that derive their title from an API/CMS, pipe the fetched title through `truncateTitle()` before passing it to `metadata.title`.
5. Run `next build` and verify via the build output or a `<head>` inspection that no rendered `<title>` exceeds 60 characters.
6. Optionally write a Jest/Vitest unit test for `truncateTitle()` to prevent regressions when copy is updated.

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.