Index of every page on this site: llms.txt
TypeScript
Schema

Breadcrumb Schema: BreadcrumbList JSON-LD Example

Breadcrumb structured data uses a BreadcrumbList to describe the position of a page in the site hierarchy. Google uses breadcrumb markup to categorize the page in search results.

For step-by-step setup with a matching visible navigation and a second trail, see the breadcrumbs recipe.

JSON-LD Example

Unhead renders this JSON-LD for the minimal example. It converts relative paths to absolute URLs and adds the position of each item.

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://example.com/blog/my-article#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://example.com",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Blog",
          "item": "https://example.com/blog",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "My Article",
          "position": 3
        }
      ]
    }
  ]
}

Schema.org Breadcrumb

  • Type: defineBreadcrumb<T extends Record<string, any>>(input?: BreadcrumbList & T)
    Describes a BreadcrumbList on a WebPage.

Required properties

  • itemListElement
    An array of ListItem objects, representing the position of the current page in the site hierarchy.

Examples

Minimal

defineBreadcrumb({
  itemListElement: [
    { name: 'Home', item: '/' },
    { name: 'Blog', item: '/blog' },
    { name: 'My Article' },
  ],
})

Defaults

  • @type: BreadcrumbList
  • @id: ${canonicalUrl}#breadcrumb

Relation Transforms

WebPage

  • sets default breadcrumb to this node

Resolves

  • itemListElement.position is computed for each list element

Types

/**
 * A BreadcrumbList is an ItemList consisting of a chain of linked Web pages,
 * typically described using at least their URL and their name, and typically ending with the current page.
 */
export interface BreadcrumbSimple extends ItemList {
  '@type'?: 'BreadcrumbList'
}
Did this page help you?