Missing schema breadcrumblist

Moderate effort

Found on 76% of audited stores.

Add BreadcrumbList structured data (JSON-LD) to every page so Google can display your site's navigation path directly in search results.

What it is

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.

Why it matters

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.

How to fix it

Identify every page type that has a breadcrumb trail (home page, category pages, product pages, blog posts, etc.) and map the full hierarchy for each.
Create a JSON-LD script block using the BreadcrumbList schema: set @context to https://schema.org, @type to BreadcrumbList, and populate itemListElement with one ListItem per breadcrumb level — each with a sequential position integer, a name (the visible label), and an item (the full canonical URL).
Place the complete <script type='application/ld+json'> block inside the <head> or anywhere in the <body> of every relevant page — Google accepts either location.
Make the data dynamic so it is generated automatically for every page from your CMS or theme, not added manually page by page.
Validate the markup using Google's Rich Results Test (search.google.com/test/rich-results) to confirm there are no errors or warnings.
Monitor Google Search Console under Enhancements › Breadcrumbs after a few days to check indexing status and fix any reported issues.

Fix it on your platform

Pick your platform for the exact steps.

How to fix missing schema breadcrumblist on Shopify

In your Shopify admin, go to Online Store › Themes › your active theme › Actions › Edit code.
Open theme.liquid (for site-wide injection) or the specific template files: product.liquid / product-template.liquid for product pages, collection.liquid for category pages, article.liquid for blog posts.
Paste the JSON-LD script block (see code snippets) just before the closing </head> tag in theme.liquid, or inside the relevant template for page-specific markup.
Use Liquid variables ({{ product.title }}, {{ collection.title }}, {{ shop.url }}, {{ product.url }}, {{ collection.url }}) to make the name and item values dynamic.
Save the file, then validate a representative product URL and collection URL using Google's Rich Results Test.

Full Shopify guide →Official Shopify docs ↗

How to fix missing schema breadcrumblist on WooCommerce

Install and activate the free Yoast SEO or Rank Math SEO plugin from the WordPress plugin directory (Plugins › Add New).
Yoast SEO: go to SEO › Search Appearance › Breadcrumbs and ensure breadcrumbs are enabled; Yoast automatically outputs BreadcrumbList JSON-LD on every page — no additional configuration needed.
Rank Math: go to Rank Math › Titles & Meta › each post type; breadcrumb schema is output automatically when the Schema module is active.
If you prefer a code-only approach, add the dynamic JSON-LD block to your child theme's functions.php using wp_head action and WooCommerce conditional tags (is_product(), is_product_category()) to build the correct hierarchy.
Validate using Google's Rich Results Test on a product page and a category page.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix missing schema breadcrumblist on BigCommerce

In your BigCommerce admin go to Storefront › My Themes › your active theme › Advanced › Edit Theme Files.
Open templates/layout/base.html (or the Cornerstone equivalent: templates/pages/product.html, templates/pages/category.html).
Insert the JSON-LD script block before </head> using Handlebars variables: {{product.title}}, {{category.name}}, {{urls.home}}, {{product.url}}, {{category.url}} to make values dynamic.
Alternatively, install a structured data app from the BigCommerce App Marketplace (search 'schema' or 'structured data') that handles BreadcrumbList automatically.
Save changes and validate with Google's Rich Results Test.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix missing schema breadcrumblist on Wix

In the Wix Editor, open the page you want to update and click the Settings (gear) icon for that page, or use the Wix SEO Settings panel.
Scroll to the Advanced SEO section and paste the JSON-LD script block into the 'Add structured data markup' text area — Wix injects this into the page's <head>.
For site-wide dynamic breadcrumbs on product/category pages in Wix Stores, use Wix's built-in SEO Settings (found under Marketing & SEO › SEO Tools › Structured Data Markup), which can apply markup patterns across page types.
Alternatively, use the Wix Velo (dev mode) to programmatically inject the JSON-LD via the page's wix-seo module: import wixSeo from 'wix-seo'; wixSeo.setStructuredData([{ ... your BreadcrumbList object ... }]);
Validate each page type with Google's Rich Results Test.

Full Wix guide →Official Wix docs ↗

How to fix missing schema breadcrumblist on Wix Studio

