opengraph VS textFit

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.

The idea behind the Semantic Web is, if anything, the exact opposite. Yes, it's still about meaning, in the end. But in this case, it's about the authors of content (mostly webpage developers) intentionally making their content more machine-discoverable, providing links and markup and metadata that computers can read without having to do finicky and error-prone extraction. Most major sites use some features of this! As an example, if you paste this page's URL into Discord, you'll get a fancy popup box with a little snippet of the text and maybe an icon, and this is through a Facebook-developed Semantic Web extension called OpenGraph.

We use textFit, a handy JS utility to make text fits its container.

So there's a great Javascript library called textfit https://github.com/STRML/textFit that will figure out the correct font size to fit a piece of text into a div. I'd love to wrap that as a Vue component, and I have had only partial results. One problem is that since textfit modifies the DOM objects directly it breaks Vue's reactivity (e.g. changing the text in question won't update), but I'm fairly sure I can plow through that and get that part to work eventually.