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

domingues · 2020-03-10T13:21:59Z

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.

P.S.:

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

<A/>

<svelte:head>
<meta property="x" content="y"/>
</svelte:head>

The text was updated successfully, but these errors were encountered:

jhwheeler · 2020-09-30T06:43:13Z

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

rawoke083 · 2020-10-01T06:56:51Z

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 · 2020-10-01T11:29:19Z

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 · 2020-10-01T12:07:50Z

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

…

On Thu, 1 Oct 2020, 13:29 Fábio Domingues, ***@***.***> wrote: Note that this is only a problem in the reported example. There is no problem when done this way:  <A/>  <svelte:head> <meta property="x" content="y"/> </svelte:head> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4533 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABKF7JAG73AWZGMEDYZC7QTSIRRZ3ANCNFSM4LE6ZRKQ> .

jhwheeler · 2020-10-03T08:42:33Z

Seems to be the same issue as #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 · 2020-10-13T04:46:01Z

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.

mattpilott · 2020-11-11T19:35:17Z

Im seeing this too when i do:

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

Maggi64 · 2020-12-16T10:43:05Z

It indeed makes working with meta tags quite hard. They are essential for production news sites. Would love to see a fix.
Happy holidays guys 🎄
Appreciate the work.

Shackless · 2021-03-18T17:14:06Z

I have the same issue on my sapper page as well. If I use a Svelte component to render the <meta> and <title> tags within <svelte:head>, old entries stay and new ones get appended to the <head> section of the page on navigation.
However, if I just add the tags directly to <svelte:head> without wrapping them in a Svelte component, they get replaced correctly when navigating to another page.

Annieloves · 2021-03-18T20:23:13Z

I have the same issue on my sapper page as well. If I use a Svelte component to render the <meta> and <title> tags within <svelte:head>, old entries stay and new ones get appended to the <head> section of the page on navigation.
However, if I just add the tags directly to <svelte:head> without wrapping them in a Svelte component, they get replaced correctly when navigating to another page.

jdgaravito · 2021-03-28T17:26:33Z

Same on Sapper ^0.28.0 , i have a Meta component, to save me to write many times the metatags.

`<script>
export let metadata = {};
</script>

{#if metadata.title}
  <title>{metadata.title}</title>
  <meta name="title" content={metadata.title} />
  <meta property="og:title" content={metadata.title} />
  <meta property="twitter:title" content={metadata.title} />
{/if}

{#if metadata.description}
  <meta name="description" content="Page Description" />
  <meta property="og:description" content="Page Description" />
  <meta property="twitter:description" content="Page Description" />
{/if} 

{#if metadata.image}
  <meta property="og:image" content="/thumbnail.jpg" />
  <meta
    property="twitter:image"
    content="/thumbnail.jpg"
  />
{/if} 

{#if metadata.imageAlt}
  <meta property="og:image:alt" content={metadata.imageAlt} />
  <meta property="twitter:image:alt" content={metadata.imageAlt} />
{/if}

{#if metadata.url}
  <meta property="og:url" content={metadata.url} />
  <meta property="twitter:url" content={metadata.url} />
{/if}

   {#if metadata.type}
    <meta property="og:type" content={metadata.type} />
{/if}

<meta property="twitter:card" content={metadata.twitterCard || "summary_large_image"} />

when i use it for each page i got the metatag even 3 times
svelte:head
<Meta {metadata}/>

<title>{metadata.title}</title> `

This is hell :(

stale · 2021-06-26T19:04:26Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

endigma · 2022-08-31T16:44:01Z

This also affects ld+json tags, {@html} appears to count as a component.

Conduitry · 2022-10-10T17:31:23Z

This should be fixed now in 3.51.0.

…as per conduitry on 'sveltejs/svelte#4533') ... the meta tag duplication SSR issue is not fixed. With this update I have commented out the custom hook function 'metaTagFixWhenSSR' as well

dongle-the-gadget · 2022-12-25T05:53:15Z

I was able to reproduce it in 3.55 though.

0x366 · 2023-01-19T10:27:23Z

Finally solved it! It wasn't working for me even in 3.55 simply because of Cloudflare. This is the explanation #8112

All you have to do is turnoff autominify and brotli in Cloudflare Speed -> Optimization

Shekhar-Zealous · 2023-09-05T05:12:43Z

