search

sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
77.41k stars 4.03k forks source link

svelte:head to allow ordering because meta tags are underneath script tags #12055

Open gregg-cbs opened 2 weeks ago

gregg-cbs commented 2 weeks ago

Describe the problem

When setting metadata through the svelte:head tag there is no way to specify that you want the meta tags to be at the top of the documents head tag. It seems svelte is mounting script tags above the meta tags.

image

In production on my website W3 Validator is complaining that the meta tags are last in the head tag and that they are changing on mount: image

Whether or not this is affects metadata or seo im not sure but it is still something worth noting. We all know for the test of time meta tags come at the top of the head tag and scripts follow suit in the head or body.

Describe the proposed solution

It would be great if we could specify the order of the svelte:head so we can set our metadata svelte:head to be above the script tags or if svelte offered a way to set metadata similar to how nextjs does it or automagically sorted the head tags so meta tags are first.

Importance

nice to have

webJose commented 2 weeks ago

Have you tried moving the line %sveltekit.head% in app.html to the top of <head>?

As for non-SvelteKit projects, I guess there's no such line, right? I guess for Vite + Svelte projects, for instance, something else might be needed.

gregg-cbs commented 1 week ago

The %sveltekit.head% is the way svelte loads in all head data including scripts, moving it around will not accomplish anything.

webJose commented 1 week ago

Its position matters, though. I know for a fact since I recently moved it and worked. Its position does matter.

gregg-cbs commented 1 week ago

@webJose i appreciate your input and I understand what you are saying but unfortunately moving the sveltekit,head around in the app.html file is not the solution to this problem.

To make this more clear to you i show you the following.

Imagine I have 4 <svelte:head> tags in different components and pages, tell me what order this will render in the head? and how would you get the meta tags to be first in the head tag?

// in component 1
<svelte:head>
  <script src="script-1"></script>
  <script src="script-4"></script>
</svelte:head>

// on the page
<svelte:head>
  <script src="script-2"></script>
</svelte:head>

// on the page
<svelte:head>
  <meta name="description" content="{description}" >
  <meta name="keywords" content="{keywords}" >
</svelte:head>

// in component 3
<svelte:head>
  <script src="script-7"></script>
</svelte:head>