Apoorv Darshan

Posted on Jul 27

I Built a Free Open Graph Image Generator That Runs in Your Browser

#webdev #opensource #seo #javascript

A website can look excellent and still produce an awkward preview when somebody shares its link.

The image may be cropped incorrectly, the title may be truncated, the description may disappear, or the asset may be several megabytes larger than necessary.

The usual recommendation is simple:

Use a 1200×630 image
Keep important content away from the edges
Aim for a file size below 200 KB
Keep the title around 60 characters
Add the correct Open Graph and Twitter Card metadata

Actually preparing and testing all of that is less convenient.

So I built OpenGraph Studio, a free and open-source Open Graph image editor and social-card preview tool.

https://www.opengraph.website/

What it does

OpenGraph Studio provides one workflow for preparing a link preview:

Paste an existing website URL or upload an image.
Crop the image using the standard 1200×630 aspect ratio.
Choose JPEG, PNG, or WebP.
Adjust the output quality or automatically compress it below approximately 200 KB.
Preview the resulting card across six platforms.
Copy the generated Open Graph and Twitter metadata.

The live previews currently cover:

Twitter / X
Facebook
LinkedIn
WhatsApp
Slack
Discord

Each preview applies platform-specific title and description limits, making truncation visible before the page is published.

Why 1200×630?

Most major link-preview systems support an image ratio close to 1.91:1.

A 1200×630 image provides enough resolution for large cards while remaining reasonably small after compression. A useful safe area is approximately 1080×566, leaving around 60 pixels of space near the edges.

The tool keeps the crop box locked to this ratio and always exports at exactly 1200×630.

Automatic compression

An Open Graph image does not need to be several megabytes.

OpenGraph Studio uses the browser Canvas API to render the selected crop and export it as JPEG, PNG, or WebP. For lossy formats, the automatic compression option performs a binary search to find the highest quality setting that remains below 200 KB.

The interface reports:

Original file size
Exported file size
Source dimensions
Selected quality
Output format
Whether the source image is below the recommended resolution

Everything happens while the image remains inside the browser.

Fetching an existing page

You can also paste a website URL.

OpenGraph Studio reads the page and looks for:

og:title
og:description
og:image
og:url
og:site_name
Twitter Card equivalents
Standard HTML title and description fallbacks

The hosted version uses a small Cloudflare Worker to fetch public page metadata. Local image editing and export remain client-side; using the URL-fetch feature necessarily sends that URL to the fetch service.

Generated metadata

The tool produces a complete metadata block that can be copied into a page’s <head>:

<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="Example page title" />
<meta property="og:description" content="A useful page description." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Example page title" />
<meta name="twitter:description" content="A useful page description." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

These tags work with plain HTML as well as frameworks and generators such as Next.js, Astro, Hugo, Jekyll, React, Vue, and Svelte.

No framework or build step

The frontend is contained in a single HTML file using vanilla HTML, CSS, and JavaScript.

Image manipulation uses the Canvas API, while the Cloudflare Worker handles public URL fetching and static asset delivery. There is no account system, database, frontend framework, or image-processing server.

You can also run it locally:

git clone https://github.com/apoorvdarshan/opengraph-studio
cd opengraph-studio
python3 -m http.server 3000

Then open http://localhost:3000.

Try it

Live tool: https://www.opengraph.website/
Source code: https://github.com/apoorvdarshan/opengraph-studio

OpenGraph Studio is free and MIT licensed. Feedback, contributions, and GitHub stars are welcome.

DEV Community