How To Automatically Generate Open Graph Images For Your Landing Pages

A custom Open Graph image can show a page's own title and product screenshot when someone shares its link. This final landing-page lesson uses Placid to create that image from Airtable data. It follows approved Webflow updates.

Name your inputs and layers

Create Airtable fields for OG Text, Product Screenshot URL, Thumbnail, Placid Job ID, and Regenerate Thumbnail. In Placid, create a template with a text layer named title and an image layer named screenshot. Set the canvas for your intended sharing format, such as an illustrative 1200 × 630 layout. Test long titles and narrow screenshots before automating.

Placid's image API fills named layers from submitted data. Send a POST to https://api.placid.app/api/rest/{template_uuid} with private API authentication. Replace the template UUID with your own template's identifier. An illustrative request body is:

{
  "layers": {
    "title": {"text": "Find a freelance designer in Wellington"},
    "screenshot": {"image": "https://example.com/product-screenshot.png"}
  },
  "passthrough": "example-airtable-record-id"
}

Wait for the generated image

Make retrieves the Airtable record, sends the request, and saves Placid's returned job ID. Image creation is asynchronous by default. Use the returned polling URL or a success webhook to wait for status: finished and a nonempty image_url. A queued response is not a finished image. Stop on error rather than replacing a working thumbnail.

Upload the finished image to durable storage or your target attachment field promptly. Placid documents limited retention for its generated files. A temporary generation URL should not become your permanent public asset by accident.

Connect the image to the page

Map the saved image to a Webflow CMS image field. Bind the Collection template's Open Graph image setting to that field. Check the resulting published page metadata, then test a shared link with the relevant platform's preview tool. An Airtable attachment alone does not update Webflow or clear a social platform's cache.

For the broader setup, generate CMS social images with Placid. If you also need campaign assets, adapt the template for ad creatives.

Regenerate deliberately

Use Regenerate Thumbnail or an input-version field to request another image. Keep the existing Thumbnail until the replacement finishes and passes review. Clear the regeneration flag after success. Avoid triggering generation from the output field itself.

Watch the original lesson.