How to fix missing schema webpage on Next.js (Headless)

Steps for Next.js (Headless)

1. Create a reusable `WebPageJsonLd` component at `components/seo/WebPageJsonLd.tsx` that accepts page-level props (name, description, url, dateModified, breadcrumb) and renders a `<script type='application/ld+json'>` tag using Next.js's `<Script>` strategy or a plain `<script>` inside the JSX return.
2. In the App Router, add the `<WebPageJsonLd>` component directly inside each page's default export (e.g. `app/page.tsx`, `app/products/[slug]/page.tsx`, `app/blog/[slug]/page.tsx`) so it is rendered server-side in the HTML response.
3. For every page, also export a `generateMetadata()` function (or static `metadata` object) to keep the `<title>` and `<meta name='description'>` in sync with the same values passed to `WebPageJsonLd` — single source of truth via a shared `getSeoData()` helper.
4. Derive the canonical `url` field from `headers().get('host')` + `pathname` (server component) or from a `NEXT_PUBLIC_SITE_URL` environment variable so the schema URL always matches the canonical link.
5. For content pages (blog, landing pages) use `@type: 'WebPage'`; for product listing pages use `@type: 'CollectionPage'`; for product detail pages use `@type: 'ItemPage'`; for the homepage use `@type: 'WebPage'` with `isPartOf: { @type: 'WebSite', ... }` — pass `pageType` as a prop to the shared component.
6. Validate the output in Google's Rich Results Test and the Schema.org validator after deployment to confirm every route emits a valid, crawlable JSON-LD block.

What is missing schema webpage?

Schema markup is a small block of invisible, structured code you add to a web page that tells search engines and AI systems exactly what the page is — its title, description, URL, and type. The `WebPage` schema type is the foundational label that says "this is a web page, here is its name, here is what it's about." Without it, search engines and AI tools have to guess this information by reading your page like a human would, which is less reliable. Think of it like a name tag for your page that any machine can instantly read.

Adding `WebPage` schema directly supports Answer Engine Optimization (AEO) — the emerging discipline of making your content eligible to be quoted or cited by AI assistants like Google's AI Overviews, ChatGPT, and Bing Copilot. AI systems rely heavily on structured data to identify authoritative, trustworthy sources to pull answers from; a missing `WebPage` schema means your pages are less likely to be chosen. It also strengthens your baseline for rich results eligibility and helps Google correctly index and understand every page on your site, which supports rankings and organic traffic. For ecommerce stores in particular, this can mean more product pages, category pages, and content pages surfacing in both traditional search results and AI-generated answers.

See the complete Missing schema webpage guide for every platform and the full background.