ogshot

Open Graph images from your own HTML and CSS, rendered and cached on Cloudflare Workers.

GitHub

Try it

Allowed hosts: emailable.com *.emailable.com. Leave v empty to see cache hits; change it to force a render.

Endpoints

GET https://ogshot.emailable.com/render.png?url=https%3A%2F%2Femailable.com%2Fposts%2F1&v=1725000000
The PNG. The page must be on an allowed host and contain a <template data-ogshot>. Change v whenever the card content changes so crawlers refetch.
GET https://ogshot.emailable.com/ogshot.js
Optional client script. Warms the cache for the page's og:image when someone visits, and with ?ogshot-preview in the URL shows the template at 1200x630.

Use it

<template data-ogshot>
  <div class="flex h-full w-full flex-col justify-between bg-neutral-900 p-20 text-white">
    <h1 class="text-6xl font-bold">How we cut build times in half</h1>
    <p class="text-2xl text-neutral-400">emailable.com</p>
  </div>
</template>

<meta property="og:image" content="https://ogshot.emailable.com/render.png?url=https%3A%2F%2Femailable.com%2Fposts%2F1&v=1725000000">
<meta property="og:image:type" content="image/png">
<script src="https://ogshot.emailable.com/ogshot.js" async fetchpriority="low"></script>