Image optimizationOG cards

edgesharp-og

Social share images from a meta tag

Point a <meta property="og:image"> tag at this Worker. The Worker reads the Referer header to know which page is being shared, fetches that page’s <head>, substitutes its meta tags into a template, renders via Satori + Resvg, and caches the PNG in R2 forever. No SDK, no build step, no Next.js required.

Try it · render this page as a OG card

Live render on a Cloudflare Worker. Pick a template and a platform, click Generate. The card uses this very page’s <title> and <meta> tags, because the browser sends them as the Referer when it fetches the share Worker.

Preview
Click Generate to preview
Variables this template uses
The selected template references these {{name}} markers. On render, each is filled from this page’s extracted metadata (or empty string if the page doesn’t have that value).
  • {{title}}(empty on this page)
  • {{description}}(empty on this page)
  • {{siteName}}(empty on this page)
All metadata extracted from this page
Every <meta> tag on this page is available to any template as {{key}}. Add a <meta name="my-thing" content="..."> to your page and a custom template can reference it as {{my-thing}}.
0 keys
    Drop this in your site’s <head>:
    <meta property="og:image" content="https://edgesharp-og.teamchong.net/og/">

    How it stays cheap

    Customizing the layout

    Templates are HTML files in og/src/templates/ with {{key}} markers that substitute from the source page’s extracted <meta> tags. To add or change a template, fork the repo, edit the file, push to git, Workers Builds redeploys.