How to Add Custom OG Images to Your Webflow Site
Webflow handles OG images entirely through the Designer interface, which is convenient for static pages but requires a bit more thought for CMS-driven content. Here is how to set up social cards that look right on both static pages and dynamic collection pages.
Static pages: use the Page Settings Open Graph fields
In the Webflow Designer, open any page's settings by clicking the gear icon. Scroll to the "Open Graph Settings" section and upload an OG image directly. Webflow hosts the uploaded image and injects the correct `og:image` meta tag automatically. The image you upload here should be 1200x630px for correct rendering across Facebook, LinkedIn, and Slack. Upload a separate image file rather than relying on Webflow to resize your hero image, since auto-resizing rarely produces the right composition for social cards.
CMS collections: bind og:image to a CMS image field
For Collection pages (blog posts, product pages, portfolio entries), add an image field to your CMS Collection specifically for the OG image. In the Collection page template settings, bind the Open Graph image to that CMS field. Now each collection item can have its own social card. When you add a new post, you upload the OG image alongside the content. Generate the image from the post title using OGImagen, download the 1200x630px file, and upload it to the OG image field in the Webflow CMS editor.
Per-page overrides take priority over site-wide defaults
In Webflow's site settings (under the "SEO" tab), you can set a site-wide default OG image. This image shows up for any page that does not have its own OG image set. Set a clean, branded default here so that even pages you forget to configure still have a recognizable social card. Individual page-level settings always override the site default, so you can layer in specific images for high-priority pages without worrying about the default showing through.
Publishing flushes the cache but crawlers may lag
After setting or updating an OG image and republishing your Webflow site, the new image URL is live immediately. However, social platforms cache link previews aggressively. Use the Facebook Sharing Debugger and the LinkedIn Post Inspector to force a re-scrape of your URL after each update. For Twitter, paste the URL into the Card Validator. These tools tell you exactly what crawlers see and let you confirm the correct image is being picked up before you share the link publicly.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate an OG image for your Webflow site