svelte
svelte copied to clipboard
sveltejs
svelte:head to allow ordering because meta tags are underneath script tags
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.
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:
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
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.
The %sveltekit.head% is the way svelte loads in all head data including scripts, moving it around will not accomplish anything.
Its position matters, though. I know for a fact since I recently moved it and worked. Its position does matter.
@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>
I have a somewhat similar problem.
Using svelte:head prints the content in reverse order.
This is not ideal for several reasons:
- It disrupts the CSS cascade, as styles from lower in the tree are printed before those higher up
<title>and meta tags shared via a layout are affected- it is counterintuitive given how layouts, pages, and components are composed
EDIT: Found a related issue: #15765