Open Wix Studio and navigate to the relevant page.
Click on the SEO panel (top toolbar) and then 'Advanced SEO Tags' to access the structured data input field.
Paste the complete JSON-LD BreadcrumbList block; use Wix Studio's dynamic data binding or Velo code panels to pull page-specific values (page title, URL) into the schema dynamically.
Apply the pattern to all relevant page templates (Product Page, Category Page, Blog Post) via the template editor so it rolls out site-wide.
Validate using Google's Rich Results Test.

Full Wix Studio guide →Official Wix Studio docs ↗

How to fix missing schema breadcrumblist on Squarespace

In the Squarespace admin, go to Website › Pages › select the page, then click the gear icon › Advanced › Page Header Code Injection.
Paste the complete JSON-LD script block into the Code Injection field — Squarespace inserts this into the <head> for that specific page.
For site-wide injection, go to Settings › Advanced › Code Injection and paste the JSON-LD in the Header field (this adds it to every page; use conditional JavaScript to render the correct breadcrumb per page type).
Squarespace 7.1 Commerce pages: use the store's built-in SEO fields where available, or rely on the Code Injection method above for product and category pages.
Validate with Google's Rich Results Test.

Full Squarespace guide →Official Squarespace docs ↗

How to fix missing schema breadcrumblist on Webflow

In the Webflow Designer, select the page (e.g. your Product Template or Category Template CMS collection page).
Open Page Settings (gear icon) › Custom Code › Inside <head> tag section.
Paste the JSON-LD script block; use Webflow's CMS field embed syntax — wrap the script in an Embed element on the canvas and bind dynamic fields (e.g. Name field, Slug field) to the name and item values so every generated page has correct breadcrumb data.
For collection pages, add the Embed element inside the CMS Collection List wrapper and connect it to collection fields.
Publish and validate with Google's Rich Results Test.

Full Webflow guide →Official Webflow docs ↗

How to fix missing schema breadcrumblist on Adobe Commerce (Magento)

In your Magento admin, go to Content › Configuration › HTML Head or use a custom layout XML file in your theme: app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layout/default_head_blocks.xml.
Create or edit a custom PHP template block (e.g. app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/breadcrumb_jsonld.phtml) that outputs the JSON-LD using Magento's breadcrumb data model ($block->getCrumbs()).
Register the block in a layout XML file (e.g. default.xml) with reference name='head.additional' so it outputs on every page.
Alternatively, install a structured data extension from the Magento Marketplace (e.g. 'Rich Snippets' extensions) that handles BreadcrumbList automatically.
Clear the Magento cache (System › Cache Management › Flush Cache Storage) and validate with Google's Rich Results Test.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

How to fix missing schema breadcrumblist on PrestaShop

Go to your PrestaShop back office › Modules › Module Manager and search for an SEO / structured data module (e.g. 'SEO Expert' or 'Structured Data Markup').
If adding manually, open your theme's templates directory (themes/<your-theme>/templates/) and edit the relevant .tpl files (product.tpl, category.tpl).
Add the JSON-LD script block before </head>, using Smarty variables ({$product.name}, {$urls.pages.index}, {$product.url}) to make the values dynamic.
Validate with Google's Rich Results Test after saving.

Full PrestaShop guide →Official PrestaShop docs ↗

How to fix missing schema breadcrumblist on Headless / Custom (I build in code)

Create a reusable BreadcrumbJsonLd component that accepts an array of {position, name, url} objects as props.
Render a <script type='application/ld+json'> tag containing the serialised BreadcrumbList JSON-LD object inside the <head> of every page that has a breadcrumb trail.
In Next.js, place the component inside the <Head> component from next/head or use the App Router's generateMetadata alongside a direct script tag. In Nuxt.js, use useHead() composable.
Build the breadcrumb array from your routing/data layer (e.g. category tree, URL segments) so it is generated dynamically at build or request time.
Validate with Google's Rich Results Test.

Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗

How to fix missing schema breadcrumblist on 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.

Full Next.js guide →Official Next.js docs ↗

How to fix missing schema breadcrumblist on Nuxt.js

