Metadata is loading in after the script tags, discussion

[gregg-cbs]

Im not using your package however i have done pretty much the same thing - a component that you pass metadata info into and then it loads it into svelte head.

The issue I have noticed when using w3 validator is that the metadata component has no load time specificity or priority - this means that when rollup bundles the project it could load/run the metadata component last which can cause the metadata to show underneath the scripts and not be first in the head as recommended.

Which looks like this:

W3 Validator is saying that it does not appreciate the meta tags being loaded in last and having all the scripts above it - whether or not this impacts anything im not sure but it is interesting to know.

The error W3 is giving me:

[gregg-cbs]

Its also important to note this component gets bundled and will require the browser to download its javascript so it can run in the browser which i guess is unavoidable but also unnecessary as the component should not be included or run on the client-side.

Sveltes docs on SEO suggest the following:

[oekazuma]

Thanks for your help! So far I haven't had any major problems using it to create my company's website, but I think it would be good if I could improve the loading order. I don't have any ideas, but do you have any advice?

[gregg-cbs]

I came to post here because im not sure yet how to solve this for myself, I just wanted to raise it because I know its something that exists for both of us. As you say it doesnt seem to have any issues as far as I can tell but the W3 Validator does flag it: https://validator.w3.org/nu/?doc=https://www.utickets.co.za/events/soundland-festival-durban-july-after-party-by-dlala-thukzin

I think we would have to change our current implementation of SEO from a component that sets the metadata to using load functions that return the metadata and it gets set in the main layout.svelte.

Its hard to say if a different implementation will put the metadata above the script tags because there's no way to specify the importance of the svelte head you are setting.

Let me check this and feedback.

[gregg-cbs]

After trying what is recommended in the svelte documentation, an ssr approach, it is clear the issue is with svelte not having the ability to specify where the svelte head contents go in the head tag.

Even with this ssr approach, which i kind of prefer anyways (it still needs work), the head is jumbled and the meta tags are showing up underneath the script tags

Here we setup svelte:head in the layout component. We then set the default metadata in the layout load function and in each page we overwrite that with page specific metadata:

Preview URL (to see metadata in action) https://kmp4mt-5173.csb.app/

Code: https://codesandbox.io/p/devbox/jolly-wave-kmp4mt?file=%2Fsrc%2Flib%2Fmetadata%2Fmetadata.ts%3A8%2C17&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clxiqctar0007356kb11vznn8%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clxiqctar0002356kqjvunw0q%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clxiqctar0004356kpx6ecfbf%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clxiqctar0006356koriww7qe%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B100%252C0%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clxiqctar0002356kqjvunw0q%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxiqctar0001356kktp57umw%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clxirxs9m0002356jhzwxppi9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A8%252C%2522startColumn%2522%253A17%252C%2522endLineNumber%2522%253A8%252C%2522endColumn%2522%253A17%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Flib%252Fmetadata%252Fmetadata.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clxiqctar0002356kqjvunw0q%2522%252C%2522activeTabId%2522%253A%2522clxirxs9m0002356jhzwxppi9%2522%257D%252C%2522clxiqctar0006356koriww7qe%2522%253A%257B%2522id%2522%253A%2522clxiqctar0006356koriww7qe%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clxiqctar0004356kpx6ecfbf%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxiqctar0003356k6iriam9y%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clxiqctar0004356kpx6ecfbf%2522%252C%2522activeTabId%2522%253A%2522clxiqctar0003356k6iriam9y%2522%257D%257D%252C%2522showDevtools%2522%253Afalse%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D7

[gregg-cbs]

I raised an issue with svelte here: https://github.com/sveltejs/svelte/issues/12055

[oekazuma]

I see, that's an interesting result. Thanks for raising the issue on the Svelte side.