Svelte: Using components in <svelte:head> creates duplicate elements on hydration

[domingues]

If we include a component inside <svelte:head>:

<svelte:head>
<A/>
</svelte:head>

with A.svelte:

<meta property="x" content="y"/>

this meta is duplicated, not fixed by #4082.

If this is discouraged we should throw a warning.

[jhwheeler]

Same is occurring for me, this quite an issue for using Sapper for SEO-focused sites.

[rawoke083]

I feel this issue has been raised, fixed and re-appear a few times ? These days, whenever my SERPS or Rankings drop I have to go look at Sapper/Svelte first.

[domingues]

Note that this is only a problem in the reported example. There is no problem when done this way:

<!-- Main.svelte -->
<A/>

<!-- A.svelte -->
<svelte:head>
<meta property="x" content="y"/>
</svelte:head>

[rawoke083]

I get two two title tags doing as per your example with sapper

On Thu, 1 Oct 2020, 13:29 Fábio Domingues, [e-mail] wrote:

Note that this is only a problem in the reported example. There is no
problem when done this way:

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/sveltejs/svelte/issues/4533#issuecomment-702071210,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABKF7JAG73AWZGMEDYZC7QTSIRRZ3ANCNFSM4LE6ZRKQ
.

[jhwheeler]

Seems to be the same issue as https://github.com/sveltejs/svelte/issues/1607, since it also happens even if it's not in a component. But it doesn't happen for all elements, I'm having trouble figure out what the difference is.

[stephenhutchings]

If it helps, I'm currently working around this issue with the following.

import { afterUpdate } from "svelte"

afterUpdate(() => {
  Array.from(document.head.querySelectorAll("meta[data-svelte]"))
    .forEach(e => e.remove())
})

It's not a perfect solution, but works for me as all the pre-hydrated meta tags have data attributes, probably from an earlier solution to this issue.

[matt3224]

Im seeing this too when i do:

<svelte:head>
  {@html page.yoast_head}
</svelte:head>