BreadcrumbList

BreadcrumbList is the schema type that powers the blue breadcrumb trail Google shows above page titles in search results. It's one of the smallest and most useful schema types: three core properties, a well-defined rich result, and a place on almost every deep page of every multi-section site.

The example below uses XooCode's own navigation structure as the breadcrumb trail (Home then Advanced Schema Examples then Person). You can verify it by looking at the current URL of this very page. It follows the schema.org/BreadcrumbList vocabulary.

The ListItem pattern

A BreadcrumbList has one property that matters: itemListElement. It holds an array of ListItem entries, one per level of the breadcrumb trail. Each ListItem needs a position (1-indexed integer, not zero), a name (what users see), and an item (a URL string or a nested entity with its own @id). The last item in the list is the current page and its item can be omitted, though including it as the current URL is also valid.

BreadcrumbList vs WebPage.breadcrumb

schema.org has two ways to mark up breadcrumbs: the modern BreadcrumbList type and the older breadcrumb string property on WebPage. The string form accepts free text like "Home > Blog > This post" and is still listed in the spec, but Google's breadcrumb rich result only fires for the structured BreadcrumbList form. Always use BreadcrumbList. The old string property is legacy.

Full example of schema.org/BreadcrumbList json-ld markup

The markup is verified as valid with Rich Results Test from Google.

Highlight legend:Required by GoogleRecommendedOptional
schema.org/BreadcrumbList
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://xoocode.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Advanced Schema Examples",
      "item": "https://xoocode.com/json-ld-code-examples"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Person",
      "item": "https://xoocode.com/json-ld-code-examples/person"
    }
  ]
}
</script>

Rich result preview

Approximate preview of what Google may render from this markup. Hover any element inside the card to see which JSON-LD path produced it. Google decides whether to show any rich result. Markup makes you eligible, not guaranteed.

google.com/search?q=xoocode%20person%20example
HomeAdvanced Schema ExamplesPerson

Person

https://xoocode.com/json-ld-code-examples/person

The breadcrumb trail appears as a small chevron-separated path above the blue page title in Google's search results. Click any segment to jump to that level of the site.

Minimal valid version

The smallest markup that still produces a valid BreadcrumbList entity. Use it as the floor. Reach for the advanced example above when you want search engines and AI agents to understand more about your content.

schema.org/BreadcrumbList (minimal)
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://xoocode.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Person"
    }
  ]
}
</script>

Google rich results this unlocks

Markup matching this example makes your page eligible for the following Google Search rich results. The primary target drives the required / recommended property classification in the advanced code block above.

Common BreadcrumbList mistakes

Mistakes that pass validation but silently fail to earn rich results or mislead consumers walking the graph. Avoid these and your markup will be ahead of most sites in the wild.

  1. 01

    Zero-indexed positions

    Wrong
    "itemListElement": [
      { "@type": "ListItem", "position": 0, "name": "Home", ... },
      { "@type": "ListItem", "position": 1, "name": "Blog", ... }
    ]
    Right
    "itemListElement": [
      { "@type": "ListItem", "position": 1, "name": "Home", ... },
      { "@type": "ListItem", "position": 2, "name": "Blog", ... }
    ]

    schema.org ListItem positions are 1-indexed integers. Developers who reach for zero-indexed positions out of programming habit break the breadcrumb rich result. Google's parser treats position 0 as malformed and drops the whole BreadcrumbList. Always start at 1 and count up sequentially. Gaps are also malformed (1, 2, 4 is not allowed).

  2. 02

    Flat strings instead of nested ListItem

    Wrong
    "itemListElement": [
      "Home",
      "Blog",
      "This Post"
    ]
    Right
    "itemListElement": [
      { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com" },
      { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog" },
      { "@type": "ListItem", "position": 3, "name": "This Post" }
    ]

    A plain array of strings validates as schema but produces zero rich result. BreadcrumbList requires each element to be a full ListItem object with @type, position, name, and item. Google needs the URLs to link each breadcrumb level; a flat string array has no URLs. The last ListItem can omit item because it's the current page, but it still needs the @type, position, and name.

  3. 03

    Using the old breadcrumb string property on WebPage

    Wrong
    {
      "@type": "WebPage",
      "breadcrumb": "Home > Blog > This Post"
    }
    Right
    {
      "@type": "WebPage",
      "breadcrumb": {
        "@type": "BreadcrumbList",
        "itemListElement": [
          { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com" },
          { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog" },
          { "@type": "ListItem", "position": 3, "name": "This Post" }
        ]
      }
    }

    schema.org still documents <code>breadcrumb</code> as a string property on WebPage, but Google's breadcrumb rich result only fires for the structured BreadcrumbList form. The string form is legacy. Either nest a BreadcrumbList inside the WebPage's <code>breadcrumb</code> property (as above) or attach it as a separate top-level entity on the page. Both work. The flat string is obsolete.

Compare your markup against this exampleruns in your browser
Private. Runs entirely in your browser.

Comments

Loading comments...

Leave a comment