[Nuxt 3]: head metadata injected last in SSG build. Prevents link unfurling as css injected before meta tags. #32903
Description
Environment
- Operating System: Darwin
- Node Version: v23.8.0
- Nuxt Version: 3.18.0
- CLI Version: 3.27.0
- Nitro Version: 2.12.4
- Package Manager: npm@10.9.2
- Builder: -
- User Config: compatibilityDate, devtools, css, hooks, modules, image, iwbiNavModule, router, site, vite
- Runtime Modules: @nuxt/eslint@1.7.1, @nuxt/image@1.11.0, lenis/nuxt@1.3.8, @wellcertified/nav-module@1.3.0, @storyblok/nuxt@8.0.1, @nuxtjs/sitemap@7.4.3
- Build Modules: -
Reproduction
https://stackblitz.com/edit/github-uubvqtrg?file=static-html%2Fgenerated.html
Describe the bug
Our build is a statically-generated site rendered server-side. We're using useHead with useSeoMeta to populate meta tags with data fetched from Storyblok using useAsyncData.
The statically-generated HTML contains the required metadata tags, however some platforms – notably Slack and LinkedIn do not correctly unfurl our links.
Having examined the <head>, I noticed that tailwindcss and moduleprerender links are being injected before all of the meta tags, which I believe is blocking Slack and LinkedIn from effectively unfurling links. Yes, I know that technically they're not supposed to block crawlers from reading those tags, but I also know that Slack includes a range header in their HTTP requests when unfurling links – that range is the first 32kb of the response.
With that in mind, I think that the css and the moduleprerender being injected before meta tags IS an issue. I have not been able to find any documentation to suggest that it's possible to explicitly set the order of the <head> tags constructed by Nuxt outside of the priority key in useServerSeoMeta.
Out of sheer curiosity, I decided to hit up the url of my web page in postman with the same ranger headers as slack's link unfurls – range:bytes=0-32768. Unsurprisingly, the response did not include the meta tags – it barely included a third of the css injected before them. That's a bit of a pickle because Slack isn't the only platform to use range headers when unfurling links; for example, Facebook's is around 512kb.
At this point it's worth mentioning that the bulk of the response up to the meta tags is tailwind css, so if this issue is more appropriately logged with tailwind or tailwind/vite, please let me know!
I have provided a reproduction link here, but it's pretty useless because nuxt generate doesn't create a valid dist folder in Stackblitz. I have included a copy of one of our statically-generated html files in the /static-html directory of the reproduction since it's way too long to add here.
So if we can't manually order our tags when their content is dynamically fetched.... what CAN we do to ensure our SEO isn't tanked by the order in which Nuxt assembles <head>? And if Nuxt does in fact prioritise setting meta tags before everything else, what are we doing wrong that our meta is set last?
Additional context
No response