Automating Webflow Open Graph Image
Generate open graph images for Webflow automatically
What is Open Graph?
Open Graph is an internet protocol that was originally created by Facebook to standardize the use of metadata within a webpage to represent the content of a page.
Motivation
Images are powerful marketing tools, that's the reason social media is such a powerful tool for marketers. Images can speak louder than words sometimes.
When sharing blog or website link, it would be nice if there's a way to display some sort of image preview to attract clicks. Here's where Open Graph Image helps.
Clearly link with attractive preview image could attract more clicks and engagements. In this guide, we will walk through how we can generate these images if you're using Webflow.
Guides
All videos attached have no sound.
Listen to silent, it has so much to say - Rumi
Designing our template
For the purpose of this demo, we are going to create a template with the size of 1306x833.
The main title (with the yellow background) is our text_main in our template and the subtitle is text_sub.
The rest of the components won't be changed in the generated image. Of course, they are customizable but we want to keep the demo as concise as possible. You should change the author's name and image for production work.
If you like to see the whole process, please see the video below. As you can see, it takes a very short time to create a template like this.
Setting up Webflow
Our goal is to create an open graph image for every blog post. In order to do that, we need to tell Webflow to use the image that we will attach later as the open graph image source.
1. Create an image field
We can either use existing image field or we can create a new field specifically for open graph image. In this case, we choose the latter option.
2. Set our newly created field as the open graph image source
Go to your CMS Collection Pages settings page and find Open Graph section. Select our newly created field (if you created a new field) and also fill in the rest of the details.
Automating the workflow with Integromat
Now comes the fun part where we ties everything together.
Workflow
List all items in Webflow's collection
For each of the item, we grab the title of the blog post and its summary and we send it to Stencil API to generate an image.
Here we use asynchronous image API and wait 10 seconds for the image to finish generating. Ideally we should use Instant Trigger so Integromat can immediately run your scenario. However, for this demo purpose, this is sufficient.
We retrieve the image by calling Stencil Get Image module.
Using this image, we update each of the blog post's OG Field with the link to the generated image.
You can watch the following video to see how seamless the integration between Stencil, Integromat and Webflow.
How about Zapier?
Zapier's Webflow Zap is quite limited at the moment in term of its functionality and thus not able to do this integration properly. Please reach out to Webflow to ask them to improve their Zapier integration.
Result
You can see an example of the images generated.
Last updated
