It can take a lot of time to build content and maintain a website. How can you make sure your content stands out when getting shared on social feeds around the internet?

‌Facebook posts with images see 2.3X more engagement than those without images.  (Buzzsumo)

If you're a marketer working on your own content or on behalf's of your client, this is definitely something that you must do.

Of course creating social preview image or also known as open graph can be tedious process if done manually, but you're a great marketer right? We can show you some cool tricks you can do to automate this that will save you time and cost. In fact, you can take on more clients with the same amount of work.

Example

A well designed open graph image can entice users to your content. Here's how it look with and without preview image. You can clearly see which one does stand out the best.

How to

Preparing our open graph template

Usually, an open graph image contains the title of your page and the author. You can also include any other information that you think is relevant to your content.‌

Our template above contains the main title with yellow background, subtitle and the author.

For this tutorial, we are will change the title and the subtitle.‌ The rest of the layers are also customizable.. If you like to watch the process of designing a template, watch the video below. It only takes a few minutes.

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.

Ready to increase your site's traffic? Sign up for our free trial at https://www.usestencil.com and get 50 images free!