Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

<link> and <meta> inside <svelte:head> are duplicated in SSR generated HTML when bind:value is present #7879

Closed
mihaon opened this issue Sep 18, 2022 · 5 comments · Fixed by #9124
Closed

<link> and <meta> inside <svelte:head> are duplicated in SSR generated HTML when bind:value is present #7879

mihaon opened this issue Sep 18, 2022 · 5 comments · Fixed by #9124

Comments

@mihaon
Copy link

mihaon commented Sep 18, 2022 •
edited
Loading

Describe the bug

See title and reproduction.

Reproduction

Steps

Create app:

src/routes/+page.svelte

<svelte:head>
	<link rel="canonical" href="/test">
	<meta name="description" content="test">
</svelte:head>
<script>
	import Foo from '$lib/Foo.svelte'
	let bar
</script>
<Foo bind:bar/>

src/lib/Foo.svelte

<script>
	export let bar = null
</script>

svelte.config.js

import adapter from '@sveltejs/adapter-node'

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter(),
	}
}

export default config

vite.config.js

import { sveltekit } from '@sveltejs/kit/vite'

const config = {
	plugins: [sveltekit()],
}

export default config

package.json

{
	"name": "my-app",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview"
	},
	"devDependencies": {
		"@sveltejs/adapter-node": "next",
		"@sveltejs/kit": "next",
		"svelte": "^3.44.0",
		"vite": "^3.1.0"
	},
	"type": "module"
}

Then execute npm run build && node build and view the source HTML through "View page source" (not through "Inspect").

Expected result

view-source:http://localhost:3000/ contains only one <link rel="canonical"> and only one <meta name="description">

Actual result

view-source:http://localhost:3000/ contains duplicates:

<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.png" />
<meta name="viewport" content="width=device-width" />

<link rel="canonical" href="/test" data-svelte="svelte-11vcwl6">
<meta name="description" content="test" data-svelte="svelte-11vcwl6">

<link rel="canonical" href="/test" data-svelte="svelte-11vcwl6">
<meta name="description" content="test" data-svelte="svelte-11vcwl6">
</head>

Repo

Repo with example for reproduction: https://github.com/mihaon/svelte-issues/tree/6875

Logs

No response

System Info

Svelte version: 3.50.1
SvelteKit version: 1.0.0-next.484
Vite version: 3.1.2

Severity

annoyance

Additional Information

No response
@benmccann benmccann transferred this issue from sveltejs/kit Sep 19, 2022
@mihaon mihaon mentioned this issue Nov 11, 2022
Closed
@tahergalal
Copy link

any news here as this is still an issue? is there a workaround?

@0x366
Copy link

0x366 commented Jan 15, 2023 •
edited
Loading

Just hit hard with that issue, my website has completely lost all pages in index for google, because of this bug of duplicated metatags (using svelte ^3.55)

@mihaon
Copy link
Author

mihaon commented Feb 18, 2023

I use this workaround.

hooks/server.js

export async function handle({event, resolve}) {
	return await resolve(event, {
		transformPageChunk: ({ html }) => {
			return html
				.replace(/<link\s+rel="canonical"[^>]*>/, '')
				.replace(/<meta\s+name="description"[^>]*>/, '')
				.replace(/<meta\s+name="keywords"[^>]*>/, '')
				.replace(/<meta\s+property="og:url"[^>]*>/, '')
				.replace(/<meta\s+property="og:title"[^>]*>/, '')
				.replace(/<meta\s+property="og:image"[^>]*>/, '')
				.replace(/<meta\s+property="og:description"[^>]*>/, '')
		}
	})
}

@mathg
Copy link

mathg commented Apr 27, 2023

This has been an issue for me as well. All the metas except for <title> tag are duplicated.

@jdkdev
Copy link

jdkdev commented May 10, 2023 •
edited
Loading

For me as well

  "dependencies": {
      "mdsvex": "^0.10.6",
    "svelte-hmr": "^0.15.1",
    "vite-main-js": "^0.0.1"
    "@roxi/routify": "^3.0.0-next.153",
    "cross-env": "^7.0.3",
    "npm-run-all": "^4.1.5",
    "svelte": "^3.59.1",
   "vite": "^4.3.5",
   "@sveltejs/vite-plugin-svelte": "^2.2.0",
   }

@gtm-nayan gtm-nayan mentioned this issue Aug 20, 2023
Merged
5 tasks
dummdidumm pushed a commit that referenced this issue Aug 28, 2023
@gtm-nayan
fix: head duplication when binding is present (#9124)
d5839ef 
fixes #7879
fixes #4982
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: head duplication when binding is present sveltejs/svelte
5 participants
@mathg @mihaon @0x366 @tahergalal @jdkdev