Launchpack by Świt Studio

Webflow OG image: per page, for CMS items, and the missing site-wide default

Webflow sets Open Graph images page by page. That's fine for five pages and easy to forget on the sixth.

By Tomasz Kuźniar, Świt StudioUpdated 2 min read
Short answer

In Webflow, open the Pages panel → page settings → Open Graph settings and upload a 1200 × 630 image for each page. For CMS collection pages, bind the Open Graph image to an image field on the template.

Webflow has no built-in site-wide default image; pages without settings may get whatever Webflow picks. Set every static page, or add the tags in custom head code.

Per page

  1. Open the Pages panel and the settings (gear) of the page.
  2. In Open Graph settings, set the title, description and image. Upload the image or paste its URL.
  3. Publish.

Use 1200 × 630, JPG or PNG under 1 MB; the OG image size guide explains why.

CMS template pages

Add an image field to the collection, then on the Collection template page's Open Graph settings choose that field for the image. Every item gets its own preview, and items without an image need a fallback in the field.

A site-wide default

Webflow's own wishlist still has requests for a global default, so per page is the official way. Two workarounds:

  • Set every static page with the same default image; usually only a handful of pages.
  • Custom head code in a page's or the site's custom code, with the tags written out:
<meta property="og:image" content="https://yourdomain.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

Don't add site-wide head tags and per-page Open Graph images at the same time: duplicate og:image tags make platforms pick either one. The meta tag generator writes the full set.

Checking it

Publish, then test the live URL in the link preview checker. Old previews are cached; see how to refresh each platform.

The image for every page

Launchpack makes the 1200 × 630 OG image, favicons and tags. Free OG image.

Make my OG image

Questions

How do I set the OG image in Webflow?

Pages panel → the page's settings → Open Graph settings, upload a 1200 × 630 image, then publish.

Does Webflow have a site-wide default Open Graph image?

Not built in. Set it on each static page, bind CMS template pages to an image field, or add the tags in custom head code.

Why does Webflow show a random image when I share?

Without Open Graph settings, platforms pick an image from the page themselves. Set the Open Graph image for that page and publish.

Sources

Keep reading