Dynamic OG images + SSR in Nuxt 3

[agile stump]

Hi all,

I am facing some issues with the dynamically generated OG banners

They are automatically generated & stored after adding/deleting a startup.

In the meta-tags of each page, you can see the correct link to each banner being set.

However when sharing on Twitter or using a meta tags validator, it does not display the image.

I have SSR turned (ssr:true in nuxt config) on but I just made a call from Postman and it does look like the initial response does not contain any of my dynamically set meta tags. Also it just displays the empty document, no content in it.

Anyone an idea how I can handle this?

Thank you!

[dapper cobalt]

Hey, you should look into how Vue SSR works https://vuejs.org/guide/scaling-up/ssr.html

basically anything within a mount hook isn't going to run on the server, you should do this stuff within the top level setup

Also you should use nuxt-og-image 😛

[agile stump]

Thanks man!!! That was the issue indeed

and nuxt-og-image is better than what I was using too lol thank you haha

[agile stump]

quick question, PNG output does not seem to be of good quality, SVG is however.. I know SVG is not supported as og image.

any idea how I can improve image quality on PNG @dapper cobalt ? thank you!

[dapper cobalt]

hmm interesting, I haven't heard of this issue before

resvg does let you provide some extra options to improve the quality

i'm not sure if overriding these is exposed atm though

do you have an example I can use to benchmark against?

[agile stump]

here you go:
https://www.indielogs.com/fdarkaou/__og_image__/og.png

in the playground, it also looks like this, a bit pixelated. while SVG looks very sharp and clean

[dapper cobalt]

😥

[agile stump]

Oh, fixed now!