Add Breadcrumb JSON-LD structured data to a page

seo-in-astro provides the LayoutForBreadcrumb component to easily add Breadcrumb JSON-LD structured data to a page.

Using the LayoutForBreadcrumb component

1. Import the LayoutForBreadcrumb component into every page where you want to generate the JSON-LD data.

   app/products/electronics/laptops.astro

   ---
   import LayoutForBreadcrumb from "@dlcastillop/seo-in-astro/LayoutForBreadcrumb";
   ---
   
   <LayoutForBreadcrumb
     title="Laptops"
     description="All our laptops."
     ogImg="/og-laptops.png"
     itemList={[
       { name: "Home", route: "/" },
       { name: "Products", route: "/products" },
       { name: "Electronics", route: "/products/electronics" },
       { name: "Laptops", route: "/products/electronics/laptops" },
     ]}
     scriptId="breadcrumb-json-ld"
   >
     <main>
       <h1>Laptops</h1>
     </main>
   </LayoutForBreadcrumb>

   Note

   The component automatically converts relative routes to absolute URLs using the baseUrl from your seoInAstro integration configuration.

2. Check the generated JSON-LD by inspecting the head element of your page.

Related

View related API references.

LayoutForBreadcrumb API Reference for the LayoutForBreadcrumb component.