How to fix missing meta description on Next.js

Steps for Next.js

1. App Router (Next.js 13+): In your page.tsx/page.jsx, export: `export const metadata = { description: 'Your unique description here.' };` — Next.js automatically renders the `<meta name='description'>` tag.
2. Pages Router: Import `Head` from `next/head`, then inside your component return: `<Head><meta name='description' content='Your unique description here.' /></Head>`.
3. For dynamic routes (e.g., /products/[slug]): use `generateMetadata` (App Router) or `getServerSideProps`/`getStaticProps` to fetch the product's SEO description from your data source and pass it to the metadata/Head.

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.