Supercharge Your Webflow Landing Pages: Creating Custom Open Graph Images with Placid (Part 3)

Welcome to the final instalment of our series on supercharging your landing pages! In the previous two parts, we explored how to use OpenAI's GPT-4 language model to create SEO-optimized Title Tags, Meta Descriptions, and headings, as well as how to update Webflow CMS items automatically.

In this part, we'll set up a workflow that automatically generates custom open graph images for each landing page. Each open graph image can include a custom screenshot and custom text. The tool we'll be using to create our open graph images is Placid.

Before We Get Started: What Is Placid?

Placid is a tool that allows you to generate images with data, such as custom thumbnails, open graph images, social posts, and more. You can connect different data sources, like Airtable and Google Sheets, to Placid and use the data to generate unique images. Placid also offers a tool for generating images for PDFs. It's a great solution for creating social assets for your ads.

Step 1: Configuring Your Airtable Base with Data for Placid

Before we start, let's create fields in Airtable for all the data we want to send to Placid. We'll add custom text for our open graph (OG) image and a custom product screenshot to use in our OG image.

Step 2: Configure Our make.com Workflow

• Generate your webhook and set up a trigger workflow in Airtable Automations that fires the make.com webhook.
• Set up the make.com actions to first retrieve our Airtable record with dynamic data.
• Add the action for creating the Placid thumbnail.
• Finally, update the Airtable record with the attachment generated by Placid. Create an attachment field in your Airtable base to store the image.

Step 3: Adjust Your "Update Webflow" Workflow to Include the Custom Open Graph Image Field

Once we've completed the steps above, let's adjust our workflow from the previous part that updates our Webflow item. We want to include our generated open graph images. Store the open graph URL in Webflow.

Step 4 (Optional): Add a Filter for Generating Open Graph Images

If you don't always want to generate a new open graph image for your page, you can apply a filter to your Airtable Automations that only triggers the make.com workflow if the "Thumbnail" field is empty. Simply delete the existing thumbnail if you want to generate a new one.

Summary

In this part, we've successfully set up a workflow to automatically generate custom open graph images for each landing page using Placid. We also learned how to configure our Airtable base, set up a make.com workflow, update Webflow with the open graph images, and apply filters in Airtable Automations.

Combined with the previous two parts, we now have a comprehensive workflow for optimizing our landing pages, from generating SEO-optimized content to creating visually appealing open graph images.

‍