Join The Founder's Inbox
Join 13k+ entrepreneurs and receive tutorials, tips, and strategies for building smarter digital products using no-code, AI, and automation.
I've published a newer version of this post with more up-to-date information and insights.
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.
MVMPÂ LABSÂ COURSE
The Landing Page Engine
Learn how to set up a AI-powered programmatic landing page system
- MVMP Labs: Join our online community for first-time founders building no-code marketplaces. Get access to exclusive resources, step-by-step guides, and a supportive network of peers who are on the same journey as you.
- Studio: Let my team handle the heavy lifting. We’ll build your automations, build entire MVPS, basically let you focus on building the business, whilst we build the systems.
- Learn No-Code on YouTube: Follow my free, hands-on tutorials where I teach you how to build and automate no-code marketplaces step-by-step. Subscribe here for weekly videos and start creating today.
