How to fix missing schema breadcrumblist on Next.js
Add BreadcrumbList structured data (JSON-LD) to every page so Google can display your site's navigation path directly in search results.
Steps for Next.js
- Create a reusable `BreadcrumbJsonLd` component at `components/seo/BreadcrumbJsonLd.tsx`. It accepts a `items` prop (array of `{ name, url }`) and renders a `<script type='application/ld+json'>` tag with the full BreadcrumbList schema.
- Import and render `<BreadcrumbJsonLd>` in every page or layout that should carry breadcrumb data — e.g. `app/products/[slug]/page.tsx`, `app/collections/[slug]/page.tsx`, and any other category/product/content pages.
- Build the `items` array dynamically from your route segments (or from the commerce API response). Each item must have a human-readable `name` and an absolute `url`. The Home item is always index position 1.
- For the *App Router* (`app/`), place the component anywhere inside the RSC/page component's JSX return — it renders a `<script>` tag into `<head>` automatically via React's built-in support for `<script>` in RSC, or use Next.js's `<Script strategy='beforeInteractive'>` from `next/script` if you need fine-grained control.
- For the *Pages Router* (`pages/`), drop the component inside `<Head>` from `next/head` — or, because `<script>` is not allowed inside `<Head>`, place it directly in the page JSX body (outside `<Head>`) so Next.js hoists it correctly.
- Validate the output with Google's Rich Results Test (https://search.google.com/test/rich-results) before deploying.
What is missing schema breadcrumblist?
Breadcrumb structured data is a small block of code — written in a format called JSON-LD — that you add to your page's HTML to tell Google exactly how that page fits into your site's hierarchy (e.g. Home → Women's Clothing → Dresses → Blue Wrap Dress). Google reads this code, not just your visible breadcrumb links, to understand and display your site structure. Without it, Google has to guess your site's structure, and you miss out on the enhanced appearance it enables in search results. The BreadcrumbList schema type is the recognised, standardised way to communicate this information.
Pages with BreadcrumbList markup are eligible for breadcrumb trails in Google's search result snippets — the "Home › Category › Product" line shown below the page title. This richer appearance improves click-through rates, which directly drives more organic traffic and revenue. It also helps Google crawl and categorise your site more accurately, which can improve rankings for category and product pages. For Answer Engine Optimisation (AEO), structured data is one of the clearest signals you can send to help AI-powered search experiences surface your pages with confidence. Omitting it leaves a straightforward, high-value SEO win completely unclaimed.
See the complete Missing schema breadcrumblist guide for every platform and the full background.
Not sure if your Next.js store has this?
Run a free SEOLZ scan — we’ll find missing schema breadcrumblist and every other issue across your whole site.
Scan my site free