@0x366 I tried the same as you did, but the issue still persists on my website :(
I have disabled the Auto minify, Brotli option from Content optimization.

There are some options that are still enabled:

Do I also have to disable the above 👀? Or is there any other way to sort this out.

Any help would be appreciated.
Thanks.

0x366 · 2023-09-05T11:04:36Z

I have both disabled, not sure if it's the case tho. I almost have all features disabled. Maybe it's worth a try to disable everything and see if it helps. And then turn on features one by one.

Shekhar-Zealous · 2023-09-06T14:06:54Z

@0x366 Thanks for the reply.

I checked disabling each configurations 1 by 1 still that didn't worked out.
At the end, I found out that the Auto minify configuration was used at another place in the Cloudflare dashboard from where I disabled the options and the issue was fixed right on :)

sunxyw · 2023-10-31T13:04:00Z

Finally solved it! It wasn't working for me even in 3.55 simply because of Cloudflare. This is the explanation #8112

All you have to do is turnoff autominify and brotli in Cloudflare Speed -> Optimization

Thanks a lot! This bothered me all day.

tanhauhau added the hydration label May 17, 2020

EricRovell mentioned this issue Nov 10, 2020

Duplicated <meta> tags on initial page using <svelte:head> #5668

Open

antony mentioned this issue Dec 9, 2020

Style tags are doubled #5757

Closed

stale bot added the stale-bot label Jun 26, 2021

pngwn added the temp-stale label Jun 26, 2021

stale bot removed the stale-bot label Jun 26, 2021

pngwn added stale-bot and removed feature: hydration temp-stale labels Jun 27, 2021

stale bot removed the stale-bot label Jun 27, 2021

pngwn added the temp-stale label Jun 28, 2021

maxiruani mentioned this issue Jul 31, 2022

[fix] Fix hydration duplicate svelte:head tag issue with @html expressions and nested components #7745

Merged

5 tasks

tanhauhau closed this as completed Sep 11, 2022

benmccann mentioned this issue Sep 17, 2022

Duplicated tags from component inside svelte:head after hydration sveltejs/kit#6858

Closed

0x366 mentioned this issue Jan 19, 2023

Duplicated tags with ssr oekazuma/svelte-meta-tags#556

Closed

darbymanning mentioned this issue Jun 2, 2023

<svelte:head> duplicate tags when using +layout.svelte sveltejs/kit#10089

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

domingues commented Mar 10, 2020 •

edited

Loading

jhwheeler commented Sep 30, 2020

rawoke083 commented Oct 1, 2020

domingues commented Oct 1, 2020

rawoke083 commented Oct 1, 2020 via email

jhwheeler commented Oct 3, 2020

stephenhutchings commented Oct 13, 2020

mattpilott commented Nov 11, 2020

Maggi64 commented Dec 16, 2020

Shackless commented Mar 18, 2021 •

edited

Loading

Annieloves commented Mar 18, 2021

jdgaravito commented Mar 28, 2021 •

edited

Loading

stale bot commented Jun 26, 2021

endigma commented Aug 31, 2022

Conduitry commented Oct 10, 2022

dongle-the-gadget commented Dec 25, 2022

0x366 commented Jan 19, 2023 •

edited

Loading

Shekhar-Zealous commented Sep 5, 2023 •

edited

Loading

0x366 commented Sep 5, 2023 •

edited

Loading

Shekhar-Zealous commented Sep 6, 2023

sunxyw commented Oct 31, 2023

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

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

Comments

domingues commented Mar 10, 2020 • edited Loading

jhwheeler commented Sep 30, 2020

rawoke083 commented Oct 1, 2020

domingues commented Oct 1, 2020

rawoke083 commented Oct 1, 2020 via email

jhwheeler commented Oct 3, 2020

stephenhutchings commented Oct 13, 2020

mattpilott commented Nov 11, 2020

Maggi64 commented Dec 16, 2020

Shackless commented Mar 18, 2021 • edited Loading

Annieloves commented Mar 18, 2021

jdgaravito commented Mar 28, 2021 • edited Loading

stale bot commented Jun 26, 2021

endigma commented Aug 31, 2022

Conduitry commented Oct 10, 2022

dongle-the-gadget commented Dec 25, 2022

0x366 commented Jan 19, 2023 • edited Loading

Shekhar-Zealous commented Sep 5, 2023 • edited Loading

0x366 commented Sep 5, 2023 • edited Loading

Shekhar-Zealous commented Sep 6, 2023

sunxyw commented Oct 31, 2023

domingues commented Mar 10, 2020 •

edited

Loading

Shackless commented Mar 18, 2021 •

edited

Loading

jdgaravito commented Mar 28, 2021 •

edited

Loading

0x366 commented Jan 19, 2023 •

edited

Loading

Shekhar-Zealous commented Sep 5, 2023 •

edited

Loading

0x366 commented Sep 5, 2023 •

edited

Loading