Open
Nerglej
opened this issue 1 year ago
•
0 comments
Describe the bug
TL;DR
Seperate
and <meta> tags in <span>svelte:head</span> is fine, a custom component containing <title> and <meta> tags in <span>svelte:head</span> is not fine.
<h4>The problem</h4>
<p>Before we simply placed the title in a </p><title> tag and metadata in <meta> tags in svelte:head. It worked without flaws, but we were limited.
Now I've created a simple SEO component that takes a SEO object (simplified in REPL below). This SEO component is meant to be placed in svelte:head components on all pages where SEO is provided from our CMS. Before we just used a few datapoints from the page itself like the h1 tag as a <title>, but now we can customize a lot of stuff. Therefor a generalized component were needed.
<p>Now, the SEO itself works fine for a page visit, until we navigate. The previous </p><title> and <meta> tags aren't removed and the new ones are just appended behind everything and doesn't take effect in the browser level.
<p>I'm not sure if this is intended behavior. If it is, it should be clearly stated in the documentation for either SvelteKit or Svelte. Or even worse, if we're blocked by how the internals work, we should give a clear, and preferably simple, alternative. I'm currently considering a context with SEO info in the root layout, but I haven't experimented with that yet😅</p>
<p>Otherwise, thanks for the amazing framework, I've really enjoyed working with it. This is just a minor problem, I've experienced across a couple of different projects now, so I decided to make an issue.</p>
<p>Have a nice day😄</p>
<h3>Reproduction</h3>
<p><code>lib/Seo.svelte</code></p>
<pre><code class="language-svelte"><script>
export let title;
export let metaDescription;
</script>
<title>{title}</title>
<meta name="description" content={metaDescription} />
<meta property="og:description" content={metaDescription} />
</code></pre>
<p><code>routes/+page.svelte</code></p>
<pre><code class="language-svelte"><script>
import Seo from '$lib/Seo.svelte'
</script>
<svelte:head>
<Seo title="Main page" metaDescription="Description for main page" />
</svelte:head>
<h1>Main page</h1>
<a href="/sub">Go to subpage</a>
</code></pre>
<p><code>routes/sub/+page.svelte</code></p>
<pre><code class="language-svelte"><script>
import Seo from '$lib/Seo.svelte';
</script>
<svelte:head>
<Seo title="Subpage title" metaDescription="This is a description for the subpage"></Seo>
</svelte:head>
<h1>Subpage</h1>
<a href="/">Go to main page</a>
</code></pre>
<p>Reproducible repo: https://github.com/Nerglej/sveltekit_head_bug</p>
<p>I also create a SvelteLab REPL if that's okay:
https://www.sveltelab.dev/87889fasa3uab9m</p>
<p>To view the problem in the REPL, use your browser debugger (usually F12), and inspect the iframe where the content is rendered. Under the tag you can find the </p> where each navigation just appends new titles and metatags
<h3>Logs</h3>
<p><em>No response</em></p>
<h3>System Info</h3>
<pre><code class="language-Shell">System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
@sveltejs/adapter-auto: ^3.0.0 => 3.2.2
@sveltejs/kit: ^2.0.0 => 2.5.16
@sveltejs/vite-plugin-svelte: ^3.0.0 => 3.1.1
svelte: ^4.0.5 => 4.2.18
vite: ^5.0.0 => 5.3.1
</code></pre>
<h3>Severity</h3>
<p>serious, but I can work around it</p>
<h3>Additional Information</h3>
<p>I ran the System Info command in the SvelteKit REPL mentioned above, so you should roughly get the same results. I have the same problem on three machines, both Windows and Linux, so I don't suspect the system is the problem but either SvelteKit or Svelte.</p>
sveltejs
