How to fix missing meta description on Next.js (Headless)

Write and add a unique meta description (120–160 characters) to every page that is missing one, so Google can display an accurate, compelling snippet in search results.

Steps for Next.js (Headless)

  1. Decide which router you use: App Router (app/) uses `generateMetadata` or a static `metadata` export; Pages Router (pages/) uses `next/head` with a `<meta name='description'>` tag.
  2. For App Router: open (or create) each page/layout file (e.g. `app/page.tsx`, `app/products/[slug]/page.tsx`). Export a `generateMetadata` async function that fetches page-specific data and returns a `description` string of 120–160 characters.
  3. For Pages Router: open each page file (e.g. `pages/index.tsx`, `pages/products/[slug].tsx`). Inside the component, add a `<Head>` import from `next/head` and render `<meta name='description' content={description} />` using data already fetched in `getStaticProps` / `getServerSideProps`.
  4. Never hard-code the same description across pages. Derive it from real content: product short description, category intro text, or a CMS field — then trim/truncate to stay within 120–160 characters.
  5. Add a shared `truncateDescription(text: string, max = 155): string` utility (e.g. `lib/seo.ts`) so every page applies the same character-limit logic consistently.
  6. Audit with `next build` output or a tool like Screaming Frog / Lighthouse after deploying to confirm every route emits a unique, non-empty description tag.
Official Next.js (Headless) documentation ↗

What is missing meta description?

A meta description is a short HTML tag placed in the `<head>` of a webpage that summarizes what the page is about. It is not visible on the page itself, but search engines read it and often display it as the two or three lines of grey text shown beneath your page title in Google search results. Think of it as a free 160-character advertisement for every page on your store — it tells shoppers exactly what they'll find before they click.

When a meta description is missing, Google writes one for you by pulling random text from the page — often a navigation label, footer copyright notice, or mid-sentence fragment that makes no sense out of context. A compelling, keyword-rich description written by you can meaningfully increase click-through rate (CTR) from search results, driving more organic traffic to your store without spending a cent more on ads. Higher CTR also sends a positive engagement signal that can lift your rankings over time. For product and category pages especially, a strong description highlighting your unique selling points (free shipping, best price, reviews) is one of the easiest conversion levers you have in SEO.

See the complete Missing meta description guide for every platform and the full background.

Not sure if your Next.js (Headless) store has this?

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

Scan my site free

Fix missing meta description on another platform