JSONLD elements preserved between page change with SvelteKit

Describe the bug I have multiple pages with FAQs and products. When I navigate from page A with FAQ-A and products-A to page B, I get both FAQ-A, FAQ-B and products-A and products-B in my head markup.

The setup is the follwing:

I’ve created a helper function to generate the JSONLD content

export function generateProductJSONLD(service: Service, image: string): Partial<JsonLdProps> {
  const priceValidUntil = new Date()
  priceValidUntil.setFullYear(priceValidUntil.getFullYear() + 1)
  const jsonLD: Partial<JsonLdProps> = {
    schema: {
      "@context": "https://schema.org",
      "@type": "Product",
      name: service.name,
      description: service.description,
      image,
      url: '<redacted_base_url>' + service.selfLink,
      brand: {
        "@type": "Organization",
        "name": "<redacted>"
      },
      sku: service.name,
      offers: {
        "@type": "Offer",
        price: service.price,
        priceValidUntil,
        url: '<redacted_base_url>' + service.selfLink,
        priceCurrency: "NZD",
        availability: "https://schema.org/InStock",
      }
    }
  }

  return jsonLD
}


export function generateFAQJSONLD(faqs: FAQ[]): Partial<JsonLdProps> {
  const jsonLD: Partial<JsonLdProps> = {
    schema: {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      mainEntity: faqs.map(faq => ({
        "@type": "Question",
        name: faq.question,
        acceptedAnswer: {
          "@type": "Answer",
          text: faq.answer
        }
      }))
    }
  }
  return jsonLD
}

This is then begin used in page A and page B

src/routes/services/pageA && src/routes/services/pageB:

<svelte:head>
	<title>Title</title>
</svelte:head>
<JsonLd {...generateFAQJSONLD(faqs)} />
<MetaTags {...generateMetaTags({ title: 'Title', description: "Description", url: '<redacted>' })} />

...HTML code...

{#each services.massage as service, idx}
<JsonLd {...generateProductJSONLD(service, serviceBanners[service.id])} />
....HTML code...

First time I navigate to page A, everything looks OK, but if I navigate to page B (using a simple html element, no fancy navigation), I then get all JSONLDs from page A and page B. Interestingly enough, the MetaTags are updated properly.

Reproduction You can see it live at https://amelies.co.nz navigate to services/massage, then using the menu, navigate to services/skin-and-makeup

Please let me know if I’m doing something zrong, or if there is a bug somewhere.

[Pixcell]

Seems it has fixed it! Thank you!

Although now google search console is giving me the error that the element has no name. Probably nothing to do with you guys, but if you have an idea, I’d be keen to hear it.

Anywya, thanks for the quick response and fix!

[Pixcell]

Thanks for letting me know, I’ll give it a try next week and let you know