Building an OG Image Generator with GitHub Copilot: A Vibe Coding Journey

Building an Automated OG Image Generator with GitHub Copilot

Recently we worked on another project (https://www.kidscreateapp.com/) in Figma sites, and realized that when I send links via messages or share on social media, a beautiful preview image is rendered. while each time I send a link to my developer tools website (https://www.devtoolsdaily.com/), there is no preview image, just a link.

But I wanted something like this (for example):

The Problem: Too many different pages

My developer tools website has hundreds of pages - from tool playgrounds to tutorials to cheat sheets. Each page needed unique OG images for proper social media sharing, but creating them manually would take forever.

I turned to ChatGPT first to ask about og:image tag and what should be there.

Iteration 1: Satori-based OG Image Generator

It suggested to have a simple image with title of the page and website logo. So I turned to my copilot and asked to help me build a simple og:image generator.

Here is my exact prompt:

I want to create new node project that is using satori to generate og images. The idea is to define some kinda of a template. then I'd have a json with variables and It would generate a bunch of images in a specific location.

my json might be:

{
"title".
"description"
"image" (optional)
}

create simple template tsx/react that I will modify later.

this is empty project for now. so setup everything needed for node/npm etc.

i'm on node20 now.

The agent struggled a little bit with fonts... but eventually figured something out.

Converting to PNGs

However that created SVG images, but I wanted PNGs.

I prompted again, and it figured it out.

so how do I create png instead of svg?

The Agent added @resvg/resvg-js package and updated the code to generate PNGs.

Iteration 2: Screenshot-based OG Image Generator

that worked great, however I remembered an old X post from https://x.com/levelsio about him generating og images as screenshot. I thought that it might be better given that each tool I have is uniq, so it would be nice to have actual screenshot of the page as og image.

So I prompted again:

t. I want to genreate a different kind of image.
that would be screenshot based. so bsaically og image is a screenshot of the page. can we do that.

The Agent suggested using Puppeteer for browser automation to take screenshots of web pages. It updated NPM dependencies and created a new script to take screenshots.

Final Step: Bulk Screenshot Generation from Sitemap

Now all I had to do was to ask it to generate an overall script to:

1. read sitemap.xml
2. take screenshots of each page listed in the sitemap
3. save screenshots to a specific folder

here is what i want to do right now. I want you to take my sitemap.
https://www.devtoolsdaily.com/sitemap-0.xml

then for each url generate a screenshot. let's start small. like let's do 10 random ones.

files should be named like it's path but filesystem safe. e.g like _ separated or something.

you can make a script for that don't make it an endpoint.

So overall after like 30 minutes of vibe coding I had a script that generated og images for my entire website.

Update to My Website to Use Generated OG Images

Finally I had to prompt it to update my base template to use those images in og:image tags.

in pageLayout.tsx let's compute the ogImage path.

e.g if the current page url is /json/viewer the og image would
be devtoolsdaily.com/og-images/json_viewer.png

that added like 2 lines of code to my base layout. and it just worked!

Thanks

Thanks to X /Twitter for inspiration and GitHub Copilot for vibe coding assistance!

What's interesting is that I don't even want to share the code, and I dono't even feel I have to check it in. B/c I Can literally put all that again into a prompt and agent would spit it out in less than 5 minutes.

---