<svelte:head> creates duplicate elements on hydration #1607

morleytatro · 2018-07-21T19:42:21Z

When hydrating SSR-generated Svelte components, the svelte:head component creates duplicate elements. This seems to be true for all elements other than title. Please see the following repo:
https://github.com/morleytatro/svelte-head-test

Steps to repro:

npm install
npm run start
Visit localhost:3333 in your browser.
Check the two meta tags and the canonical link element.

morleytatro · 2018-07-25T17:32:11Z

I just checked, and this issue is plaguing Sapper as well. I've noticed that other frameworks add a data attribute to specify which elements are tracked. Would it help to add a data-svelte-head attribute to head elements to properly hydrate them on initial page load?

jackyef · 2019-04-15T13:43:10Z

Hi, is there any fix for this yet? We are using version 2.16.0 and are having this issue as well.

evdama · 2019-06-29T18:41:44Z

I've been doing Sapper lighthouse tests because I want perfect SEO. Lighthouse told me to add <meta name="Description" content="Put your description here."> to each page. So I did, using <svelte:head> on each page e.g.

<svelte:head>
	<title>About</title>
	<meta name="description" content="foo bar baz">
</svelte:head>

I just added the meta line, all else was there before, on each page. After adding the meta line I'm seeing two issues:

doesn't hot reload anymore in dev mode, I have to manually click reload
it only puts the first meta inside head (currently index.svelte), but then on every other page i.e. no matter what page I visit, it's always the same meta tag incl. name and content; in fact, it seems head doesn't change at all or at least not the meta with name and content.
title works fine though, renders in dev mode and is also different on every page

evdama · 2019-07-01T12:09:34Z

PR for this issue sveltejs/sapper-template#158

kuechlerm · 2019-12-12T12:30:14Z

I cannot reproduce the problem with the current REPL (3.16.4).
Can this issue be closed?

Conduitry · 2019-12-12T14:24:47Z

What were you doing to test? The REPL doesn't perform any hydration.

kuechlerm · 2019-12-12T16:51:11Z

@Conduitry Sorry, I overlooked that point.

Conduitry · 2020-01-10T02:47:16Z

Presumably the way to address this would be to have the SSR code mark or delimit its <head> elements in some way so that the client-side hydration code can see what needs to be replaced.

One fairly obvious way to do this would be to a unique hash-based string for each component that's added as an attribute to each element in the component's SSR'd contribution to the <head>. This won't work with {@html} though, where we can't see the elements at compile time. I don't think we want to have the SSR code parsing through the HTML and adding the attributes at runtime.

Another option is some sort of wrapping element, or separating elements before and after this component's <head> portion. We need to now run afoul of HTML rules though, and I think there's a pretty limited number of tags that are allowed in the head. Perhaps there's some innocuous tag (maybe a <meta> tag with no name or content?) that we can stick in there, and then the hydration code is responsible for looking for these.

nsivertsen · 2020-01-10T10:12:04Z

react-helmet uses dataset attributes for this:

<meta data-react-helmet="true" property="og:type" content="website">

Conduitry · 2020-01-13T17:02:45Z

Fixed (finally!) in 3.17.0.

jhwheeler · 2020-09-29T16:48:36Z

@Conduitry Unfortunately this is happening again. We're using Sapper 0.28.9 and Svelte 3.28.0 (it was happening with 0.28.8 and 3.27.0 as well; I upgraded to see if that would fix it, but no luck).

I'm having trouble pinpointing exactly what the pattern is, since not every route's <svelte:head> is duplicated on the client side. In our main _layout file the entire contents of <svelte:head> are duplicated, and in some individual routes; but not every single one.

I'll try to create a repro repo and post it tomorrow.

rawoke083 · 2020-10-01T06:48:54Z

@Conduitry Unfortunately this is happening again. We're using Sapper 0.28.9 and Svelte 3.28.0 (it was happening with 0.28.8 and 3.27.0 as well; I upgraded to see if that would fix it, but no luck).

Confirmed me as well.
Using Svelte 3.280 and Sapper 0.28.9

mattpilott · 2020-11-11T19:33:56Z

Im seeing this too when i do:

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

benmccann · 2020-11-11T19:56:36Z

@matt3224 no need to post the same comment on multiple issues. you can simply give a thumbs up on the issue if you'd like to indicate it's one you care about

