How to fix missing og image on Webflow

Add an og:image meta tag to every page so that social media platforms and messaging apps display a rich, branded image preview whenever someone shares your store's link.

Steps for Webflow

  1. In the Webflow Designer, open the Pages panel on the left → hover over a page → click the settings gear icon.
  2. In the Page Settings panel, scroll down to 'Open Graph settings' → upload an og:image (1200×630 px recommended) and fill in og:title and og:description.
  3. For dynamic Collection pages (e.g. products, blog posts), open the Collection in the CMS → edit the Collection Page template → in Page Settings, bind the og:image field to a CMS image field (e.g. 'Product Image') using the dynamic binding option.
  4. Ensure your CMS Collection items each have an image set in that field so the binding resolves correctly for every item.
  5. For site-wide defaults, go to Project Settings → SEO → add a default og:image URL in the Open Graph fields.
  6. Publish your site and validate each page type using Facebook's Sharing Debugger.
Official Webflow documentation ↗

What is missing og image?

The og:image tag is a small snippet of HTML code placed in the invisible "head" section of your web pages. It tells social networks (Facebook, LinkedIn, Pinterest, X/Twitter, iMessage, WhatsApp, Slack, and more) which image to show when someone shares or previews a link to your page. Without it, those platforms either show no image at all, pick one randomly from your page (often a logo, icon, or a totally irrelevant graphic), or display a plain grey box — all of which look unprofessional and untrustworthy. The Open Graph protocol (the "og:" prefix) is a widely adopted web standard originally created by Facebook and now used by virtually every major platform.

When a customer shares your product page in a Facebook group, on Pinterest, or in a WhatsApp message, the link preview is often the first visual impression a new potential buyer gets — before they ever visit your site. A missing or broken og:image means that preview is blank, random, or ugly, dramatically reducing click-through rates and undermining trust in your brand. Studies consistently show that posts with compelling images receive far more clicks, shares, and engagement than text-only links. For ecommerce stores especially, a crisp product image in a shared link can directly drive impulse purchases and word-of-mouth traffic at zero extra ad spend. There is also a secondary SEO benefit: platforms like Pinterest drive significant referral traffic, and proper og:image tagging is required for Rich Pins, which surface your product price and availability alongside the image.

See the complete Missing og image guide for every platform and the full background.

Not sure if your Webflow store has this?

Run a free SEOLZ scan — we’ll find missing og image and every other issue across your whole site.

Scan my site free

Fix missing og image on another platform