This tutorial will teach you how to dynamically generate a unique Open Graph (OG) image for each blog post without having to manually create a blog post image for each post.

HubSpot CMS combines website creation with the power of a CRM to customize the entire buying journey and streamline marketing. The _ CMS _ Hub integrates all your website tools in one place, from website management to landing pages, and blogs.

Manually adding social media preview images can become a really cumbersome task. However, with Bannerbear you can completely automate this process. Here's how you can do it.

This tutorial will teach you how to dynamically generate a unique Open Graph (OG) image for each blog post without having to manually create a blog post image for each post.

Why add social media images?

A picture is worth a thousand words.

Social media preview images (also called Open Graph images) are the images that display when you share content on Twitter, Facebook, Linkedin, and more. They lead to high engagement from readers and more people linking to your blog, which is very good for SEO purposes.

Here's an example of a website with and without a social media preview image.

Without a preview image set:

With a preview image set:

The four basic open graph tags that are required for each page are og:title, og:type, og:image, and og:url. The image itself can be anything - it could be an image pulled from the article itself automatically, or it can be a properly-formatted image with a title, author photo etc.

Having an eye-catching and informative social media image can make the difference between someone clicking your content or scrolling past your content.

In other words, if you are looking to drive traffic from social media to your website, investing in properly formatted social media graphics that look great and encourage people to click, is totally worth it.

How to add social media images manually

Almost every CMS platform out there has a way for you to add these images to a post. So if you want to do this manually it's simply a case of designing the image and then attaching it to your post.

In Hubspot, you can manually add the cover images to any single post in the Post Settings. This is the image that will show up when users share your Hubspot posts on social media e.g. Twitter, Facebook, and Linkedin.

Doing this on every post is very time-consuming though if you have a lot of content. And what if you want to change the design of your social media images later on? You would have to go through and change every image manually… there must be a better way!

How to automate images for blog promotion?

Instead of doing this on a page-by-page basis, what we are going to do in this tutorial is provide a code snippet so you can put it inside your Hubspot blog. This code will output a dynamic Bannerbear URL that will generate a unique image for each page.

Adding the template in Bannerbear

To do this we need to first create a Bannerbear Project, then add a Bannerbear template to the project and customize it.

You can design your own template using the Bannerbear editor, but for now, let’s use an example template from the library.

There is an Open Graph Skewed Title template in the library that contains a title, subtitle, and image placeholder. You can control all of these variables via Bannerbear's API in order to generate images on-the-fly.

To keep things simple for this tutorial we will use the *Open Graph Skewed Title*template and get it to display the title and the date of a blog article in Hubspot.

Click on the image template below to add it to your Bannerbear project:

You can edit the template and customize everything. From the text, colour, font, background, and much more. You can also pass an image into this template, but that is something you can try in a follow-up step!

Getting the Simple URL

To integrate with Hubspot, we will use the Simple URLs integration. This is a simple, but powerful integration that enables you to generate images just by changing the Simple URL. The Simple URL integration creates dynamic URLs that generate images on demand, on any external platform.

We are going to embed this URL in Hubspot and then use some dynamic Hubspot tags to change the Simple URL for each page, which will result in a different image being generated for each page.

Scroll down on the Bannerbear template page and click the Simple URLs settings:

Click on Create a New URL Base button to create a new Simple URL Base:

Get your Base ID

To insert your dynamic code in Hubspot, you will need to fill in some placeholders:

• YOUR_BASE
• TITLE
• DATE

From here you can grab your unique URL Base to generate images with:

After you create the new URL base, click through to the Simple URL documentation page:

How the Simple URLs work

Using this URL Base you can generate images just by changing the parameters of the Simple URL.

If you used the Open Graph Skewed Title template from the library you will see that there are a few parameters you can modify. Note that if you add / remove / rename layers from the base template, these parameters will change so take note.

To modify a layer in Simple URLs, you'll need to define your layers in sets of 3, using the following format: [/ layer / attribute / data] and URL encode all values.

For the purpose of this tutorial, combine your URL base with a list of modifications you want to make:

https://ondemand.bannerbear.com/simpleurl/YOUR_BASE/image

• background image URL
• title text
• pre_title text

To generate images, you can add an image by referencing a publicly-accessible URL of any image on the web. For example:

https://ondemand.bannerbear.com/simpleurl/YOUR_BASE/image/title/text/How%20to%20Auto%20Generate%20Open%20Graph%20Images%20in%20Hubspot/pre_title/text/31%20March%202022/backround/image_url/https%3A%2F%2Fbit.ly%2F3LuXw81

Replace YOUR_BASE with your Simple URL base ID. The URL is currently not pointing to a real Base ID so you need to change YOUR_BASE with your unique Base ID which you can get from the Bannerbear Simple URL docs page above.

This would result in an image with the title text How to Auto Generate Open Graph Images in Hubspot, a poster image pulled from the URL specified, and the date as the pre title text:

