--- title: "BreadcrumbList Schema" description: "Add BreadcrumbList structured data to Sanity documents — display navigation breadcrumbs in Google search results and help search engines understand your site hierarchy." canonical: https://sanity-plugin-seofields.thehardik.in/docs/schema-org/breadcrumb-list --- # 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 | Yes | Ordered list of ListItem objects representing the breadcrumb trail. | | `itemListElement[].position` | number | Yes | The position of the item in the breadcrumb trail (1-indexed). | | `itemListElement[].name` | string | Yes | The display name of the breadcrumb item. | | `itemListElement[].item` | string | Yes | The URL that the breadcrumb item links to. | ## Plugin Registration ```typescript 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: ```typescript 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 ```javascript const query = groq`*[_type == "page"][0]{ "breadcrumbs": schemaOrgBreadcrumbList { itemListElement[] { position, name, item } } }`; ``` ## Next.js Component ```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 ( {children} ); } ``` ## JSON-LD Output ```json { "@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" } ] } ```