Customisable CMS open graph images per destination

I understand you can already dynamically set the og:image for CMS collection items.

But it would be cool to take this a step further and allow us to customise this og:image by dynamically generating optimally sized open graph images for Twitter, Facebook and Pinterest within each CMS item.

Essentially implementing what Placid.app does within the CMS (without the $19USD/mth pricetag): https://forum.webflow.com/t/how-to-automatically-generate-dynamic-opengraph-images-in-cms-using-placid/100665

I understand that you can add a separate CMS field for this and manually create each image, but it's not practical when you have 100's or 1000's of CMS items OR want to change the layout later on. Even just a couple of pre-set templates would be incredible.

  • Jordan Hughes
  • Feb 18 2020
  • Reviewed
CMS
  • Virgile Donadieu commented
    April 19, 2022 16:42

    Hey Jordan ! You can do this with Abyssale's dynamic image feature.

    Basically you can generate images by adding parameters to an url like so :

    https://linktomyimage?product-name="ProductName"

    Using the custom code feature of Webflow, you can then add the specific meta tags for each social media. Then add the link to your dynamic image to each og:image tag and insert your dynalic CMS data in every spot, like you see in the images attached.

    We are personnally doing it to auto-generate the OG images of our blog tags and it works wonders :)

  • +2