Dynamic Open Graph images for Webflow CMS pages

Webflow lets you set an Open Graph image per page, but for a CMS collection that means an image for every item. With one line of custom code on the collection template, each item gets a card made from its own title instead.

On a collection template

1. Open the collection template page and its page settings.
2. Leave the Open Graph image field empty, so the page has only one og:image.
3. In custom code, inside the <head> tag, paste the line below. Where it says SLUG, insert the item's Slug field with Webflow's add field button.
4. Publish, then check an item's page.

<meta property="og:image" content="https://ogsmith.app/api/og?key=og_yourkey&url=https%3A%2F%2Fyoursite.com%2Fblog%2FSLUG">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

The url parameter is your item's address, encoded (%3A%2F%2F is :// and %2F is /). OGsmith reads that page's title and description and builds the card from them.

Static pages

For a handful of static pages, upload an image in page settings as usual, or use the same line with the page's address in place of the slug.

Your colours and logo

Set the template, colours and site name once under Brand defaults in the dashboard (paid plans can add a logo too). Every card picks them up, so the line on your template never changes.