I think you can make it work without leaving Gists by using a Cloudflare Worker as a workaround. The Worker sits in front of the renderer page and adds the og tags to the HTML before it's sent out. You'd also need to turn the SVGs in the Gist into a PNG for the og:image, and decide if you want a grid or just one image, any text formatting, and how long to cache...

I got it working in a quick local test (grid of all the reasoning efforts, cached per Gist, loads from the raw Gist URL so it doesn't hit the GitHub API rate limit).

Code + prompt + notes here: https://gist.github.com/matznerd/ece297107bd99ac028c7962c217...

Basic concept is to:

1. Put a Worker on the /markdown-svg-renderer route. Normal visitors get your page exactly as it is now.

2. When a link has ?url=<gist>, the Worker reads the Gist and adds og:title, og:description and og:image to the page's HTML. Link previewers like Slack and iMessage don't run JS, so this is the only way they see them.

3. og:image points to a second Worker URL (og.png?url=<gist>). It takes the SVGs from the Gist, puts them in a grid, and converts it to a PNG, since previewers won't show SVGs.

4. Both results get cached per Gist, so each Gist is only fetched and rendered once, even with a lot of traffic.

Things to customize:

- Title and description (mine: "gpt-6-luna SVG of a pelican riding a bicycle" / "6 runs, reasoning effort none to max")

- Grid of all runs vs just one image, plus layout, labels and font

- How long to cache (I used a day, but edited Gists keep the old preview until it expires)