How to fix missing og title on Next.js (Headless)

Steps for Next.js (Headless)

1. Determine which router you are using: App Router (app/) or Pages Router (pages/). The fix differs slightly between them — use `generateMetadata` for App Router and `next/head` for Pages Router.
2. App Router — open (or create) your root layout at `app/layout.tsx` and add a top-level `metadata` export with an `openGraph.title` field. For dynamic pages (e.g. `app/products/[slug]/page.tsx`), export an async `generateMetadata()` function that fetches the product and returns a per-page `openGraph.title`.
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:title" content={title} />` inside the `<Head>` block.
4. Ensure the `og:title` value is dynamic and meaningful: use the product name on product pages, collection name on collection pages, and a branded fallback (e.g. 'My Store') on the homepage/404.
5. Run `next build` and inspect the rendered HTML (or use a social-media debugger such as the Facebook Sharing Debugger) to confirm the `og:title` tag is present and correct on every page type.
6. Optionally centralise defaults in `app/layout.tsx` using `metadataBase` + `openGraph` so every child page inherits a sensible fallback and only needs to override what is unique.

What is missing og title?

The og:title tag is a small piece of HTML code — part of the Open Graph protocol — that tells social networks and messaging apps what title to display when someone shares a link to your store. Without it, platforms like Facebook, LinkedIn, Pinterest, and WhatsApp either guess a title (often pulling something ugly or irrelevant) or show no title at all. It lives in the <head> section of your page and looks like: <meta property="og:title" content="Your Page Title Here" />. It does not affect your visible page content — it only controls how your link previews appear when shared.

Every time a customer, blogger, or influencer shares a link to your store or product page, the og:title is the headline of that shared post — it's what makes someone stop scrolling and click. Missing or broken og:title tags mean your shared links look unfinished, unprofessional, or just plain wrong, which directly reduces click-through rates from social media. For ecommerce stores, social sharing is a significant free-traffic channel: a product shared on Facebook or Pinterest with a compelling, accurate title can drive meaningful revenue. Additionally, some search tools and third-party indexers use Open Graph data as a secondary signal for content relevance, so having it set correctly supports a consistent, trustworthy brand presence across the web.

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