Menu
Sign up
Webflow

OG images in
Webflow

Custom code on the Collection template with the Slug field; static pages need no code.

Where it plugs in

On a Collection template page the Open Graph image dropdown only takes an Image field from the Collection — there is nowhere to paste a URL. The template's custom code takes one: Page settings → Custom code → Inside <head> tag, then select SLUG in the snippet and swap it for the Slug field with the purple + Add Field, so each item page points at its own address. Leave the Open Graph image dropdown unset, then check the published page's source: it should carry one og:image, ours, not two. Static pages are simpler: their Open Graph image accepts a publicly accessible link to an image, so paste the card URL with that page's address and skip the code — check in a link preview that Webflow keeps the address as given. Custom code needs a Core, Growth, Agency or Freelancer Workspace, or an active Site plan; each field holds up to 50,000 characters.

Collection template → Page settings → Custom code → Inside head tag

<!-- Collection template page (e.g. "Blog Posts Template").
     Select SLUG below, click the purple "+ Add Field" and pick Slug,
     so every item page points at its own address. -->
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https://www.your-site.com/blog/SLUG">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

<!-- Leave "Open Graph image" in Open Graph settings unset on this
     template: it only takes an Image field, and a second og:image
     would compete with this one. Check the published source shows
     one og:image.
     Static pages need no code: paste the same URL, ending in that
     page's address, as the image link in its Open Graph settings. -->
The trap

Custom code on a Collection template appears only on the published site. The Designer shows nothing, so the tag looks missing until you publish — and an item that is not live yet answers with an error page, which gets a card with just your site name. Publish first, then paste one item's address into an OG checker before anyone shares it.

How the image URL works

Nothing in your site calls an API: the crawler that reads the tag requests the image URL, and the first request reads the page's title, description and image and renders the card. Later requests get the same file. Only pages on the domains you allowed in the dashboard get an image — any other address answers 403 — so the URL holds no key. We re-read a page at most every 60 minutes, so a new title shows up within that time.

OG images without code

What it costs

100 images a month free, then $9 for 2,000. A new card uses one image of your quota; the card is cached by what is on it, so an unchanged page is never charged twice, also when shared with ?utm_source=.

Other frameworks