BreadcrumbList schema

Breadcrumb navigation

A focused BreadcrumbList example for a three-level content hierarchy.

Make the hierarchy explicit

This page sits below the site's home page and the Guides section represented by the How-to route. The visible breadcrumb is keyboard-accessible navigation, and the schema graph mirrors its exact order.

The final item identifies the current page and does not need a link. Keeping that rule consistent makes the hierarchy clear to both readers and structured-data consumers.

For readers

A breadcrumb answers “where am I?” and offers a short route back to a broader section.

For the graph

The BreadcrumbList records each position and URL using the same labels shown in the navigation.

Inspect generated JSON-LD

This is the same schema graph emitted by SEO.astro; the demo only formats it for readable inspection.

{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://astro-seo-complement.pages.dev/breadcrumbs/#webpage","url":"https://astro-seo-complement.pages.dev/breadcrumbs/","name":"Breadcrumb navigation example","description":"A page that exposes its hierarchy as a BreadcrumbList."},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://astro-seo-complement.pages.dev/"},{"@type":"ListItem","position":2,"name":"Guides","item":"https://astro-seo-complement.pages.dev/how-to/"},{"@type":"ListItem","position":3,"name":"Breadcrumbs","item":"https://astro-seo-complement.pages.dev/breadcrumbs/"}]}]}