# Add Breadcrumb JSON-LD structured data to a page

`seo-in-nextjs` provides the `JsonLdForBreadcrumb` component to easily add Breadcrumb JSON-LD structured data to a page.

## Using the JsonLdForBreadcrumb component

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

   ```tsx
   // app/products/electronics/laptops/page.tsx
   export default function LaptopsPage() {
     return (
       <>
         <JsonLdForBreadcrumb
           itemList={[
             { name: "Home", route: "/" },
             { name: "Products", route: "/products" },
             { name: "Electronics", route: "/products/electronics" },
             { name: "Laptops", route: "/products/electronics/laptops" },
           ]}
           scriptKey="breadcrumb-json-ld"
         />
         <main>
           <h1>Laptops</h1>
           {/* Your content */}
         </main>
       </>
     );
   }
   ```

   <Aside>
     The component automatically converts relative routes to absolute URLs using
     the `baseUrl` from your `seo.config.ts` or `seo.config.js` configuration.
   </Aside>

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

<Aside type="tip">
  You can use the `JsonLdForBreadcrumb` component in layout files, but it's
  recommended to use it in page files instead. Since layouts can be nested,
  adding JSON-LD in layouts can lead to duplicate or conflicting structured data
  when parent and child layouts both include JSON-LD scripts.
</Aside>

## Related

View related API references.

[JsonLdForBreadcrumb](https://seo-in-nextjs.dlcastillop.com/docs/reference/json-ld-for-breadcrumb)