How to fix meta description too long on Next.js

Shorten your meta description to 150–160 characters so Google displays it in full instead of cutting it off with "…" in search results.

Steps for Next.js

  1. Locate every page file that sets a meta description — these will be either `generateMetadata()` exports (App Router: `app/*/page.tsx`) or `<Head>` components (Pages Router: `pages/*/*.tsx`).
  2. Create a shared helper utility at `lib/seo.ts` that hard-limits any description string to 160 characters, trimming cleanly on a word boundary so no word is split mid-word.
  3. App Router — replace or wrap your existing description value inside `generateMetadata()` with the new `truncateDescription()` helper so the limit is enforced automatically at build/request time.
  4. Pages Router — if you use `next/head`, pass the description through the same `truncateDescription()` helper before rendering the `<meta name='description'>` tag.
  5. For dynamic pages (PDP, PLP, blog) that pull descriptions from a CMS or commerce API, apply `truncateDescription()` to the raw API value before it reaches the metadata object, ensuring no runtime value can exceed the limit.
  6. Run `next build` and audit the output with a meta-tag checker (e.g. browser DevTools → Elements, or a Lighthouse run) to confirm every description is ≤ 160 characters.
Official Next.js documentation ↗

What is meta description too long?

A meta description is the short paragraph of text that appears beneath your page title in Google search results (the "snippet"). It is written in your page's HTML and is meant to entice searchers to click your link. Google recommends keeping it under roughly 160 characters — including spaces and punctuation. When it is longer than that, Google truncates it mid-sentence and replaces the end with an ellipsis (…), which can make your listing look incomplete or unprofessional. Note that Google may also rewrite your description entirely if it decides another passage on the page is more relevant, but providing a well-crafted, correctly-sized description gives you the best chance of controlling what shoppers see.

Your meta description is your free advertising copy in search results — it is often the deciding factor in whether a shopper clicks your link or a competitor's. A truncated description cuts off your call to action, hides key selling points (such as a store location, a brand name, or a promotion), and signals a lack of attention to detail that can erode trust before the visitor even lands on your site. Pages with compelling, complete meta descriptions consistently achieve higher click-through rates (CTR), and higher CTR sends a positive engagement signal that can reinforce your rankings over time. For multilingual and multibyte character sets (Japanese, Chinese, Korean, Arabic, etc.) the character budget can effectively be even shorter because each character is wider — aim for 70–80 characters to be safe, or test rendered pixel width with Google's Rich Results tools.

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

Not sure if your Next.js store has this?

Run a free SEOLZ scan — we’ll find meta description too long and every other issue across your whole site.

Scan my site free

Fix meta description too long on another platform