Every project I launch has the same hidden tax.
Open Figma. Design the OG image. Export at 1200×630. Realize Twitter wants a different crop. Export again. Find the LinkedIn dimensions. Export a third time. Then open a new tab to look up the exact meta tag format for whatever framework I happen to be using that week — because Next.js, Astro, and Svelte all do it slightly differently, and I never remember which one needs og:image as an absolute URL vs. relative.
That is between 20 and 30 minutes of completely repetitive work, every single time, for every single project. Not design work. Not thinking work. Just friction.
I built OGImagen to kill that workflow permanently.
The actual problem nobody talks about
The OG image problem sounds small until you’re in the middle of it. The real frustration is not the design — it’s the combinatorial mess:
Three different sizes. Open Graph images are 1200×630. Twitter/X cards want 1200×600 (and will crop yours if you get it wrong). LinkedIn has its own preferred dimensions. Every platform, different spec.
Every framework, different syntax. Here is what a correct implementation looks like in four different frameworks:
<!-- Astro -->
<meta property="og:image" content="https://cdn.yourdomain.com/og.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://cdn.yourdomain.com/og.jpg" />// Next.js App Router
export const metadata = {
openGraph: {
images: [{ url: 'https://cdn.yourdomain.com/og.jpg' }],
},
twitter: {
card: 'summary_large_image',
images: ['https://cdn.yourdomain.com/og.jpg'],
},
};<!-- Plain HTML -->
<meta property="og:image" content="https://cdn.yourdomain.com/og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />All of these do the same thing. All slightly different. All things you have to look up or remember. Multiply this by every side project you ship this year.
The image hosting problem. Even after you have the design and the snippet, you still need to host the image somewhere with a stable public URL. Some people dump it in the repo. Some use S3. Some forget entirely and ship with a relative path that breaks every social preview.
What OGImagen does
You describe your content, pick a visual style, and get three things back instantly:
-
Three production-ready images — OG (1200×630), Twitter card (1200×600), and LinkedIn (1200×627) — hosted on our CDN with a permanent URL you can reference immediately.
-
A ready-to-paste code snippet — choose your framework (Next.js, Astro, Remix, Svelte, or plain HTML) and get the exact meta tag block, with your CDN URL already interpolated in. Copy, paste, done.
No Figma. No exporting. No hunting for syntax. No hosting setup.
The AI generation part
The image generation is powered by Nano Banana Pro — Google’s latest image model, built on Gemini 3 Pro.
I want to specifically mention this because “AI-generated OG images” has historically meant blurry, text-mangling garbage. The text legibility problem alone killed every previous attempt at this. Images where your product name appears as "Porduct Nmae" are worse than no image at all.
Nano Banana Pro solves this. The text inside the generated images is actually legible — sharp, correctly spelled, properly kerned. The output looks like something a designer produced in an hour, not something a diffusion model hallucinated. If you describe a dark card with your product name and a short tagline, that is exactly what you get, with the text readable at every size.
The workflow now
Before OGImagen:
- Open Figma
- Design image (if you have a template, 10 min; if not, 25+ min)
- Export three crops
- Upload somewhere
- Look up meta tag syntax for current framework
- Wire it together and hope the preview is correct
After OGImagen:
- Go to ogimagen.com
- Describe your content, pick a style
- Paste the snippet
The total time is now under two minutes, including the time it takes to generate the images.
Why build this as a side project
Honestly, I built the first version for myself in an afternoon because I had just launched something and done the whole Figma dance again. I was annoyed enough to automate it.
The thing that surprised me was how many developers immediately understood the pain when I described it. There is no grand insight here. The insight is: this tax exists, it is paid repeatedly by every developer who cares enough about social previews to not skip them, and it should not exist.
Tools should remove friction from the parts of the job that do not require creativity. Designing three crops of the same image in Figma and copying meta tag syntax from MDN are not creative work. OGImagen handles both.
If you ship things — side projects, client sites, SaaS products — and you have done the Figma dance more than twice, try OGImagen. The free tier lets you generate images to see if the quality works for you before you commit to anything.
The 30-minute tax is optional now.
