opentype.js VS opengraph

[3] https://github.com/opentypejs/opentype.js

With an SVG we can define our image as code, which is pretty neat. But SVG is not able to wrap texts. We can use opentype.js to calculate the width of our texts and to wrap it manually. Finally we have to convert the SVG to a PNG, because the most of social media platforms do not support SVG. This approach could work, but requires a lot of code and it is very complicated.

The repo is public so you can take a look if you're curious. I used opentype.js to convert the font into SVG in real-time. It was a PITA.

Still a few bugs to work out but I learned a ton making this! One of the cool things I learned is that you can read a font file, convert it to a base 64 string, slap it in a style element, and show that font in the browser! Huge thanks to opentype.js as well!

The Open Graph protocol enables any web page to become a rich object in a social graph. - Open Graph Protocol

OpenGraph docs

og:*: specified by the Open Graph Protocol for social media links rendering that determine their title, description, and images when you share them on social media or chat software such as Twitter(X), Discord, etc.

OpenGraph probably.

To explore more Open Graph properties, visit this website: Open Graph Protocol.

Since Netlify introduced Edge Functions we've had an ideal way to add a tiny bit of logic into our link shortener which will return a page template of our own to anything looking to unfurl the URL to display its opengraph image.

Recoil Gunworks doesn't have an Open Graph image tag defined in their product pages, so Reddit chooses something at random to use for a preview thumbnail. Neither OP nor the mods can do anything about it.