How to Automatically Generate Open Graph Images for Every Page on Your Website
Most websites waste their Open Graph images — using random stock photos or the same logo on every page. In this tutorial, you'll learn how dynamic Open Graph images work and how to set them up automatically using Bannerbear, so every page on your site gets a unique, eye-catching preview card without any manual design work.
Here's what we cover:
• What Open Graph images are and how they work
• The difference between generic and dynamic OG images
• How to build dynamic OG images with Bannerbear
• Integrating Bannerbear with Next.js using a simple helper function
• Testing your OG images with a preview tool
Whether you're running a blog, a docs site, or any content-heavy platform, this setup will help you stand out in the feed and turn more shares into clicks.
🔗 Resources:
• Bannerbear: https://www.bannerbear.com (https://www.bannerbear.com/)
• Open Graph Preview Tool: https://www.opengraph.xyz (https://www.opengraph.xyz/)
If this helped you, hit the like button and subscribe for more developer tutorials!
Video Transcription
[00:00:00] Hey, developers. Ever notice those little preview cards on the feed when you share a link on X or LinkedIn? That's an Open Graph image. Here's the problem, though: Most websites just slap on whatever image happens to be in the article, or worse, just their logo. So when you share a blog post about 10 Python tips, the preview might show a random stock photo that has nothing to actually do with Python, and that's a missed opportunity.
That random stock photo doesn't tell anyone what the post is about. It doesn't give them a reason to click. It just sits there taking up space. Think about it from a viewer's side. They're scrolling through their feed. They see a preview with some random image and no real context. They have no idea that they just scrolled past something that could have been genuinely useful to them.
But what if that image could automatically show something useful, like the actual blog post title, author's name,
[00:01:00] or even a short preview, without you manually doing any of it? That is exactly what dynamic Open Graph images do, and honestly, they're way easier to set up than you'd think. In today's video, I'm gonna show you what they are, how they work, and how to set them up step by step.
Let's jump right into it. Before we get into the demo, let me quickly break down what an Open Graph image actually is and how it works. So first things first, what exactly is an Open Graph image? When you share a URL on X, LinkedIn, Facebook, basically any social platform, you get this little preview card.
That's all controlled by Open Graph meta tags in your website's HTML. Let me open up dev tools here. See these meta tags?
This one right here Is telling social platforms which image to grab for the
[00:02:00] preview. But here's the problem, most sites just point to whatever image is already in the article. Could be a stock photo, a screenshot, a diagram. Sure, there's an image, but it doesn't tell the story. There's no title, no author info, nothing that makes someone think, "I need to read this."
And some sites just use their logo for everything. Zero context. That is where dynamic images make all the difference. Let me show you what I mean. Look at these blog post previews. Same website, same posts, but each one has a unique image with the post title, the author's name, the publication date, and the featured image in the background.
See the difference? Each preview is unique, and they actually give you context about what you're about to read. So why does this matter? Every time someone shares your link on social media, that
[00:03:00] preview image is the very first thing that people see, and it decides whether they click or keep scrolling. A well-designed OG image grabs attention in a crowded feed.
A broken or missing one, it shows up as a blank placeholder, and people just move on. You're quietly losing traffic and credibility with every share. Now, you're probably thinking, "Does that mean I have to design a unique image for every single page on my website?" The good news, no, you don't. Let me show you the easy way.
We're going to use a tool called Banner Bear. If you haven't heard of it, Banner Bear is an API that handles all the heavy lifting when it comes to image generation. You don't need to write complex code to create images from scratch. Instead, you just design a template. Think of it like a Canva design, and then Banner Bear uses that template to automatically generate unique dynamic images.
Here's the
[00:04:00] workflow. You set up your template once, do a bit of simple API configuration, and from that point on, every single page on your website gets its own custom OG image generated automatically. No manual exporting, no repetitive design work, just one setup, and it runs on its own. Okay. I'm in Banner Bear, and I already have my design template open.
You can create your own design from scratch or just pick an existing one from Banner Bear's template library. In this design, we have the article title, the author name- The published date, and the post's featured image in the background. Now let's exit the editor. Now, there are a few ways to use Bannerbear to automatically generate OG images from a template, and the easiest way to do so is through a simple URL.
[00:05:00]
Here's how it works. Bannerbear gives you a base URL. You then construct URL parameters based on your template's layers to populate different data into the template, and that generates a different image each time. To set this up, scroll down the page and click Settings for Simple URL. Then, create a new URL base, click on the URL base that was just created, and copy the full URL.
Now, depending on how your project is set up, you take that base URL and combine it with your own page data to automatically construct the full image URL. Let me show you what I mean with my own project. I'm using Next.js, which has a built-in configuration for setting OG images on every page. Now, what I did was create a
[00:06:00] simple helper function, and all this function does is take in four things: the page title, the author name, the date, and the post's featured image.
It then uses those values to build out the full Bannerbear URL. And that URL is passed in as the OG image for that page. Now let's see how this actually looks. I'll use an OG image preview tool to test it. And there we go, a dynamic Open Graph image showing up exactly as it should with all the right data pulled in automatically.
And that's it. Now you know how dynamic Open Graph images work. Instead of using the same image everywhere, you generate custom images on the fly using your page data. Better engagement, less manual work, and your content actually stands out in the feed. If this video was helpful, hit that
[00:07:00] like button and subscribe for more tutorials.
Have any questions? Drop them in the comments below, and I'll see you in the next video.
