How to fix missing schema product on Next.js (Headless)
Add Product schema markup (JSON-LD) to every product page so search engines can display rich results — including price, availability, and ratings — directly in search.
Steps for Next.js (Headless)
- Locate (or create) your product page file — either `app/products/[slug]/page.tsx` (App Router) or `pages/products/[slug].tsx` (Pages Router). All Product JSON-LD lives here.
- Fetch the product data server-side (via `generateMetadata` / `getStaticProps` / `getServerSideProps`) so every field in the schema is populated before the page is sent to the crawler.
- Build a typed `productJsonLd` object that maps your commerce data to the Schema.org `Product` type, including `name`, `image`, `description`, `sku`, `brand`, `offers` (price, currency, availability), and optionally `aggregateRating`.
- Inject the JSON-LD using a `<Script id='product-schema' type='application/ld+json'>` tag (App Router) or Next.js `<Script>` / a plain `<script>` inside `<Head>` (Pages Router) — *not* as a regular `<script>` without `type='application/ld+json'`, and never dangerouslySetInnerHTML in a client component.
- Validate the output in Google's Rich Results Test (https://search.google.com/test/rich-results) and Schema Markup Validator (https://validator.schema.org/) before deploying.
- For large catalogues, generate the schema inside `generateStaticParams` so every PDP is statically rendered with its own schema at build time, avoiding runtime latency.
What is missing schema product?
Product schema is a standardized block of code (called structured data) that you add to your product pages to formally tell Google and other search engines exactly what your page is about: the product's name, price, availability, images, and reviews. It uses a universal language called Schema.org, wrapped in a small JSON-LD script tag that visitors never see. Without it, search engines have to guess at your product details by reading your page like a human would — and they often get it wrong, or simply skip the enhanced display altogether.
Product schema directly unlocks Google's "rich results" — those eye-catching search listings that show star ratings, price, stock status, and product images right on the search results page, before anyone even clicks. Stores with rich results consistently earn higher click-through rates (often 20–30% more clicks) than plain blue-link listings showing the same product. Missing this markup means your products appear as generic text links while competitors with schema get the visual treatment. It also feeds Google's Shopping Graph and AI-powered answer features (like Google's AI Overviews), so without it you are invisible in an increasing share of product discovery moments.
See the complete Missing schema product 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 schema product and every other issue across your whole site.
Scan my site free