Automate your Product Display Page Open Graph images with Bannerbear

by Jamie Barton - January 24, 2022 min read

The Open Graph protocol gives you the power to enrich web pages. In this post we'll look at how we can add basic <meta> tags in the <head> of your product display pages to make them stand out when sharing online with colleagues, friends, or family.

Websites using the Open Graph protocol will have something like the following in the <head> of their HTML document:

<meta property="og:title" content="Some page title..." />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

But where this can benefit you most is using this on product display pages. If you're building your storefront with Commerce.js, you've most likely added these already, with the product name as a title, the image, and a URL to the page.

But what if I told you we could transform those regular product images as Open Graph images to look something like this:

Let's see how we can do this automatically with Bannerbear. Create an account, or sign in if you're an existing user. They have a free trial for development purposes.

Bannerbear gives you the APIs to programmatically auto-generate social media visuals, email banners, and more.

Once logged in you'll want to create a new project for your storefront.

You will then see a "Welcome Template" inside of your project, you'll want to "Edit Template":

Then inside of the template editor I can add text, upload images, and create placeholders for text and images.

Let's remove the existing layers from the template, and instead add our own layers. We'll be using the Dynamic Objects for this template.

Go ahead and add some objects to your template, and make it fit the style of your existing storefront. There is a wide variety of fonts to pick from, including Google Fonts, and you can upload existing images as backgrounds, and more.

Here's what I created for the Chop Chop demo store:

Renamed the template to Product Display Page
Uploaded a static logo as an image
Added a Dynamic Image Object and named it image
Added a Dynamic Text Object and named it name

Now if we Save & Exit, we can see our updated template inside of our project. Let's now go to the API Console to try out our new template:

I'm now going to update the API Console to include the name and image values with static data from the ChopChop Product Display Page for the Ceramic Dutch Oven product:

{
  "template": "gwNr4n50a7XDROMBdo",
  "modifications": [
    {
      "name": "name",
      "text": "Ceramic Dutch Oven",
      "color": null,
      "background": null
    },
    {
      "name": "image",
      "image_url": "https://commercejs-chopchop-demo.vercel.app/_next/image?url=https%3A%2F%2Fcdn.chec.io%2Fmerchants%2F19303%2Fassets%2Fitalic-rqWlTD5GwKc-unsplash%25201.jpg&w=3840&q=100"
    }
  ],
  "webhook_url": null,
  "transparent": false,
  "metadata": null
}

Once you're happy you have the correct values, you should click Send API Request to generate the image.

Once completed, you should see the response payload on the right (as shown above), and a list of all images created below, including the one you just generated.

Amazing! We have our first generated image that we can use for our Open Graph image. Thanks to the power of APIs, we can automatically run the above generation on demand (and cache it) with our values in the query string for each of our product pages.

You should read more about using Signed URLs in production. Here you will need to create a signed URL on the server and return it for use on your page.

Throughout the rest of this post we'll look at how we can use Simple URLs to generate our images on demand.

From the list of Integrations inside of your project, click Settings for Simple URLs:

Then you'll need to Create a New URL Base for your template, and once editing you'll get a unique URL base, and you can see the list of modifications available for your template:

Then all that's left to do is use this URL inside of your <head /> to set the image, passing it the required modifications.

The URL to the image will look something like:

https://ondemand.bannerbear.com/simpleurl/BASE_ID_HERE/name/text/${product.name}/image/${product.assets.image_url}

If you're using something like Next.js with next-seo it will look something like this:

import { NextSeo } from 'next-seo';

const ProductPage = ({ product }) => (
  <>
    <NextSeo
      title="Page title goes here, maybe your product name?"
      description="A short description goes here to describe your product."
      openGraph={{
        url: 'YOUR_PRODUCT_PAGE_URL',
        title: 'Open Graph Title, maybe your product name?',
        description: 'Open Graph Description',
        images: [
          {
            url: `https://ondemand.bannerbear.com/simpleurl/BASE_ID_HERE/name/text/${product.name}/image/${product.assets.image_url}`,
            width: 800,
            height: 600,
            alt: 'Og Image Alt',
            type: 'image/jpeg',
          },
        ]
      }}
    />
  </>
);

export default ProductPage;

With the above applied to your product pages, you should see something like the following when sharing on social media:

Resources and Community

Check out our documentation and community articles.

Join our community on Slack to connect with eCommerce developers from around the world. Share your projects with us, ask questions, or just hang out!

Join our community