Where is the Webflow Open Graph image?

Open the Pages panel, open that page’s settings, and set the image under Open Graph settings. Choose a JPG or PNG from assets, or paste a public image URL. Save, then publish. Webflow does not apply one Open Graph image to every page.

How do I set the Open Graph image for a Webflow CMS collection?

On the collection template, open Page settings, then Open Graph settings, and choose an Image field in the Open Graph image dropdown. Every item needs an image in that field, and Webflow requires those images to share the same dimensions. A collection with no Image field cannot set an Open Graph image.

Why is my Webflow link preview missing the image after I saved?

Webflow’s steps end with Publish. A save in the Designer is not the live page. After you publish, an app can still show an older card until you ask it to fetch the URL again.

Guide

Webflow Open Graph image

Q: What does a CardScope check cost?

Link previews and the fix checklist are Pro: $19 once via Stripe Checkout. No account. We parse HTML in memory and discard it. A free check names whether og:image and og:title are set.

Webflow keeps Open Graph on the page you edit. There is no site-wide image that the other pages inherit. A CMS collection uses one Image field for every item in that collection. The live site updates when you publish.

A static page

Webflow’s Open Graph article lists three fields: Open Graph title, Open Graph description, and Open Graph image. Open them from Pages panel → Page settings → Open Graph settings. Webflow says the tags apply only to that page, and that a page with none of them can share random content, or none.

The title and description can be typed, or copied from the SEO title and meta description with the checkboxes under those fields. The image is its own control.

From assets, Webflow’s steps are:

Click Select image. The picker shows JPG and PNG files from the site’s assets.
Choose the image and click Add image.
Click Save.
Publish the site.

For a URL, click Add URL, paste a public link that ends in an image extension, save, and publish. Webflow says the asset picker does not list WebP, and that a WebP file can be added by URL. Support for WebP still varies by app. PNG or JPEG is the safer file, which is also the note in OG image format. If a URL is already saved, Select image and Add URL stay hidden until you delete that URL.

Setting the homepage and leaving the other pages empty leaves those other pages without an image. Repeat the fields on each page you share.

A CMS collection

On a collection template, the same screen holds a pattern for every item. Open Pages panel → the collection page → Page settings → Open Graph settings.

For the image, open the Open Graph image dropdown and choose an Image field, such as the main image or a thumbnail. Webflow says a collection with no Image field cannot set an Open Graph image. Add the field in the collection, fill it on each item, then select it here. Multi-image fields are a different field type. The dropdown asks for an Image field.

Webflow requires every Open Graph image in that collection to use the same dimensions. A 1200×630 file is the usual cross-app size in OG image size. The Open Graph image resizer crops to that in the browser.

For the title and description, click Add field and pick a collection field, type the text, or use the checkboxes that copy the SEO title and meta description. Save, then publish.

Publish, then ask the app to look again

Webflow’s image steps end with Publish. A save in the Designer is the draft. Crawlers read the published site. Check the published URL with the form at the top.

Webflow’s troubleshooting list for a missing picture is: use JPG or PNG, use the same dimensions on every Open Graph image, prefer a width of at least 1080 pixels (Facebook’s figure, as Webflow cites it), and run the URL through Meta’s debugger before the first share. Webflow also shows an optional pair of tags, og:image:width and og:image:height, in Site settings → Custom code → Head code when every image shares one size, or in that page’s Inside <head> tag when sizes differ. Their sample values are 1200 and 630.

To refresh a card Webflow already documents three tools: Meta’s Sharing Debugger and Scrape Again, LinkedIn’s Post Inspector, and X’s Card Validator. Webflow notes that X’s validator no longer draws the card, and that each of those tools asks you to be logged in. The same refresh steps, including the apps that have no debugger, are in clear Open Graph cache. CardScope does not clear those caches. If the published page has no og:image, continue with og:image not showing.

FAQ

Can I set one image for the whole site?

Webflow says no. Open Graph settings belong to the page you opened. The homepage image stays on the homepage. Set the fields on each static page you share.

How does a blog collection get an image?

On the collection template’s Open Graph settings, choose an Image field. Each item’s file in that field becomes that item’s og:image. The files need matching dimensions. Publish after you save the template.

I saved the image and the card is still empty.

Publish the site, then check the live URL. If the tag is present and an app shows an older card, scrape the URL again. Webflow points at Meta’s debugger, LinkedIn Post Inspector, and X’s Card Validator. Clear Open Graph cache covers the rest.

What does a CardScope check cost?

Previews for X, LinkedIn, Slack, Discord, iMessage, Bluesky, Threads, Mastodon, WhatsApp, Telegram, and Microsoft Teams, plus the fix checklist, are Pro: $19 once via Stripe Checkout. No account. A sample report shows the shape of the result before you pay. A free check names whether og:image and og:title are set. We parse HTML in memory and discard it — we do not store the page.