BreadcrumbList schema: working patterns and common mistakes

BreadcrumbList schema replaces the URL line in Google's mobile search results with your breadcrumb trail, and it still produces rich results in 2026 — which is worth noting, given that nine other types have been deprecated since 2023.

The implementation is simple and trips people up anyway, almost always in the same three places: position numbering, mismatch with the visible breadcrumb, and client-side rendering. This guide covers the working pattern and what breaks it.

What does BreadcrumbList actually do?

Three things, in order of practical value.

It changes the mobile SERP display. Instead of yoursite.com › blog › post-slug, the result shows Home › Category › Article Title. This is the visible benefit and the easiest to verify — search for one of your pages on a phone.

It declares site hierarchy. Crawlers categorise a page more accurately when its position in the structure is stated rather than inferred from the URL path.

It signals cluster membership. A page inside a clear hierarchy reads as part of an organised body of work rather than as an orphan.

The working pattern

Google accepts two formats. Use the short one — it's more compact, easier to generate programmatically, and produces identical results.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://yoursite.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://yoursite.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "BreadcrumbList Schema Guide",
      "item": "https://yoursite.com/blog/breadcrumb-schema"
    }
  ]
}

The long form, wrapping each item in a Thing with an @id, is only worth using when you're already building an @graph and want other entities to reference breadcrumb items by id. For most sites that's unnecessary complexity.

Position numbering rules

The single most common source of errors, and all four rules are mechanical.

Start at 1, with the homepage. Skipping the root and starting at the category is technically valid in the specification but causes display problems, because Google expects the trail to begin at the top.

Use sequential integers. Not zero-indexed, not strings, no gaps.

End with the current page, URL included. The visible breadcrumb shouldn't make the current page a clickable link — you're already there — but the schema still carries its URL. That asymmetry is correct and expected.

Two to five levels. A single-item list produces no rich result because there's no trail to display. Beyond five, the display gets truncated on mobile and your category structure is probably too deep.

Implementation by platform

The schema is identical everywhere; generating it differs.

Next.js

Generate server-side in the page component and render inline. The critical part is that it must be in the initial HTML, not added after hydration.

function breadcrumbSchema(post) {
  const base = "https://yoursite.com";
  return {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: `${base}/` },
      { "@type": "ListItem", position: 2, name: "Blog", item: `${base}/blog` },
      { "@type": "ListItem", position: 3, name: post.title, item: `${base}/blog/${post.slug}` },
    ],
  };
}

Render it with a <script type="application/ld+json"> tag in the component body. Two common problems: generating it inside useEffect, which crawlers that don't execute JavaScript never see; and deriving names from URL slugs, which produces ugly trails like "aeo-tools" instead of "AEO Tools".

WordPress

Yoast and RankMath both generate BreadcrumbList automatically once breadcrumbs are enabled in the plugin and the theme calls the relevant function.

The recurring problem is having both plugins active with breadcrumbs enabled in each, producing two BreadcrumbList blocks on one page. Disable it in one. The other frequent issue is a theme with hardcoded breadcrumb HTML and no schema behind it — the visible trail exists, the markup doesn't.

Webflow, headless CMS and static generators

Webflow has no native support; use a Custom Code embed with CMS field bindings rendered server-side rather than JavaScript-generated schema.

For headless setups and static site generators, the pattern matches the Next.js example with the CMS or content collection as the data source. One implementation detail worth getting right: make breadcrumb labels explicit fields in your content model rather than deriving them from slugs.

The six things that break it

1. Schema doesn't match the visible breadcrumb. Sync them, in both directions.
2. Multiple BreadcrumbList blocks on one URL. View source, search for "BreadcrumbList", disable the redundant generator.
3. Single-item list. Validates, produces nothing. Home plus current page is the minimum useful trail.
4. External URLs in the chain. The trail describes your own hierarchy. External links break the pattern the parser expects.
5. JavaScript-rendered schema. Must be in the initial HTML response. Check with view-source, not the inspector.
6. Position as a string. "position": "1" instead of "position": 1. JSON validators accept it; Google's parser wants an integer.

Only one of these — broken URLs inside the trail — does active harm, by sending crawlers to 404s and wasting crawl budget. The rest simply produce no result.

Verifying it works

FAQ

Closing

BreadcrumbList is a small, durable win. It produces a visible mobile SERP feature, it survived three years of deprecations that removed nine other types, and correct implementation takes about twenty minutes per template.

Get the position numbers right, keep the schema and the visible trail describing the same hierarchy, and render it server-side. Those three cover nearly every failure.

Broader schema context is in schema markup for AI Overviews; the author markup that matters most is in Article schema and E-E-A-T.

Sources cited in this piece

• Schema.org — BreadcrumbList specification.
• Google Search Central — breadcrumb structured data documentation; guidance that no special structured data is required for AI Overviews or AI Mode; FAQ rich result deprecation 7 May 2026 with Rich Results Test support removed June 2026; HowTo deprecation 2023; seven further types removed June 2025.
• Yoast and RankMath plugin documentation — BreadcrumbList output behaviour in WordPress.

Last updated 13 August 2026: removed a structured-data statistic attributed to AI Mode citation analysis that could not be verified, and the implication that BreadcrumbList affects AI citation — Google states no special structured data is required. Added the current deprecation context confirming BreadcrumbList remains supported, and removed a link to an article that does not exist.