# Breadcrumb Navigation Path JSON-LD

**URL:** <https://community.weweb.io/t/breadcrumb-navigation-path-json-ld/6310>\
**Category:** How do I?\
**Created:** [January 10, 2024, 8:56pm UTC](https://community.weweb.io/t/breadcrumb-navigation-path-json-ld/6310 "2024-01-10T20:56:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sebschaeffer](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/sebschaeffer/32/7089_2.png) [@sebschaeffer](https://community.weweb.io/u/sebschaeffer)\
**Post date:** [January 10, 2024, 8:56pm UTC](https://community.weweb.io/t/breadcrumb-navigation-path-json-ld/6310/1 "2024-01-10T20:56:46Z")

</div>

Hi team,

I am trying to add a SEO friendly breadcrumb navigation to one of my dynamic collection pages. I want it to automatically update based on which category was loaded. Is there a way to do this in weweb?

I cant seem to find a bind function in the custom code section for dynamic pages. Am I missing something? The JSON-LD should look something like this

```auto
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>

```

But each listItem should be dynamic.

Thanks, Seb

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [January 10, 2024, 9:46pm UTC](https://community.weweb.io/t/breadcrumb-navigation-path-json-ld/6310/2 "2024-01-10T21:46:49Z")

</div>

If this is not required to be injected at a specific place within the DOM (e.g. in the `<head>` of the document) I’d suggest you just use a HTML block as the first/last element in your WeWeb page and do your thing there.

---

<div class="post-metadata">

**Author:** ![sebschaeffer](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/sebschaeffer/32/7089_2.png) [@sebschaeffer](https://community.weweb.io/u/sebschaeffer)\
**Post date:** [January 10, 2024, 10:12pm UTC](https://community.weweb.io/t/breadcrumb-navigation-path-json-ld/6310/3 "2024-01-10T22:12:43Z")

</div>

Thanks! I guess thats my fallback right now. Googles doc puts it in the header section but not 100% sure if thats necessary.

> **[How To Add Breadcrumb (BreadcrumbList) Markup | Google Search Central...](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=en)**
>
> Discover how adding breadcrumb markup to your web pages can help users understand and explore your website more effectively.

Will do more research, thanks!