Hey, guys! I wanted to show you an easy (& fairly inexpensive) way to dynamically generate OpenGraph images for CMS items in Webflow. This is useful especially for blogs/articles where you want a bit more of a personal touch when sharing on social media.
Here’s what I’m going to show you how to generate:
I’m going to jump into this assuming you already have a CMS collection you want to dynamically generate OG (OpenGraph) images for.
First thing you’ll need to do is create a free account with Placid. There are other tools such as HTML/CSS to Image API and Previewmojo, but I found Placid to be the least expensive option that was still fairly intuitive and easy to use, so that’s what I’ll be using for this tutorial.
Once you’re signed up, you’ll want to start by creating a template (+ Create Template). You can create one from scratch, or choose a template to start off with. Choose one you like, or if you want to follow along a bit more closely, I chose the one with the cute dog picture, as pictured below:
Make sure the dropdown says "Create for API’, then hit the button at the bottom, “Customize Design”.
This is where you’ll create your template! A few important notes here:
- Under “Layers”, you’ll see a gray dot next to some titles. These are elements that are “dynamic”, or editable by whatever information you’re passing to it. If you want to disable that for some elements, just click the pencil icon to the right and uncheck “Element is Dynamic”, then it will always be whatever you set it as in the designer.
- If you have something set as dynamic, but that item will occasionally not receive custom data (ex. You sometimes forget to add an image to your blog), it will revert to whatever you have set it the designer, so be sure to pick something fairly generic!
Here’s what I did to create my template:
- Swapped the sides so the image appeared on the right
- Left-aligned title
- Left-aligned the URL and lined it up with the title. Unchecked “Element is Dynamic” so it would always display the URL I wanted, changed the URL displayed
- Changed the fonts to Lato to match the styling on my website
- Changed the background color to our website’s blue, turned off “Element is Dynamic”
- Added site logo, turned off “Element is Dynamic”. Lined up logo with left of title
- Changed the default image that would appear on the right in case we forget to add a thumbnail image (the image we’re using)
Done! Click “Save” and head back to your API templates.
Click “Embed” under the template you just created. Copy the embed code generated here except the Pinterest part. It should look something like:
<!-- Facebook OG Image --> <meta property="og:image" content="https://placid.app/u/ycsuqimg=%24DEFAULT%24&title=%24DEFAULT%24&url=%24DEFAULT%24&logo=%24DEFAULT%24"/> <meta property="og:image:height" content="600"/> <meta property="og:image:width" content="1200"/> <!-- Twitter Card Image --> <meta property="twitter:image" content="https://placid.app/u/ycsuq?img=%24DEFAULT%24&title=%24DEFAULT%24&url=%24DEFAULT%24&logo=%24DEFAULT%24"/> <meta name="twitter:card" content="summary_large_image">
Now let’s head back to Webflow.
Go to your collection’s template page. In my case, I wanted this on our blog posts.
Click the settings icon next to your page template in the Pages menu.
Scroll down to the
<head> custom code area, paste the code you copied here.
Next, you’ll want to go through the URL in the code and replace some of the content with your collection’s dynamic content.
To use dynamic content in your custom code in Webflow, all you have to do is click the purple “+ Add Field” button to the top right of the custom code area and select the field that you want to pull data from. Easy!
So here’s the pieces you’ll need to replace as per my example:
In the places I wrapped, you’ll replace “%24DEFAULT%24” with your dynamic content field. The first one is the image you want to use, and the second one is the blog title.
You’ll also need to append any images you’re pulling in with
$PIC$, otherwise Placid will default to a screenshot of the page for some reason.
Then you can just copy this URL and replace the second link, or you can just insert the dynamic content there too.
Now you should have dynamically generated OG images on your collection pages. They will be generated the first time each page is loaded. NOTE: It does take a few seconds after the first time a page is loaded to generate the OG image! So if it’s your first time sharing a blog, you may want to visit that page first and wait a minute to ensure it has time to generate. Then you’re good!
If you want to see what your posts will look like on Twitter without actually tweeting it, you can test it using Twitter’s Card Validator here. Just remember, your image won’t populate immediately if the page hasn’t been loaded since you added the new code!
I hope this helps you guys out, I think it’s a really nice addition to help content stand out from the crowd, and it only takes a few minutes to set up after you’ve done it once.