Unhead
Solid.js
Recipes

Schema.org Breadcrumbs

Copy for LLMs
On this page

Use defineBreadcrumb() with an array of { name, item } objects to create breadcrumb navigation markup. Google may use this markup to categorize a page in search results.

Breadcrumb structured data describes a readable navigation path such as Home > Category > Page. Search appearance is not guaranteed.

Useful Links

How do I mark up breadcrumbs?

defineBreadcrumb creates a BreadcrumbList node and handles its ListItem relationships.

The following example generates structured data for the matching visible breadcrumb navigation.

Google requires the breadcrumb markup to represent a typical user path to the page.

import { defineBreadcrumb, useSchemaOrg } from '@unhead/schema-org/solid-js'

const breadcrumbs = [
  // item is the url and will be resolved to the absolute url
  { name: 'Home', item: '/' },
  { name: 'Articles', item: '/blog' },
  // item is not required for the last list element
  { name: 'How do breadcrumbs work' },
]

useSchemaOrg([
  defineBreadcrumb({
    itemListElement: breadcrumbs
  }),
])

The visible breadcrumb navigation can use the same items:

<ul>
  <li>
    <a href="/">Home</a>
    <span>/</span>
  </li>
  <li>
    <a href="/blog">Articles</a>
    <span>/</span>
  </li>
  <li>
    <span>How do breadcrumbs work</span>
  </li>
</ul>

How do I add multiple breadcrumb trails?

Give each additional trail its own @id so it does not overwrite the primary breadcrumb.

import { defineBreadcrumb, useSchemaOrg } from '@unhead/schema-org/solid-js'

useSchemaOrg([
  // primary breadcrumb
  defineBreadcrumb({
    itemListElement: [
      // item is the url and will be resolved to the absolute url
      { name: 'Home', item: '/' },
      { name: 'Articles', item: '/blog' },
      // item is not required for the last list element
      { name: 'How do breadcrumbs work' },
    ]
  }),
  defineBreadcrumb({
    '@id': '#secondary-breadcrumb',
    'itemListElement': [
      // item is the url and will be resolved to the absolute url
      { name: 'Sub Home', item: '/sub' },
      { name: 'Sub Page', item: '/sub/page' },
      { name: 'Sub Element' },
    ]
  }),
])

Related Recipes

Edit this page
Markdown For LLMs
Did this page help you?

Blog

Add Article or BlogPosting structured data with defineArticle() so search engines can understand a post and its author, dates, and images.

E-commerce

Add Product structured data with defineProduct() so product pages can become eligible for search features showing prices, ratings, availability, and reviews.