jdgaravito · 2021-03-28T17:24:09Z

any new on this? got all my meta tags duplicated

jhwheeler · 2021-04-09T09:17:57Z

This issue should be re-opened 🙏

benmccann · 2021-04-10T02:46:15Z

I have a SvelteKit app deployed to production at https://c3.ventures and am not seeing this there. Maybe it's just an issue with Sapper?

Maggi64 · 2021-04-11T07:57:47Z

Sveltekit also solved this for me

benmccann · 2021-04-11T13:26:49Z

SvelteKit uses vite-plugin-svelte which automatically sets the hydratable flag to true. If you're hitting this you may want to check that you've set that flag appropriately

angelmeraz · 2021-08-10T10:11:21Z

Still experiencing this with sapper v0.29.2 & svelte v3.42.1

keeganpoppen · 2021-11-27T00:07:21Z

i am also having this problem in most recent svelte version, unfortunately. only with <script> tags, not with <style>. will keep digging to see if i can find out what is going on...

abhinandan-chakraborty · 2022-02-05T07:42:32Z

Tested on SvelteKit Project: Svelte v3.44.0 + SvelteKit v1.0.0-next.260
Solution:

[optional step] Created a separate Meta component with all fields (including <svelte:head> tag inside this component)
[optional step] Added this Meta component in all relevant routes
Now go to "App.html" in src directory -> Replace all the tags in <head> tag except for %svelte.head%
That's it. now only the tags from your Meta component will appear

winston0410 · 2022-04-10T21:08:55Z

SvelteKit uses vite-plugin-svelte which automatically sets the hydratable flag to true. If you're hitting this you may want to check that you've set that flag appropriately

@benmccann Do you mean that we should disable hydration in that case to prevent duplication?

winston0410 · 2022-04-10T22:06:19Z

I am seeing duplication for the generated json-ld, and I cannot find a solution right now. Any viable solution for this?

I generate the json as string:

export const mkSchema = (thing: Schema) => {
	return `<script type="application/ld+json">${JSON.stringify(thing, null, 2)}</script>`;
};

And I am using it in __layout.svelte like this:

<svelte:head>
    {@html mkSchema(orgSchema)}
    {@html mkSchema(webpageSchema)}
    {@html mkSchema(websiteSchema)}
</svelte:head>

benmccann · 2022-04-11T15:52:29Z

@benmccann Do you mean that we should disable hydration in that case to prevent duplication?

No. I meant that if you're using Svelte without SvelteKit you may want to make sure your project is configured appropriately

avoonix · 2022-05-07T16:26:04Z

I'm using svelte 3.48.0 and sveltekit 1.0.0-next.326_svelte@3.48.0 and this issue still occurred when the meta elements were not direct children of svelte:head:

<svelte:head>
	<Meta title={variables.siteName} {url} {description} {image} /> <!-- contains multiple meta elements; this causes duplication --> 
</svelte:head>

<svelte:head>
	<meta itemprop="name" content={title} /> <!-- this works as expected -->
	<meta itemprop="description" content={description} />
</svelte:head>

rawoke083 · 2022-05-07T16:36:00Z

I love svelte, I really do ! But gheesh, one of the advantages of svelte(kit) is the better SEO etc. After almost two years. I unfortunately have to move on and can not in good faith, choose or recommend any of svelte(kit) for any SEO sensitive projects.

…

On Sat, May 7, 2022 at 6:26 PM Avoonix ***@***.***> wrote: I'm using svelte 3.48.0 and sveltekit ***@***.*** and this issue still occurred when the meta elements were not direct children of svelte:head: <svelte:head> <Meta title={variables.siteName} {url} {description} {image} />  </svelte:head> <svelte:head> <meta itemprop="name" content={title} />  <meta itemprop="description" content={description} /> </svelte:head> — Reply to this email directly, view it on GitHub <#1607 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABKF7JEWG54KOX2FKA3D3ALVI2KSRANCNFSM4FLG6WUQ> . You are receiving this because you commented.Message ID: ***@***.***>

-- Regards Jacques du Rand https://www.FibreTiger.co.za

benmccann · 2022-05-07T16:36:33Z

@avoonix can you file a new issue? I'm afraid your comment would get lost here given how large this thread is

monarchwadia · 2022-10-26T08:40:11Z

Could we please reopen this? This is still an issue in Oct 2022.

dummdidumm · 2022-10-26T08:41:59Z

