oekazuma/svelte-meta-tags

JSONLD elements preserved between page change with SvelteKit

Pixcell opened this issue · 7 comments

Pixcell commented

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.

oekazuma commented

I don't know if this is related to this issue, but Svelte is currently reporting some bugs related to hydration when output using @html for <head>.

You may be able to work around this by outputting JSON-LD to <body>. Please try it.

Search engine bots seem to recognize the output in <body> without any problem.

<JsonLd
  output="body"
/>
Pixcell commented

I'll give it a shot, thanks

Pixcell commented

It does seem to fix it, I'm waiting to see if google comes back to me with any other issues.
Could you let me know when/if this gets solved on the Svelte side of things? I feel dirty leaving those in the body...

oekazuma commented

Ok.

There are several reported issues affected by Svelte's hydration glitch, so I will leave this issue open until Svelte fixes it.

oekazuma commented

@Pixcell

We have made some improvements to the script tags used in JSON-LD.

I don't know if this will fix it, but please install v2.5.5 and give it a try.

If you continue to have problems after trying, you may still need to wait for a fix on the Svelte side...

Pixcell commented

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

  • 👍1
Pixcell commented

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!

  • 🎉1