Create a reusable composable at `composables/useBreadcrumbSchema.ts` that accepts a breadcrumb array and returns a fully-formed BreadcrumbList JSON-LD object.
In every page component (e.g. `pages/products/[slug].vue`, `pages/categories/[slug].vue`, `pages/index.vue`), import the composable, build the breadcrumb array from the page's data/route, then inject the JSON-LD into the `<head>` via Nuxt's `useHead()` composable using a `<script type='application/ld+json'>` tag.
For deeply nested or shared layouts (e.g. `layouts/default.vue`), consider passing breadcrumb data down via `useState` or props so the JSON-LD is always page-specific and not duplicated.
Ensure each `ListItem` uses a fully-qualified absolute URL (e.g. `https://example.com/category/shoes`) — use `useRuntimeConfig().public.siteUrl` or a composable to resolve the base URL dynamically.
After deploying, validate every key page type (home, category, PDP) with Google's Rich Results Test and Schema.org's validator to confirm BreadcrumbList is parsed correctly.

Full Nuxt.js guide →Official Nuxt.js docs ↗

How to fix missing schema breadcrumblist on Gatsby

Create a reusable `BreadcrumbListSchema` component in `src/components/BreadcrumbListSchema.jsx` that accepts a `crumbs` array prop (each item: `{ name, url }`) and renders a JSON-LD `<script>` tag using Gatsby's built-in `<Script>` component (or a plain `<script>` tag inside Gatsby Head API's `<Head>` export).
In every page file (e.g. `src/pages/index.jsx`, `src/templates/product.jsx`, `src/templates/category.jsx`), export a named `Head` function — Gatsby's Head API (Gatsby ≥ 4.19) — and render `<BreadcrumbListSchema>` inside it with the page-specific breadcrumb trail.
Build the `crumbs` array dynamically from page context data already passed by `gatsby-node.js` (e.g. `pageContext.breadcrumbs`) so the data is available at build-time (SSG) or per-request (DSG/SSR).
For deeply nested templates, pass breadcrumb data through `gatsby-node.js` → `createPage()` → `context` so every generated page automatically receives its own trail without extra fetch calls.
Validate the output by running `gatsby build && gatsby serve`, inspecting the page source for the `<script type='application/ld+json'>` block, and testing the URL in Google's Rich Results Test (https://search.google.com/test/rich-results).

Full Gatsby guide →Official Gatsby docs ↗

How to fix missing schema breadcrumblist on 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.

Full Next.js (Headless) guide →Official Next.js (Headless) docs ↗

How to fix missing schema breadcrumblist on Elementor

In your WordPress dashboard, go to Elementor → Custom Code (requires Elementor Pro). Click '+ Add New' to create a new custom code snippet.
Give the snippet a descriptive name (e.g. 'BreadcrumbList Schema – JSON-LD'), set the Location to 'Head', and set it to load on the specific page types that need breadcrumbs (e.g. All Pages, or target by condition such as Posts, Product Pages, etc.).
In the code editor, paste a JSON-LD BreadcrumbList block. For example: <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ {"@type": "ListItem", "position": 1, "name": "Home", "item": "https://yourdomain.com/"}, {"@type": "ListItem", "position": 2, "name": "Category", "item": "https://yourdomain.com/category/"}, {"@type": "ListItem", "position": 3, "name": "Page Title", "item": "https://yourdomain.com/category/page/"} ] } </script> Replace the name and item values to match each page's actual navigation path.
Use Elementor's Display Conditions to scope each breadcrumb snippet to the correct page or template: click 'Add Condition', choose 'Include', then select the matching page, post type, or taxonomy. Create separate Custom Code entries for each unique breadcrumb path (e.g. one for the homepage, one per category, one for product pages).
For sites with many dynamic pages (e.g. WooCommerce products), install a dedicated SEO plugin such as Yoast SEO or Rank Math alongside Elementor — these plugins auto-generate dynamic BreadcrumbList schema based on the page hierarchy, eliminating the need for per-page manual snippets.
After publishing the snippet(s), open Google's Rich Results Test (https://search.google.com/test/rich-results) and paste each page's URL to confirm the BreadcrumbList structured data is detected and error-free.

Full Elementor guide →Official Elementor docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find missing schema breadcrumblist — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Missing schema breadcrumblist?

Why does missing schema breadcrumblist matter?

How do I fix missing schema breadcrumblist?