Metatags in svelte pages aren't considered by Discord, but it works when I put it in app.html, but I can't make website embed on discord dynamic anymore

[nekoniyah]

Describe the bug

Metatags in svelte pages aren't considered by Discord, but it works when I put it in app.html, but I can't make website embed on discord dynamic anymore.

+layout.svelte // Don't work

<MetaTags
	title="Persona DB"
	description="Find and host any original characters"
	keywords={'persona, db, database, oc, ocs, original character, nekomancer, host, discover, fursona, fursonas, videogame, video, games, game, video games, hosting, character, characters, fictional, fantasy, isekai, anime, animes, mangas, create, add, manga, weeb, otaku, furry, furries, dragons, protogen, sergal, dragon, kemono, fan'.split(
		', '
	)}
	openGraph={{
		type: 'website',
		url: new URL($page.url.pathname, $page.url.origin).href,
		locale: 'en_IE',
		title: 'Persona DB',
		description: 'Find and host any original characters',
		images: [
			{
				url: 'https://persona-db.xyz/favicon.png',
				width: 700,
				height: 700,
				alt: 'favicon'
			}
		]
	}}
/>

profile/+page.svelte // Don't work

<svelte:head>
	<title>Persona - My Profile</title>
	<meta name="author" content="Persona DB - My Profile" />
	<meta name="description" content="Find and host any original characters" />

	<meta property="og:title" content="Persona DB" />
	<meta property="og:description" content="Find and host any original characters" />
	<meta property="og:image" content="https://persona-db.xyz/favicon.png" />
</svelte:head>

Only when I put the metatags in the app.html it works, but otherwise it doesn't show the embed when I put them in the svelte pages, while metatags are shown in the devtools of my browser.

Reproduction

https://github.com/nekomancer0/Persona-db

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 1.13 GB / 7.86 GB
  Binaries:
    Node: 21.6.1 - ~\node_modules\.bin\node.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.59)
    Internet Explorer: 11.0.22621.1

Severity

annoyance

[sjonesdev]

I'm not sure if I can help any further but from my initial investigation, it seems to be an issue with using page

[trueadm]

Are you using Svelte 4 or Svelte 5?

[PaperPrototype]

you may need to add

	<meta name="twitter:card" content="summary_large_image" />

this is the full meta that I use:

<svelte:head>
	<title>Purchase Required - {course.name} - Sparker.gg</title>
	<meta name="title" content="Purchase Required - {course.name} - Sparker.gg" />
	<meta name="description" content="Purchase required to access {course.name}" />
	<meta name="image" content={course.thumbnail_url} />

	<meta property="og:title" content="Purchase Required - {course.name} - Sparker.gg" />
	<meta property="og:description" content="Purchase required to access {course.name}" />
	<meta property="og:image" content={course.thumbnail_url} />
	<meta property="og:url" content="https://sparker.gg/tutorials/{course.id}" />
	<meta name="twitter:card" content="summary_large_image" />
</svelte:head>

Also meta tags don't work if you put them in a +layout.svelte (at least for me)