Stencil Documentation
  • General
  • API
    • Authentication
      • Account
    • Pagination
    • Status Code and Throttling
    • Endpoints
      • Projects
      • Templates
      • Images
      • Collections
      • PDFs
      • Airtable
    • Charts
  • Using Stencil
    • Template Editor (New)
    • Template Editor (Legacy)
      • Limited Markdown Supports
      • Anchoring Element
      • Using Custom Font
      • Circular Text Positioning
    • White Label for Business
      • Setting Up Your First Client
      • DNS Setup with Cloudflare
  • Guides
    • Airtable Integration
      • Basic
    • Integromat Integration
      • Connection
      • Instant Trigger
    • Zapier Integration
      • Authentication
      • Trigger - New Image
      • Action - Create Image
    • Secure Signed Image
      • Basic
    • Query String Integration
      • Basic
      • Cache
    • Forms Integration
    • Case Studies
      • Generate Instagram Post from WooCommerce
      • Generate Open Graph Image for WordPress
      • Generate Personalized SendGrid Email Campaigns
      • Sending Charts to Twitter
      • Generate Instagram Post from Shopify
      • Automating Webflow Open Graph Image
      • Generate certificate of accomplishment
      • Automate Candidate's Certificate Generation
  • LINKS
    • Back to Stencil
    • Got bug?
    • Need feature?
    • Blog
Powered by GitBook
On this page
  • What is Open Graph?
  • Motivation
  • Guides
  • Designing our template
  • Setting up Webflow
  • Automating the workflow with Integromat
  • Result

Was this helpful?

  1. Guides
  2. Case Studies

Automating Webflow Open Graph Image

Generate open graph images for Webflow automatically

PreviousGenerate Instagram Post from ShopifyNextGenerate certificate of accomplishment

Last updated 3 years ago

Was this helpful?

What is Open Graph?

is an internet protocol that was originally created by 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

  1. List all items in Webflow's collection

  2. 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.

  3. We retrieve the image by calling Stencil Get Image module.

  4. 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.

Here we use asynchronous image API and wait 10 seconds for the image to finish generating. Ideally we should use so Integromat can immediately run your scenario. However, for this demo purpose, this is sufficient.

Instant Trigger
Open Graph
Facebook
Sharing link without Open Graph
Sharing link with Open Graph
Our simple design