How to fix missing og description on Next.js

Steps for Next.js

1. Decide which router you use: App Router (app/) uses `generateMetadata` / a static `metadata` export; Pages Router (pages/) uses the `<Head>` component from `next/head`. Apply the matching fix below.
2. App Router — open every page file (e.g. `app/page.tsx`, `app/products/[slug]/page.tsx`) and export a `generateMetadata` async function that reads the page-specific description from your CMS/API and returns it under `openGraph.description`. Fall back to a site-wide default stored in a shared constant so no page is ever left empty.
3. Pages Router — import `Head` from `next/head` in every page component (e.g. `pages/index.tsx`, `pages/products/[slug].tsx`) and add `<meta property='og:description' content={description} />` inside it, sourcing the value from `getStaticProps` / `getServerSideProps`.
4. Create a shared helper `lib/seo.ts` that exports a `buildOgDescription(raw?: string): string` function. It trims HTML tags, truncates to ≤ 155 characters, and returns the site-wide fallback when `raw` is falsy — import this everywhere so the format is consistent.
5. Add `NEXT_PUBLIC_SITE_DESCRIPTION` to your `.env.local` (and your CI/CD environment variables) as the site-wide fallback description; reference it inside the shared helper.
6. After deploying, validate each key URL with the [Open Graph debugger](https://developers.facebook.com/tools/debug/) or `curl -s <url> | grep og:description` to confirm the tag is present and populated.

What is missing og description?

The og:description tag is a small piece of HTML code placed in the `<head>` of your page that tells social networks — Facebook, Pinterest, LinkedIn, X (Twitter), WhatsApp, and others — what text to show beneath your page title when someone shares your link. It is part of the Open Graph protocol, a standard created so websites can control exactly how their content appears in social previews. Without it, social platforms will either grab random text from your page or show nothing at all, resulting in ugly, unhelpful link previews. It is separate from (but related to) your regular HTML meta description.

When a customer or influencer shares your product or collection page on social media, the preview card is often the first impression a potential buyer sees — before they even visit your store. A missing og:description means the platform guesses what to show, often pulling in irrelevant text like navigation labels, price fragments, or nothing at all, which dramatically reduces click-through rates. Rich, controlled social previews directly drive referral traffic and conversions, especially for product launches, promotions, and influencer marketing. There is also an indirect SEO benefit: higher engagement signals from social traffic can reinforce the authority of your pages in search rankings.

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