How to Add Dynamic OG Images to Webflow Without Code
Give every page and CMS item its own branded social-share image — pulled from your content, with your logo and colors. No design tools, no developer, about ten minutes of setup.
When someone pastes a link to your Webflow site into LinkedIn, Slack, iMessage, Facebook, or X, the preview card they see is controlled by your page's Open Graph image (often shortened to "OG image"). A good one makes your link look trustworthy and clickable. A missing or generic one makes it look broken — and quietly costs you clicks.
The catch: Webflow can reference an OG image, but it can't make one. This guide walks through the three things people actually mean when they ask about this, and shows you the no-code way to get a unique, on-brand image on every page automatically.
First, what Webflow can and can't do
Let's be precise, because most articles get this wrong:
- Webflow CAN set an Open Graph image per page, and on a CMS Collection it can bind the OG image to an image field — so each blog post or product can have a different share image.
- Webflow CANNOT generate or design that image. You have to supply the actual picture. On a 50-post blog, that's 50 images you create and upload by hand, every time you publish.
So "dynamic OG images" really comes down to one question: where do the images come from? You have two options — make each one manually, or point Webflow at a service that renders a fresh image from your page's title and brand on the fly. This guide covers the automatic route.
What an OG image needs to be
| Spec | Value |
|---|---|
| Dimensions | 1200 × 630 pixels |
| Format | PNG or JPG |
| Card type | summary_large_image (for X/Twitter) |
| The two tags you need | og:image + twitter:card |
The two meta tags that control your share card
Every social platform reads the same two tags from the <head> of your page:
<meta property="og:image" content="https://YOUR-IMAGE-URL" />
<meta name="twitter:card" content="summary_large_image" />That's the whole mechanism. Whatever URL you put in og:image is the picture people see. If that URL generates an image based on the page, you get a unique card per page without uploading anything. That's the trick.
Step-by-step: dynamic OG images on a Webflow CMS Collection
This is the high-value case — a blog, a directory, a product catalog — where you want each item to have its own card automatically.
1. Open the Collection page template's custom code
In the Webflow Designer, open your Collection page template (e.g. the Blog Post template). Go to Page settings → Custom code → Inside <head> tag.
2. Paste the two tags, with a generator URL
Instead of a fixed image, point og:image at a rendering service and pass the page's own fields into the URL:
<meta property="og:image"
content="https://www.useunfurl.com/api/og?key=YOUR_KEY&title=YOUR_TITLE&footer=yourdomain.com&theme=dark" />
<meta name="twitter:card" content="summary_large_image" />3. Replace the static title with a Webflow field token
Here's the no-code magic. In Webflow's custom code, click where the title goes and use + Add Field to insert the item's Name. Webflow swaps in each item's real value when it publishes:
title={{wf {"path":"name","type":"PlainText"} }}Now every blog post renders its own image — its title, your logo, your colors — and you never touch a design tool. Publish once; it works for all 50 posts and every future one.
%20, etc. A good generator handles encoding on its end, but if your titles contain & or #, encode those (%26, %23) so the URL doesn't break.
Step-by-step: a single static page
For a one-off page (homepage, about, a landing page), it's even simpler. Open Page settings → Custom code → Inside <head> tag on that page and paste the same two tags with the title written out:
<meta property="og:image"
content="https://www.useunfurl.com/api/og?key=YOUR_KEY&title=Your%20Page%20Title&footer=yourdomain.com&theme=dark" />
<meta name="twitter:card" content="summary_large_image" />Test it before you trust it
After publishing, confirm the card renders correctly. Don't guess — every platform caches aggressively, so use their official debuggers:
- Facebook / general OG: the Meta Sharing Debugger — paste your URL, hit "Scrape Again" to clear the cache.
- LinkedIn: the LinkedIn Post Inspector.
- X (Twitter): just paste the link into a draft post and watch the card load.
If the old image is stuck, it's almost always a platform cache, not your tags — re-scrape and it updates.
The shortcut: let the image generate itself
Everything above works with any image URL. The reason it becomes no-code and zero-maintenance is the generator URL doing the drawing. That's exactly what we built Unfurl for: you paste one line into Webflow, pass your title and brand, and it returns a clean 1200×630 PNG — with your logo and colors — for every page, live from your CMS.
Try it free on your own Webflow site
200 images/month free, no credit card. Five built-in themes (dark, light, sunset, forest, grape) plus your own logo and hex colors.
Get your free API key →Frequently asked questions
Can Webflow generate OG images automatically?
No. Webflow can bind the OG image tag to a CMS image field you upload, but it does not create or design the image. To get a unique image per page without manual work, you point the og:image tag at a service that renders one — which is the method in this guide.
What size should a Webflow OG image be?
1200 × 630 pixels. That ratio displays cleanly across Facebook, LinkedIn, Slack, iMessage, and X when you also set twitter:card to summary_large_image.
Do I need a developer for this?
No. It's two meta tags pasted into Webflow's built-in Custom Code box, plus Webflow's own field-token picker for CMS pages. No plugins, no build step, no JavaScript.
Will this slow down my site?
No. The OG image is only fetched by social platforms when your link is shared — it never loads for your normal visitors, so it has zero effect on page speed.