Webflow Open Graph image not working
Webflow sets Open Graph per page, never globally. CMS template pages need an Image field, and every image in that collection must share the same size.
Last updated
Quick fix
Open Page settings, Open Graph settings for the page you share.
On CMS templates, pick an Image field from the collection.
Use JPG or PNG at 1200 x 630 px, the same size for the whole collection.
Publish, then refresh the link with the refresh tool.
Why the Webflow image isn’t showing
The page has no Open Graph image. Webflow can’t set Open Graph tags globally; each page needs its own.
The CMS collection has no Image field, so the Open Graph image dropdown on the template is empty.
Images in a collection have different sizes. Webflow requires all Open Graph images in a collection to share the same dimensions.
The image is WebP or AVIF. The asset picker only lists JPG and PNG. Webflow notes some platforms, LinkedIn among them, don’t support WebP or AVIF here.
The change isn’t published yet, or the platform cached the old card.
How to fix it
In the Pages panel, open Page settings, then Open Graph settings.
Click Select image and pick a JPG or PNG from your assets, or paste a public image URL.
For a CMS template page, choose an Image field such as main image from the Open Graph image dropdown.
If all images share one size, add
og:image:widthandog:image:heightin Site settings, Custom code, Head code.Publish the site and check the live URL with the meta tag checker.
Tags Webflow outputs
og:title(or your SEO title, if you tick the box)og:descriptionog:imageAnything else, such as
og:image:width, goes in custom code
Image size rules
At least 1200 x 630 px at 1.91:1, per Webflow’s guide
JPG or PNG from the asset picker
One size for every Open Graph image in a collection
Avoid heavy compression; Webflow suggests uploading an uncompressed copy for Open Graph
How to force a refresh
Publishing doesn’t clear other platforms’ caches. Run the URL through Facebook’s Sharing Debugger and LinkedIn’s Post Inspector, and add a query string when sharing on X, Slack or Discord. The refresh tool links them all.
Sources
FAQ
Can I set one Open Graph image for my whole Webflow site?
No. Webflow says Open Graph tags apply only to the page where you set them, so set them per page.
Why is the Open Graph image dropdown empty on my CMS template?
The collection has no Image field. Add one, fill it for each item and select it in Open Graph settings.
Can I use WebP for a Webflow Open Graph image?
Only by pasting its URL; the picker lists JPG and PNG. Webflow advises JPG or PNG because some platforms don’t read WebP.
Check your page, then refresh the preview
Paste your URL into the free checker to see the exact tags each app reads. Once the tags are right, use the refresh tool to clear the old preview.
Related guides
Framer social preview not updating
Framer sets a site-wide social preview, page overrides and per-item CMS images. If the new image is live but the old one still shows, the platform’s cache is the cause.
Shopify social sharing image not working
Shopify chooses the share image in a fixed order: theme code, then theme settings, then the image in Preferences. Uploading to the wrong place is the most common cause.
LinkedIn link preview not working or not updating
LinkedIn builds the card from four og: tags and keeps a cached copy. Fix the tags, then make LinkedIn fetch the page again with Post Inspector.