How to Set Social Sharing Images in Webflow

To set a social sharing image in Webflow, open the page’s settings in the Pages panel, choose an image under Open Graph settings, save, and publish the site. For CMS Collection pages, connect the Open Graph image to an Image field so each item can have its own image. If a social platform keeps showing the previous image, publish the change and use that platform’s current inspection or debugging tool to refresh its cached preview.

Webflow’s Open Graph settings belong to individual pages. They control the title, description, and image platforms use when someone shares that page’s URL. Webflow recommends making this content specific to each page. Webflow’s Open Graph guide documents the settings and image workflow.

Set an image for a static page

1. Open your site in Webflow Designer and open the Pages panel.
2. Find the page you want to configure, open its page settings, and locate Open Graph settings.
3. Choose an image from your site assets or provide a public image URL, then save the page settings.
4. Publish the site to the domains where the page is live.
5. Open the published page’s URL in a social preview debugger or inspector to check the result.

In the asset picker, select Select image, choose a JPG or PNG, click Add image, and save. To use an externally hosted image, choose Add URL and enter a publicly accessible URL that points to the image file. Webflow notes that support for WebP varies by social platform; WebP can be supplied through the URL option.

The Open Graph title and description are separate from the image. You can enter them manually or choose to use the page’s SEO title and meta description. Selecting SEO values does not set the Open Graph image for you.

Choose an image that previews reliably

Use an image URL that social crawlers can fetch without a login, session cookie, or browser-only access. Check that the image loads directly in a private browser window and that the published page points to the intended asset.

• Format: JPG or PNG is a practical default. Webflow says WebP support varies by platform.
• Dimensions: Webflow’s troubleshooting guidance reports Facebook’s recommendation of at least 1080 pixels of image width. Its example custom-code tags use 1200 by 630 pixels, but those values are an example, not a universal requirement for every network.
• Consistent sizing: For Collection pages, Webflow specifies that Open Graph images in a Collection must share dimensions.
• Public access: A URL that works only while you are signed in may not be retrievable by a social platform.
• Composition: Keep the important subject away from the edges so the image remains clear if a platform crops it differently.

Social networks choose how to render and crop a preview. Verify the result in the platform where you expect the link to be shared rather than assuming every platform will display it identically.

Set different images for CMS Collection items

For a blog, product catalog, or other Collection, configure the Collection template once and bind its Open Graph image to a Collection Image field. Each item can then use the image stored in that field.

1. Make sure the Collection has an Image field for the social image. Add one in the Collection settings if needed, then populate it for each item.
2. In the Pages panel, open the settings for the Collection template page.
3. Under Open Graph settings, use the dynamic field control to select the Collection Image field for the image.
4. Optionally use Collection fields for the Open Graph title and description as well, such as the item title and summary.
5. Save, publish the site, and inspect a few individual published item URLs.

Every Open Graph image in a Collection must share dimensions. If there is no Image field in the Collection, Webflow cannot bind the template’s Open Graph image to one; create and fill an Image field first. For dynamic settings and template pages, see Webflow’s guides to Collection pages and Image fields.

Publish and verify the live page

Saving a setting in Designer does not itself update the published page. Publish after changing an image, then inspect the exact public URL you intend people to share. Check the page itself and, where possible, confirm the Open Graph image URL points to the correct public asset.

If the site uses Webflow Localize, switch to the relevant secondary locale and review that locale’s page-level Open Graph image. Webflow allows Open Graph title, description, and image settings to be edited per secondary locale when Localize is enabled; feature availability can depend on the account’s Localize plan. See Webflow’s Localize page settings guide.

Troubleshooting missing or stale images

Symptom	Likely cause	What to do
No image in the preview	The live page has no Open Graph image, the change was not published, or the image URL is inaccessible to crawlers.	Confirm the page’s Open Graph image setting, publish, and open the image URL directly without signing in.
The previous image still appears	The social platform is showing a cached preview.	Use that platform’s current debugger or inspector to re-scrape or inspect the URL. Recheck the preview after the platform processes the refresh.
One CMS item has no image	Its Image field may be empty, or the template may be bound to a different field.	Fill the item’s image field, verify the Collection template binding, and publish again.
Some Collection previews differ in size	The source images have inconsistent dimensions.	Use a consistent image size across the Collection and inspect representative item pages.
WebP works in a browser but not in a social preview	Social-platform WebP support varies.	Try a JPG or PNG image and refresh the preview through the platform’s inspection tool.
The preview is still wrong after re-scraping	The platform may not have refreshed yet, or the shared URL may differ from the URL you changed.	Check the exact URL, redirects, published page, and image URL. Retry the platform’s current inspector. For a first Facebook preview with a missing image, Webflow notes that removing and re-adding the link in a post may help; it is not guaranteed.

Webflow’s troubleshooting guide identifies Meta’s Sharing Debugger for Facebook, LinkedIn’s Post Inspector, and X’s Card Validator. Tool behavior can change: Webflow notes that X’s validator no longer displays a preview and suggests checking an X post in the composer. It also says Meta’s debugger may help check how Pinterest and Instagram display a site, since those services lack dedicated validation tools in its guide. Check the current platform workflow before publishing.

If you add custom head code to declare image dimensions, Webflow’s guide shows og:image:width and og:image:height with example values of 1200 and 630. Treat those as example tag values rather than a rule that applies to every platform. If dimensions differ by page, Webflow says these tags can instead go in that page’s head settings. Prefer Webflow’s page or Collection settings for the image itself unless custom code is needed for your setup.

Or skip the browser setup

If you need a clean screenshot of the published page to review its appearance alongside the social preview, ScreenshotNeo is a website screenshot API and MCP server. A screenshot does not set the Open Graph metadata or force a social platform to refresh its cache; it gives you a captured view of the live page.

One GET request returns an image or PDF. For example, save the published Webflow page as a WebP screenshot:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/blog/my-page -o shot.webp

See the ScreenshotNeo API documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.

FAQ

Can one Open Graph image setting apply to every Webflow page?

No. Webflow’s Open Graph settings apply to the page where you set them. Configure static pages individually or bind a Collection template to fields for dynamic item pages.

Can I use the same image for SEO and social sharing?

You can use the same asset, but the SEO metadata and Open Graph image are separate settings. Choose the Open Graph image explicitly.

Does ScreenshotNeo refresh a social platform’s cached preview?

No. It captures a web page. Use the relevant social platform’s current debugger or inspector to refresh or inspect its cached preview.

Sources

• Webflow: Control the look of social shares with Open Graph
• Webflow: Structure and style Collection pages
• Webflow: Localize page settings