How to fix missing schema breadcrumblist on Next.js (Headless)
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 (Headless)
- Create a reusable `BreadcrumbJsonLd` component (e.g. `components/seo/BreadcrumbJsonLd.tsx`) that accepts a `items` prop — an ordered array of `{ name, url }` objects — and renders a `<Script id='breadcrumb-jsonld' type='application/ld+json'>` tag (Next.js `next/script` with `strategy='beforeInteractive'`, or a plain `<script>` inside the App Router's Server Component).
- In every page file that needs a breadcrumb trail (e.g. `app/products/[slug]/page.tsx`, `app/collections/[slug]/page.tsx`, `app/blog/[slug]/page.tsx`), build the breadcrumb `items` array dynamically from your route params / fetched data.
- Import and render `<BreadcrumbJsonLd>` inside the page's JSX *below* your `generateMetadata` export — the component outputs only a `<script>` tag and has no visual output, so it won't affect layout.
- For the App Router, place the `<script>` tag directly in the Server Component's return value (no `next/script` needed); for the Pages Router, use `next/head` or `next/script` with `strategy='beforeInteractive'` so the tag is present before hydration.
- Validate the output with Google's Rich Results Test (https://search.google.com/test/rich-results) and confirm the `BreadcrumbList` entity is parsed correctly for each page type.
- Optionally build a `useBreadcrumbs()` hook or a shared `buildBreadcrumbs(pathname)` utility (e.g. `lib/breadcrumbs.ts`) to derive the items array from `usePathname()` (App Router) or `useRouter().asPath` (Pages Router) so all pages share one source of truth.
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 (Headless) 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