Free tools Windows power users keep installed
One-click scans. No signup required.
To set a social sharing image in Webflow, open the page’s settings from the Pages panel, choose an image under Open Graph settings, save, and publish the site. For CMS Collection pages, bind the Open Graph image to an Image field so each item can use its own image. If a platform still shows an old or missing preview, refresh its cached copy with the platform’s inspector or debugger.
Set an image for a static page
- In Webflow, open the Pages panel and open settings for the page you want people to share.
- Go to Open Graph settings. You can also set an Open Graph title and description here. Webflow recommends making Open Graph content specific to the page being shared. For the title and description, you can enter text or use the page’s SEO title and meta description; the image remains a separate Open Graph setting.
- To use an image in your Webflow assets, click Select image, choose the image, click Add image, then click Save. The asset picker lists JPG and PNG images.
- To use an externally hosted image, choose Add URL, enter a publicly accessible URL that points to an image file, and save. WebP support varies across social platforms; Webflow directs users to enter a WebP image through the URL option.
- Publish the site. Saving in the Designer does not make the change live on the published site.
Webflow’s Open Graph settings guide covers the current workflow. Open Graph metadata is attached to a page, rather than being a single site-wide image switch.
As an Amazon Associate I earn from qualifying purchases.
Give CMS Collection pages their own images
For Collection items, configure the Collection template once and connect its Open Graph image setting to an Image field. Each published item can then supply its image through that field instead of requiring manual image selection in every item’s page settings.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problems- Open the Collection template’s page settings.
- In the Open Graph image setting, choose the Collection’s Image field.
- Make sure the Collection’s Open Graph images share the same dimensions, as Webflow specifies.
- Save and publish the site, then check a few item URLs in the social platforms where they will be shared.
You can also use Collection fields for dynamic Open Graph titles and descriptions—for example, a blog item’s title and main image or thumbnail. If the Collection has no Image field, it cannot provide an image through this binding method. See Webflow’s Open Graph settings guide and Collection pages documentation.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose an image and dimensions carefully
Webflow’s troubleshooting guidance recommends JPG or PNG for a missing Facebook preview and reports Facebook’s recommendation that an image be at least 1080 pixels wide. That guidance is specific to Facebook troubleshooting; it is not a universal specification for every social network.
The same Webflow article shows og:image:width and og:image:height values of 1200 and 630 in an example custom-head-code snippet. Treat those numbers as example metadata values, not a requirement for every image or platform. If image dimensions vary across pages, Webflow says the dimension tags can instead be placed in the relevant page’s head settings. The guidance was updated September 7, 2026; check the current platform requirements before publishing.
Open Graph tags belong in the document head. Webflow’s Open Graph guide and Collection documentation explain the settings that generate them.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Set social metadata for a secondary locale
If your site uses Webflow Localize, you can edit page-level Open Graph title, description, and image separately for a secondary locale. Some Localize features are available only on certain plans, so check the feature availability for your account rather than assuming every plan includes it. See Webflow’s Localize SEO settings guide.
Rank #3
Fix a missing or outdated social preview
Social platforms may keep a cached copy of a page’s metadata. After changing an image, publish the site first; then use the relevant platform’s current inspection tool to ask it to fetch the URL again.
- Facebook: Webflow points to Meta’s Sharing Debugger to inspect or re-scrape a link. Webflow notes that using it requires a Facebook login.
- LinkedIn: Use LinkedIn’s Post Inspector to inspect the URL; Webflow notes that it requires a LinkedIn login.
- X: Webflow says the Card Validator no longer displays a preview. Check the appearance in the post composer instead.
- Pinterest and Instagram: Webflow says they do not offer dedicated validation tools and suggests Meta’s debugger to check how those apps may display a site.
Platform tools and their behavior can change, so verify the current workflow before relying on a preview. Webflow documents these caveats in its Open Graph troubleshooting guide.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
If Facebook still shows no image
- Confirm that the live page has the intended Open Graph image, and that the image is publicly accessible.
- Try a JPG or PNG and check that dimensions are consistent with the rest of the site.
- Re-scrape the URL in Meta’s debugger to refresh its cached information.
- If Facebook is generating the preview for the first time, Webflow says removing and re-adding the link in the post may help. This is a possible workaround, not a guaranteed fix.
If the image remains old after an update
- Confirm that you saved the page settings and published the site.
- Check the exact URL being shared, including whether it is the localized or canonical page you intended.
- Use the platform’s current inspector or debugger to fetch the page again; checking only the page in a browser does not refresh a social platform’s cached preview.
Or skip the browser setup
If your workflow also needs programmatic website screenshots—for example, to check a published page—ScreenshotNeo is a website screenshot API and MCP server. One GET request can return an image or PDF. Its screenshot is not a substitute for setting Webflow’s Open Graph image or refreshing a social platform’s cache.
For a screenshot of a published page, create an API key and replace YOUR_API_KEY and the URL below. This cURL command saves a WebP screenshot as shot.webp:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets 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 per month with no card, and paid plans start at $5 for 3,000. Sign up for free.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