In this way, you can use the Simple URLs feature of Bannerbear to generate new images on-the-fly. Next, we are going to plug in some Hubspot variables into this URL so that Hubspot creates these URLs for us dynamically, using data from the posts (e.g. post titles).

Disable Rate Limit

Before going to the next step, you may want to turn off the Rate Limit feature on the Simple URL settings page. When you are doing a lot of testing or generating lots of images in bulk you can turn this off to prevent Bannerbear from blocking your requests.

Pasting the code into Hubspot

First of all if you haven't already, make sure that your blog is set up with a title and description set. In your HubSpot account, navigate to Marketing > Website > Blog.

Custom code

In Hubspot CMS, find your template Settings page. The templates used for the blog listing page and blog post page, and the tool to create new blogs, are defined in the HubSpot UI under Settings > Website > Blog:

In this case, it's a blog post template - and scroll to the bottom where it says Custom Code.

Hubspot CMS allows you to inject code into the header and footer of your blog. The code that we must add needs to go in a section of the site called the "Blog post header HTML":

Adding the Code

To customize the Head HTML of your post, add code snippets in the Additional code snippets field.

Code pasted in the Site Header will be injected into the head tag on every page of the site. Paste the following code inside the box:

<meta property="og:image" content="https://ondemand.bannerbear.com/simpleurl/YOUR_BASE/image/title/text/data/pre_title/text/data/backround/image_url/data
"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image:width" content="1200"/>

<meta name="twitter:image:src" content="https://ondemand.bannerbear.com/simpleurl/YOUR_BASE/image/title/text/data/pre_title/text/data/backround/image_url/data"/>
<meta name="twitter:card" content="summary_large_image">

Simple URLs generate images inline as the request is received. The image is then served from a cache in subsequent requests

Adding the dynamic title and date tags

Next, we will add some dynamic tags to the URL to pull the title and date for posts so that the data changes for each new page (and therefore creates a different image). HubSpot templates can use a host of predefined variables that can be used to render the useful website and email elements.

Add meta tags to the <head> section of your website pages. Search engines and social networks will parse the head section of your HTML to look for the metadata needed to generate a preview of the page.

Finally, your code box should look something like this:

<meta property="og:image" content="https://ondemand.bannerbear.com/simpleurl/YOUR_BASE/image/title/text/{{page_meta.name}}/pre_title/text/{{content.publish_date_localized}}/backround/image_url/{{content.featured_image}}
"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image:width" content="1200"/>

<meta name="twitter:image:src" content="https://ondemand.bannerbear.com/simpleurl/YOUR_BASE/image/title/text/{{page_meta.name}}/pre_title/text/{{content.publish_date_localized}}/backround/image_url/{{content.featured_image}}"/>
<meta name="twitter:card" content="summary_large_image">

Copy and paste this code inside the Site Header. Finally, your custom code box should look something like this:

Hit save!

Testing the results

Now when your pages are scraped by social media networks or other tools, the dynamic image URLs will be "hit" and the image generated on the fly. You can see this happening if you try testing your pages in a link previewer.

You can preview your social media images now by grabbing any of your Hubspot Post URLs and plugging it into the Bannerbear Twitter / Facebook Preview Tool. This tool is similar to the official Facebook Debugger or Twitter Card Validator except it has a theatre mode, the ability to swap in different avatars/names, and it's better optimized for mobile devices!

Alternatively, you can use one of the social network "official" tools:

If you are logged into Twitter you can use the official Twitter Card Validator to plug in your Hubspot blog post URLs. The first time Twitter hits your page the image will generate - hit preview again to load the image into view.

If you are logged into Facebook you can use the official Facebook Debugger to plug in your Hubspot blog post URLs. Same deal here, the first time Facebook hits your page the image will generate - hit preview again to load the image into view.

The results

Now, all of your Hubspot content will have properly-formatted social media images, and these will get auto-generated any time you create new content on Hubspot.

Even better, if you want to update the template design at any time you just update it from one place (Bannerbear!).

Questions?

The main question that people ask here is, do you need to "hit" the pages before they are shared on social media so that the image is ready?

The answer is nope 🐻 The image will be generated on-the-fly the first time that the page is accessed. So for example, if you freshly publish a new post, you can go right ahead and share that link directly on Twitter. In the background, Twitter will scan your page and pull in the image from Bannerbear generated immediately.

So this is a "set and forget" solution!

Next Steps

Why not try these as the next steps:

• Change the background image by passing in an image URL from your Hubspot page data
• Add a layer to the Bannerbear template (e.g. author name) and add that data to the Simple URL
• Create different templates for different collections on your Hubspot site

This article was originally published on Bannerbear.com on April 04, 2022. Written by: Juliet Edjere

ABOUT ME

I'm Juliet Edjere, a no-code expert focused on design, product development, and building scalable solutions with minimal coding knowledge.

I document all things product stories, MVP validation, and how designs, data, and market trends connect.

Visit my website → built with Carrd and designed in Figma