Just recently I got asked by an agency client of mine (I work mainly with creative agencies and startups) if I could help fix the an issue with the open graph image on one of their client's Webflow site. This gave me the idea of writing down a brief explanation of how to best integrate an Open Graph image for static as well as dynamic pages in Webflow. But let's start at the beginning...
What is an Open Graph image?
The open graph image is the image that is shown when a particular page is shared via social media (e.g. Facebook, Twitter etc.). Using an open graph image makes it often more enticing for the audience to click on a a link (as compared to only offering some text with a text link). Webflow enables you to set the exact image you want to use when sharing the page.
How can I use a particular image when sharing a static page (such as your homepage, about page or news article overview)?
- Prepare your open graph image (the image size should be at least 1200 pixel by 630 pixel) and upload it to your asset library.
- Hover over your asset in the library and click the little cog icon. You can now press the little link icon to copy the image URL into your clip board.
- Go to your pages panel, find the static page you would like to share and click on the little cog next to it.
- Now you can scroll downwards until you get to the Open Graph settings for that page and paste the image URL you copied earlier into the appropriate field.
- Save your changes and publish your site. Done! If you want to test your open graph image, follow the remaining steps below.
- Open the page you want to share in the Webflow Designer and open the publish window again. Here you can click the little arrow icon to open the page in a separate tab, which allows you to copy its URL to the clip board.
- Go to your preferred social media platform and insert the URL in a new post. Some platforms such as Facebook will show you a preview of the image before you press publish as well.
How can I make sure a certain image is used when I share a CMS collection page (e.g. blog post, news article etc.)?
- Creating an Open Graph image for CMS collection pages is done a little differently to what's described above. But don't worry, we'll go through it step by step. First of all, have your Open Graph image ready!
- Go to your CMS collection panel and click the little cog icon next to your preferred collection. This will open your CMS collection settings.
- Press the purple "Add new field" button and create a new image field. Activate the "required" checkbox, so an image always has to be inserted when a new CMS item is created. Give the new field a sensible name (such as "Social Media Share Image") and include the required image dimensions in your help text below.
- Now you can save your CMS collection and navigate to your CMS collection page in your pages panel, pressing the little cog icon to access the page settings.
- Scroll down to the Open Graph image settings and select your newly created CMS image field in the drop down menu – in our case this would be called "Social Media Share Image". Save your settings.
- Go to one of your blog posts via the CMS collection panel and insert the Open Graph image you have prepared earlier. Save the blog post and publish your site. That's it, you're done! You can test your Open Graph image by following the steps below.
- Navigate your CMS collection page (such as a particular blog post) in which already contains your Open Graph image. Here you can click the little arrow icon to open the page in a separate tab, which allows you to copy its URL to the clip board.
- As described before you can now insert the URL in the post of your preferred social media platform and have a look at the preview to see what this looks like.
And we're done! Hope this was helpful to you. Merry Xmas! And happy sharing!
