Meta OG tags not working - Svelte/JS

Help
1

Hello,

I have a project with Svelte/JS/SvelteKit and I am having problem to show the correct meta og image when sharing the link of a page (for example, sharing in Whatapp).

The link I want to share is: https://mysubdomain.mydomain.com/post-link/slugid
When I share it on WhatsApp, instead of showing the image that is in my meta og image (src/routes/post-link/[id]/+page.svelte), it shows the logo that is in app.html.

src/routes/post-link/[id]/+page.svelte:

<script>
  export let data;
  const post = data.post;
</script>

<svelte:head>
  <title>{post.title}</title>
  <meta name="description" content={post.description} />
  <!-- Open Graph Meta Tags -->
  <meta property="og:title" content={post.title} />
  <meta property="og:description" content={post.description} />
  <meta property="og:image" content={post.image} />
  <meta property="og:image:width" content="300" />
  <meta property="og:image:height" content="300" />
  <meta property="og:image:type" content="image/jpg" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content={$page.url.toString()} />
</svelte:head>

Notes:

  • The image is a secure link: https://mydomain.com/uploads/12345_postImage.jpeg .
  • The project is in Vercel, but i have my own domain assigned.
  • I tested with random parameters to avoid the cache.
  • When I inspect the page, in the Elements tab, all meta tags have the correct values.
  • I also notice that meta OG description is not showing as well. Does it has a character limit?
  • I also checked the my link on https://www.opengraph.xyz/ and there it does not work there as well.
  • This was working a while ago, maybe something changed at Vercel that i need to update in my code?
  • I tested the same data on a PHP page on the same server and it worked, this is why I think it may be something releated to Vercel?

Im stuck and could really use a hand, thank you!

4

Without seeing your site, my best guess is that the meta tags are not pre-rendered and are added client side, which would allow you to see them when you inspect manually but not allow any services to read them, because they only check the initial HTML payload

You can verify this for yourself by opening the network tab of your devtools and doing a hard refresh. Then, check the response of the / request to see if the meta tags are there in your HTML

If they’re not, then that confirms this issue and your solution will be to use SvelteKit’s pre-rendering to ensure the meta tags are included in the initial HTML

If not, would you be able to share the URL so I can help debug more closely?