Breadcrumbs

15-30 minBeginner

Implement BreadcrumbList structured data for rich search results using JSON-LD in Next.js.

Prerequisites

Familiarity with JSON-LD format
Dynamic routing (optional)

Intermediate Recommended

Script Component

Injecting JSON-LD.

Structured Data Helper

Create a helper function to generate the JSON-LD object based on the current path.

Example

function generateBreadcrumbSchema(items) {
  return {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.name,
      item: `https://example.com${item.path}`,
    })),
  }
}

Injecting Schema

Use the <script> tag with type="application/ld+json" inside your page component or layout.

Use dangerouslySetInnerHTML to render the JSON string.

Example

export default function Page() {
  const schema = generateBreadcrumbSchema([...])
  
  return (
    <section>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
      />
      {/* Page Content */}
    </section>
  )
}

Verification Checklist

Use the Rich Results Test to validate your JSON-LD.
Inspect the page source to ensure the <script> tag is present and contains valid JSON.