Metadata tags are ordered after hoisted style tags, which can make metadata undetectable by some platforms

[RJWadley]

Link to the code that reproduces this issue

https://github.com/RJWadley/next-meta-bug

To Reproduce

1. Include more than 32KB (to break slack) or 512KB (to break facebook) of style tags that have both a precedence and an href
2. Send the deployed link in a slack chat, or paste it in Facebook's post composer

For convenience, I've already deployed the provided sample:
https://next-meta-bug.vercel.app/fails will not display metadata when shared via Slack or Facebook
https://next-meta-bug.vercel.app/works will display metadata when shared via Slack or Facebook

Current vs. Expected behavior

The core of the issue is that Next will include it's metadata tags after any hoisted style tags. Most social sites do not parse the entire site when searching for metadata. This means if the style tags exceed a certain size they will be undiscoverable by some social sites.

Metadata tags that are important for social sharing should be ordered before metadata tags that are not to prevent the metadata tags from being undiscoverable.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:47 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.11.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.15.5
Relevant Packages:
  next: 15.3.2 // Latest available version is detected (15.3.2).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Metadata, CSS

Which stage(s) are affected? (Select all that apply)

Other (Deployed), Vercel (Deployed)

Additional context

Style tag hoisting was introduced in React 19, and it's by far the easiest way to reproduce this sort of issue. It might also be possible to reproduce with other types of tags, like if an obscene amount of some other resource were included.

Slack is the easiest to break, since it only loads the first 32kb of content. You may also find this article useful. it helped me diagnose this issue: https://blog.daveallie.com/slack-link-unfurling/