How to Add Auto-Generated Open Graph Images to Webflow
If you are creating a lot of content or have a large library of articles, manually adding social media preview images can become a really cumbersome task. You can however completely automate this process, here's how to do it!
Note: this tutorial will require a paid Webflow account as it uses the Custom Code feature of Webflow which is only for paid users.
Additional note: After more testing it turns out that Webflow Variables are output using HTML Entities which are not URL Safe. Any special characters (e.g. &, $, #) in your Webflow content will break this integration. Hopefully Webflow will offer URL-safe output options in the future so that Bannerbear and other services can use Webflow data safely!
Why add social media images?
Social media preview images (also called Open Graph images) are the images that display when you share content on Twitter, Facebook, Linkedin… the list goes on.
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 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 social media image (or even better, eye-catching and informative) 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 Webflow you can find this in Open Graph Settings.
This 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 can this be automated?
Instead of doing this on a page by page basis, what we are going to do in this tutorial is edit the Webflow Collection Settings (e.g. Blog Posts) and add a custom code block. This code block will appear on every page in that collection, inserting a dynamic Bannerbear URL that will generate a unique image for each page.
Adding the template in Bannerbear
You can design your own template using the Bannerbear editor, but for now lets use an example template from the library.
There is a Simple Open Graph template in the library that contains a title, subtitle, and an image placeholder. You can control all of these variables via Bannerbear's API in order to generate images on-the-fly.
Add this template to one of your Bannerbear projects.
Feel free to tweak the template to your liking before continuing.
Important Update - Simple URLs
Update: Bannerbear Query Strings have been replaced by a simpler (but just as powerful) feature called Simple URLs. The article that continues below uses Query Strings which are a legacy feature - you can learn more about how Simple URLs work in the Knowledge Base. The principle is very similar.
Getting the Query String URL
To integrate with Webflow we will use the Query Strings integration. This is a simple, but powerful integration that enables you to generate images just by changing the query string. We are going to embed this URL in Webflow and then use some dynamic Webflow tags to change the query string 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 Query Strings icon:
Create a new query string URL Base and click it - you will now see the query string documentation page.
From here you can grab your unique URL Base to generate images with.
How the Query String works
Using this URL Base you can generate images on the fly just by changing parameters the query string.
If you used the Simple Open Graph template from the library you will see that there are a few parameters you can play with:
If you add / remove / rename layers from the base template, these parameters will change so take note.
To generate images, you simply combine your Base URL with a list of modifications you want to make, separated with :::
Here are some examples:
…would result in an image with the title text HELLO
You can add an image by referencing a publicly-accessible URL of any image on the web:
…would result in an image with the title text HELLO and a poster image pulled from the URL specified.
In this way, you can use the Query Strings feature of Bannerbear to generate new images on-the-fly. Next we are going to plug in some WordPress variables into this url so that WordPress 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 in the Query String 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 Webflow
First of all if you haven't already, make sure that your collection template has a title and description set.
To keep things simple for this tutorial we will use the Simple Open Graph template and get it to display the title and the date of a blog article in Webflow. You can also pass an image into this template, but that is something you can try in a follow up step!
In Webflow find your collection template Settings page, in this case it's a blog post template - and scroll to the bottom where it says Custom Code.
Paste the following code inside the box that says "Inside <head> tag":
<meta property="og:image" content="https://ondemand.bannerbear.com/taggedurl/YOUR_BASE/image.jpg?modifications=[title---text=TITLE,,subtitle---text=DATE] "/> <meta property="og:image:height" content="630"/> <meta property="og:image:width" content="1200"/> <meta name="twitter:image:src" content="https://ondemand.bannerbear.com/taggedurl/YOUR_BASE/image.jpg?modifications=[title---text=TITLE,,subtitle---text=DATE]"/> <meta name="twitter:card" content="summary_large_image">
Adding your 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 Query String docs page above.
Adding the dynamic title and date tags
Next you need to add special Webflow tags to the URL so that the data changes for each new page (and therefore creates a different image).
Replace TITLE with Name.
Replace DATE with Published On.
Finally your custom code box should look something like this:
Hit save and publish your site!
Testing the results
If you are logged into Twitter you can use the official Twitter Card Validator to plug in your Webflow 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 Webflow 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.
Bannerbear Twitter / Facebook Preview Tool
Now all of your Webflow content will have properly-formatted social media images, and these will get auto-generated any time you create new content on webflow.
Even better, if you want to update the template design any time you just update it from one place (Bannerbear!).
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 on-the-fly.
So this is a "set and forget" solution!
Why not try these as next steps:
- Change the background image by passing in an image URL from your Webflow page data
- Add a layer to the Bannerbear template (e.g. author name) and add that data to the query string
- Create different templates for different collections on your webflow site