ogshot

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

GitHub

Deploy it

One click creates a copy in your GitHub account and deploys it to your Cloudflare account. Set ALLOWED_HOSTS to your domains and you're done.

Deploy to Cloudflare

Endpoints

GET /render.png?url=<page>&v=<version>
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 /ogshot.js
Optional client, also on npm as @jclusso/ogshot. 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">example.com</p>
  </div>
</template>

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