Unhead
Vue
Recipes

Schema.org Breadcrumbs

Copy for LLMs
On this page

Creating breadcrumbs on your site is a great way to help your users understand your website hierarchy.

Useful Links

Marking up Breadcrumbs

defineBreadcrumb creates Breadcrumb Schema whilst handling relations for you.

Imagine we want to generate the following markup with the appropriate Schema.

Note: Google recommends that the markup for the breadcrumbs should exist on the page matching the Schema.org entry.

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

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
  }),
])

Here's an example of how you might structure your breadcrumbs in HTML:

<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>

Adding Multiple Breadcrumbs

There may be some cases where you'd like multiple breadcrumbs to be displayed.

For these cases you can provide an @id and it will avoid overwriting the primary breadcrumb.

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

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' },
    ]
  }),
])
Edit this page
Markdown For LLMs
Did this page help you?