Adventures in OpenGraph (and Server-Side Rendering)

The META

We all know the little previews you get when sending a link via Discord, Signal or WhatsApp. You get a title, maybe a description and/or an image. That's neat, it gives you a good idea what you're about to open or read. So how does that work?

Let me introduce you to two concepts: The OpenGraph Protocol and Twitter Cards (yes I refuse to call it X).

The two are a set of meta-tags that describe your website and give whoever wants a set of instructions on how to display a preview. For reference, here's the OpenGraph tags from my previous post

A collection of meta Tags - html

  <meta property="og:title" content="Relaunch and a blog | FloRadical" />
  <meta property="og:url" content="https://floradical.net/blog/relaunch-and-a-blog" />
  <meta property="og:type" content="article" />
  <meta property="og:description" content="I talk about relaunching this website and my plans for it."/>
  <meta property="og:image" content="https://floradical.net/api/media/file/IMG_20260307_131747576-1200x630.jpg" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:type" content="image/jpeg" />
  <meta property="og:image:alt" content="A photo of a bumblebee sitting in a crocus flower" />

Discord (or whatever) reads those tags and then constructs the preview around them. Easy-peasy, job's a good'un.

That said, the parsing of said tags is only really done on the initial HTML of a site. If you use an SPA framework (like) me you have a few things to take care of. The solution? Sever-side Rendering. Instead of expecting the client to load a bunch of JavaScript code you just render the page on the server and serve the final page.

So I set that up, added some logic that dynamically adds the required metadata and called it a day.

Well, I would've if I also hadn't run into a config issue that took an embarassingly long time to figure out (because I didn't read the logs!). Fun stuff.

Turns out Angular SSR has some SSRF (Server-Side Request Forgery) protections built in but those need to be configured correctly!

So now I have previews via OpenGraph running. I suppose I'll have to refactor all that eventually to add support for twitter cards so I can polish them up a bit.