BreadcrumbList Schema

Why It Matters for AI Visibility

How We Score It

How to Improve

• 1

  Add BreadcrumbList schema matching your site navigation

  Create a JSON-LD block reflecting your page's hierarchy path. Start with Home at position 1, add category levels, and end with the current page. Each ListItem needs `@type`, `position`, and an `item` object with `name` and `@id` (the full URL). A three-level breadcrumb for a blog post takes five minutes to implement.

• 2

  Generate breadcrumbs automatically from your URL structure

  Most CMS platforms and frameworks can auto-generate BreadcrumbList schema from the URL path. WordPress plugins like Yoast and RankMath do this out of the box. In Next.js, you can build a component that generates the JSON-LD from route segments. Automatic generation ensures every page has breadcrumbs without manual maintenance.

• 3

  Include both JSON-LD schema and visible breadcrumbs

  Visible breadcrumb navigation should match the JSON-LD schema. This provides consistent signals to both users and AI engines. Use the same labels and hierarchy in both the visible UI breadcrumbs and the structured data. Mismatches between visible and schema breadcrumbs create conflicting signals.

• 4

  Keep breadcrumb paths under 5 levels deep

  Deep hierarchies of 6 or more levels can suggest poor site architecture. AI engines prefer clean, shallow hierarchies where content is accessible within a few clicks of the homepage. If your breadcrumb path is excessively deep, consider flattening your site structure.

Before & After

<!-- No BreadcrumbList schema. Score: 0 -->
<article>
  <h1>Understanding Async/Await in JavaScript</h1>
  ...
</article>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "item": {"@id": "https://example.com", "name": "Home"}},
    {"@type": "ListItem", "position": 2, "item": {"@id": "https://example.com/blog", "name": "Blog"}},
    {"@type": "ListItem", "position": 3, "item": {"@id": "https://example.com/blog/async-await", "name": "Async/Await Guide"}}
  ]
}
</script>
<!-- Score: 10 -->

Code Examples

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "https://example.com",
        "name": "Home"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@id": "https://example.com/docs",
        "name": "Documentation"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item": {
        "@id": "https://example.com/docs/getting-started",
        "name": "Getting Started"
      }
    }
  ]
}

Frequently Asked Questions