Skip to main content
Manuilau | Bureau

Pattern · TypeScript

BreadcrumbList JSON-LD for internal pages

One helper feeds both visible breadcrumbs and markup — names and URLs stay in sync.

·

Level: beginnerTime estimate: ~15 min

“

One data array powers the Breadcrumb UI and `itemListElement` in JSON-LD — no label/URL drift.

  • Matching order lowers rich-result mistakes
  • the object drops into `@graph`
  • re-run a validator after route changes

Visible breadcrumbs and application/ld+json must share the same order and labels.

Code

export function buildBreadcrumbListLd(items: { name: string; url: string }[]) {
  return {
    '@type': 'BreadcrumbList' as const,
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem' as const,
      position: index + 1,
      name: item.name,
      item: item.url,
    })),
  }
}

Verification

  • UI labels and JSON-LD use the same canonical URLs, including trailing slashes if that is your site policy.
  • Rich Results Test / Schema.org validator reports no ListItem errors.

Sources

Need this implemented for your domain and stack?

Short form: name, phone, and site. After you submit, we reply with next steps and a phase outline; details are refined on a call.