Please open a new issue with a proper reproduction, it's maybe the same outcome but likely not the same root cause.

monarchwadia · 2022-10-26T08:52:09Z

@dummdidumm #7973

0x366 · 2023-01-17T07:38:36Z

related svelte-meta-tags#556

Rich-Harris added the bug label Aug 28, 2018

evdama mentioned this issue Jul 1, 2019

Pwa audit/add meta description to routes sveltejs/sapper-template#158

Closed

tanhauhau mentioned this issue Dec 10, 2019

fix hydrating header meta tags #4082

Merged

tanhauhau added the has pr label Jan 12, 2020

Conduitry closed this as completed in #4082 Jan 13, 2020

ghost mentioned this issue Jan 23, 2020

Remove head hydration workaround sveltejs/sapper#1066

Closed

jhwheeler mentioned this issue Oct 3, 2020

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

Closed

dominikg mentioned this issue Apr 11, 2022

@html content in <svelte:head> is duplicated #7444

Closed

monarchwadia mentioned this issue Oct 26, 2022

svelte:head results in dupe metatags #7973

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

<svelte:head> creates duplicate elements on hydration #1607

<svelte:head> creates duplicate elements on hydration #1607

morleytatro commented Jul 21, 2018

morleytatro commented Jul 25, 2018

jackyef commented Apr 15, 2019

evdama commented Jun 29, 2019 •

edited

evdama commented Jul 1, 2019

kuechlerm commented Dec 12, 2019

Conduitry commented Dec 12, 2019

kuechlerm commented Dec 12, 2019

Conduitry commented Jan 10, 2020

nsivertsen commented Jan 10, 2020

Conduitry commented Jan 13, 2020

jhwheeler commented Sep 29, 2020 •

edited

rawoke083 commented Oct 1, 2020

mattpilott commented Nov 11, 2020

benmccann commented Nov 11, 2020

jdgaravito commented Mar 28, 2021

jhwheeler commented Apr 9, 2021

benmccann commented Apr 10, 2021

Maggi64 commented Apr 11, 2021

benmccann commented Apr 11, 2021

angelmeraz commented Aug 10, 2021

keeganpoppen commented Nov 27, 2021

abhinandan-chakraborty commented Feb 5, 2022

winston0410 commented Apr 10, 2022

winston0410 commented Apr 10, 2022

benmccann commented Apr 11, 2022

avoonix commented May 7, 2022

rawoke083 commented May 7, 2022 via email

benmccann commented May 7, 2022

monarchwadia commented Oct 26, 2022

dummdidumm commented Oct 26, 2022

monarchwadia commented Oct 26, 2022

0x366 commented Jan 17, 2023

<svelte:head> creates duplicate elements on hydration #1607

<svelte:head> creates duplicate elements on hydration #1607

Comments

morleytatro commented Jul 21, 2018

morleytatro commented Jul 25, 2018

jackyef commented Apr 15, 2019

evdama commented Jun 29, 2019 • edited

evdama commented Jul 1, 2019

kuechlerm commented Dec 12, 2019

Conduitry commented Dec 12, 2019

kuechlerm commented Dec 12, 2019

Conduitry commented Jan 10, 2020

nsivertsen commented Jan 10, 2020

Conduitry commented Jan 13, 2020

jhwheeler commented Sep 29, 2020 • edited

rawoke083 commented Oct 1, 2020

mattpilott commented Nov 11, 2020

benmccann commented Nov 11, 2020

jdgaravito commented Mar 28, 2021

jhwheeler commented Apr 9, 2021

benmccann commented Apr 10, 2021

Maggi64 commented Apr 11, 2021

benmccann commented Apr 11, 2021

angelmeraz commented Aug 10, 2021

keeganpoppen commented Nov 27, 2021

abhinandan-chakraborty commented Feb 5, 2022

winston0410 commented Apr 10, 2022

winston0410 commented Apr 10, 2022

benmccann commented Apr 11, 2022

avoonix commented May 7, 2022

rawoke083 commented May 7, 2022 via email

benmccann commented May 7, 2022

monarchwadia commented Oct 26, 2022

dummdidumm commented Oct 26, 2022

monarchwadia commented Oct 26, 2022

0x366 commented Jan 17, 2023

evdama commented Jun 29, 2019 •

edited

jhwheeler commented Sep 29, 2020 •

edited