svelte:head does not work in social share #15661
Description
Describe the bug
When the page loads and finishes rendering svelte:head works. Code I add using <svelte:head> shows in the <head> exactly as expected, but when I share on Facebook, slack, etc. it doesn't "see" the meta. So I used Facebook debugger and tried rescrapping, it showed infered data. None of the actual meta is there nor the title tag.
When I click to "see exactly what our scraper sees for your URL" it gives me HTML with none of the info added to <svelte:head>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<link rel="icon" href="https://www.sarajonesforschoolboard.com/favicon.png">
<link type="text/css" rel="stylesheet" href="/reset.css">
<link type="text/css" rel="stylesheet" href="/global.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./_app/immutable/assets/Check.BzrPdZMJ.css" rel="stylesheet">
<link href="./_app/immutable/assets/0.D_JwTOLs.css" rel="stylesheet">
<link href="./_app/immutable/assets/StrongerSchools.BmoPHg11.css" rel="stylesheet">
<link href="./_app/immutable/assets/2.BFe7k0km.css" rel="stylesheet">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/nodes/0.DXRTb5fT.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/chunks/BPtYSS9E.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/chunks/B2zIZzML.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/chunks/CfE3-Sge.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/chunks/C4rXOx4K.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/nodes/1.B_j8nIzW.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/chunks/DmCpb60v.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/chunks/C-JQW5bl.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/chunks/CYgJF_JY.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/chunks/C6-3ofJo.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/nodes/2.DyxXfsff.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/chunks/BK-8kRTZ.js">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.sarajonesforschoolboard.com/_app/immutable/chunks/BYTgEk7q.js">
</head>
I tried switching to svelte-meta-tags but with the same results.
I tried enabling prerender, but I got the same result.
The only way I can get actual meta tags to show up is to edit the app.html, but that doesn't work dynamically.
I can understand rendering some things in the client, but metadata has to be rendered in the initial output to be effective.
I flagged this as "blocking all usage of svelte" because social sharing is absolutely necessary. I don't know how this project made it this long without this being flagged. If this isn't fixed I have to abandon this and completely rebuild this project using a different solution. Considering I am building this site "for the greater good" serving my community, I'm not getting paid so that really sucks losing a weekend, but it has to happen because it is "for the greater good." So I'd really appreciate if this can be addressed.
Reproduction
- Create a svelte/sveltekit site
- Add
<title>and<meta>tags using<svelte:head> - Deploy the site
- Try sharing with Facebook, slack, etc. It will not show the title, og:image, description, etc. (on slack it does not unfurl)
- Use Facebook debugger to inspect the URL. It will not show the correct data.
- Click the link to see what the scrapper sees (near bottom of the page). The HTML will not show any of the meta tags.
Logs
No logs because this is a bug that is not throwing an error.System Info
System:
OS: macOS 14.7
CPU: (10) arm64 Apple M1 Pro
Memory: 65.97 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
Browsers:
Chrome: 134.0.6998.166
Safari: 18.0.1
npmPackages:
svelte: ^5.0.0 => 5.25.3Severity
blocking all usage of svelte