docs

BreadcrumbList

Add BreadcrumbList structured data to your Sanity-powered site. Help search engines understand your site hierarchy and display breadcrumb trails in SERPs.

About BreadcrumbList

BreadcrumbList helps search engines understand your site hierarchy and renders breadcrumb trails in SERPs. This improves navigation context for users and helps search engines index your pages more effectively.

Fields

Field	Type	Required	Description
`itemListElement`	array of objects	✓	Ordered list of ListItem objects representing the breadcrumb trail.
`itemListElement[].position`	number	✓	The position of the item in the breadcrumb trail (1-indexed).
`itemListElement[].name`	string	✓	The display name of the breadcrumb item.
`itemListElement[].item`	string	✓	The URL that the breadcrumb item links to.

Plugin Registration

sanity.config.ts

import { defineConfig } from "sanity";
import { schemaOrgBreadcrumbListPlugin } from "sanity-plugin-seofields/schema";

export default defineConfig({
  // ... your project config
  plugins: [
    schemaOrgBreadcrumbListPlugin(),
  ],
});

Schema Usage

Add the schemaOrgBreadcrumbList field to any document schema:

schemas/page.ts

import { defineField, defineType } from 'sanity'

export default defineType({
  name: 'page',
  title: 'Page',
  type: 'document',
  fields: [
    // ... your other fields
    defineField({
      name: 'schemaOrgBreadcrumbList',
      title: 'Breadcrumb List',
      type: 'schemaOrgBreadcrumbList',
    }),
  ],
})

GROQ Query

GROQ query

const query = groq`*[_type == "page"][0]{
  "breadcrumbs": schemaOrgBreadcrumbList {
    itemListElement[] {
      position,
      name,
      item
    }
  }
}`;

Next.js Component

app/layout.tsx

import { BreadcrumbListSchema } from "sanity-plugin-seofields/schema/next";

export default function Layout({ children }: { children: React.ReactNode }) {
  // Fetch your breadcrumb data from Sanity
  const page = await sanityClient.fetch(query);

  return (
    <html lang="en">
      <body>
        <BreadcrumbListSchema data={page.breadcrumbs} />
        {children}
      </body>
    </html>
  );
}

JSON-LD Output

Generated JSON-LD

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Docs",
      "item": "https://example.com/docs"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Schema.org",
      "item": "https://example.com/docs/schema-org"
    }
  ]
}

Was this page helpful?