Breadcrumb schema is implemented on interior pages

When Google displays breadcrumbs in search results — the path hierarchy shown beneath the page title — it pulls from BreadcrumbList schema-org markup, not from the visible UI component on your page. Interior pages without BreadcrumbList JSON-LD miss the SERP breadcrumb display even if a visible breadcrumb component exists. For sites with nested URL structures (/docs/getting-started, /blog/category/post), breadcrumb trails in search results improve click-through rates by communicating page context before the user clicks. A visible breadcrumb UI without corresponding schema is a common implementation gap that leaves this benefit unclaimed.

Create a reusable BreadcrumbSchema server component and render it from interior page layouts. Each itemListElement entry needs position (1-based), name, and item (absolute URL — omit item only on the current page).

// components/breadcrumb-schema.tsx
type Crumb = { name: string; href?: string }

export function BreadcrumbSchema({ crumbs }: { crumbs: Crumb[] }) {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: crumbs.map((crumb, i) => ({
      '@type': 'ListItem',
      position: i + 1,
      name: crumb.name,
      ...(crumb.href ? { item: `https://yoursite.com${crumb.href}` } : {}),
    })),
  }
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  )
}

Add <BreadcrumbSchema> to your blog post, docs, and product detail layouts — not the root layout, since the homepage has no breadcrumb hierarchy.