To add an Open Graph image in Webflow, open the Pages panel, open the target page’s settings, and find Open Graph settings. Choose a JPG or PNG from your site assets, or enter a publicly accessible image-file URL, then save and publish the site. For a CMS Collection template, select an Image field instead. Publishing matters: saving the setting alone does not change the live page that social networks crawl.
What an Open Graph image does
An Open Graph (OG) image is the image a social network can use when someone shares your page link. It is page-level metadata, separate from the page’s visible hero image, logo, SEO title, and meta description. Webflow’s Open Graph controls let you set the image, title, and description independently; where appropriate, the title and description can also be drawn from the page’s SEO fields.
Webflow documents two setup paths:
| Page type | Image source | Important constraint |
|---|---|---|
| Static page | Select a site asset or enter a public image-file URL | The asset picker lists JPG and PNG files. |
| CMS Collection template | Bind the OG image to an Image field in the Collection | Every Collection item’s OG image must use consistent dimensions, and a Collection without an Image field cannot use this method. |
Before you configure the image
- Have an image that can be fetched without a login, firewall challenge, or expiring private URL.
- For the most conservative compatibility, prepare an uncompressed JPG or PNG. Webflow’s Open Graph guide says WebP support varies by platform, while its Assets documentation warns that AVIF and WebP are not supported for Open Graph images. That conflicting guidance makes JPG or PNG the safer choice.
- Use one repeatable size for images across your site. Webflow relays Facebook’s recommendation of at least 1080 pixels wide; treat that as Facebook’s recommendation, not a universal requirement for every network.
- Know the live URL you will test after publishing. Social crawlers inspect the public page, not the Designer preview or an unpublished draft.
Add an Open Graph image to a static Webflow page
- In the Webflow Designer, open the Pages panel.
- Locate the page whose share preview you want to change and open that page’s settings.
- Open Open Graph settings. Set the Open Graph title and description if you want values different from the page’s SEO title and meta description.
- For the image, choose Select image and pick an asset from the site, or choose Add URL and enter a publicly accessible URL that points directly to an image file.
- Save the page settings.
- Publish the site to the domain that people will share. The setting is not live until publication completes.
Webflow describes the URL option as a publicly accessible link to an image file—typically a URL ending in an image-file extension. A URL that redirects to a login page, returns HTML, requires authentication, or expires can leave crawlers without an image even though the setting appears saved.
Use a CMS image on Collection template pages
- Open the Pages panel and open the settings for the relevant Collection template page.
- Go to Open Graph settings.
- For the image, choose the Image field that should represent each item, such as a main image or thumbnail.
- Check that every item in the Collection uses the same pixel dimensions. Resize or replace outliers in the CMS before publishing.
- Save the template settings and publish the site.
This binding is dynamic: each Collection item supplies its own image when its URL is crawled. If the Collection has no Image field, Webflow says an OG image cannot be configured through this template method. In that case, add an Image field or use a static-page approach where appropriate.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose a format and dimensions that social crawlers can use
Prefer JPG or PNG
Webflow’s asset guidance recommends JPG or PNG for Open Graph images and warns against compressing assets that are linked as OG images. The Open Graph guide separately notes that WebP works on many popular platforms but that support varies, and it permits adding a WebP URL. Because those statements are not fully consistent, use an uncompressed JPG or PNG when broad, predictable compatibility matters. Avoid AVIF for this purpose.
Keep Collection dimensions consistent
Collection templates should not mix radically different shapes. A single, documented canvas size prevents one item from producing a cropped or letterboxed card while another looks correct. Facebook’s relayed guidance is a minimum width of 1080 pixels; select the height and aspect ratio for your design, then apply it consistently.
Do not confuse file size with dimensions
A smaller file may download faster, but Webflow specifically cautions against compressing assets used as Open Graph images. Preserve the source quality needed for the social service to process the image, and verify that the URL returns the image itself rather than an HTML wrapper.
Publish, then force a fresh social preview
Social platforms cache link metadata. A newly published image can therefore be correct in Webflow while an old card still appears elsewhere.
- Open the public URL in a private browser window and confirm that the page is live.
- Use Meta’s debugger to submit the URL and request a fresh scrape.
- Use LinkedIn’s Post Inspector to inspect the URL and request a re-scrape.
- For X, use its card validator for crawl logs, then compose a post to view the card preview.
- If the first share produced no image, remove and re-add the link after checking the file format and dimensions. Webflow notes that a first-share preview can occasionally omit the image.
These inspectors may require you to be logged in. Re-scraping updates the platform’s cache; it does not alter Webflow’s page settings.
Optional head metadata for explicit dimensions
Webflow shows og:image:width and og:image:height as optional metadata that tells crawlers the image’s dimensions. This is not required for the normal page-settings workflow.
Rank #3
One dimension set across the site
If all OG images share dimensions, Webflow places the tags in site-wide custom head code. Use the actual pixel dimensions of your image:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">The numbers above are an example of explicit metadata; replace them with the real dimensions of the image you publish. Incorrect values can be worse than omitting the optional tags.
Different dimensions for Collection items
For varying Collection images, Webflow describes using page-level head code instead. Keep the values tied to the image that the individual page exposes, and prefer consistent dimensions whenever you control the source assets.
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
Troubleshoot a missing, wrong, or stale image
| Symptom | Likely cause | Fix |
|---|---|---|
| No image on the first share | The platform has not completed a crawl, or the first preview omitted the image. | Confirm the site is published, then run that platform’s debugger or inspector. Remove and re-add the URL if necessary. |
| Old image still appears | Social-platform cache. | Request a re-scrape in Meta’s debugger, LinkedIn Post Inspector, or X’s card validator, then wait for the platform to refresh its preview. |
| Image setting saves but crawler finds nothing | The URL is private, redirects to HTML, expires, or does not return an image file. | Use a public, stable URL that returns the image directly, or select a JPG/PNG from Webflow assets. |
| WebP or AVIF is ignored | Platform support varies; Webflow’s Assets guidance warns against AVIF and WebP for OG images. | Switch to an uncompressed JPG or PNG. |
| One CMS item looks cropped or stretched | Collection images do not share dimensions. | Normalize the source images and republish the Collection template. |
| Image appears in Designer but not on the live URL | The page was saved but not published to the domain being tested. | Publish, open the exact public URL, and then request a fresh social scrape. |
| Metadata appears correct but card is still blank | A bot check, timeout, or other crawler-side fetch failure. | Test the public image URL directly, remove access restrictions, and retry the platform inspector after the page responds normally. |
Or skip the browser setup
If you need a clean screenshot of the published Webflow page for QA or to create a share asset, ScreenshotNeo can capture the live URL with one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
See the ScreenshotNeo API documentation for the options. This cURL request captures the published page as a WebP file:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-webflow-domain.com/your-page -o shot.webpThe same request in Python:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://your-webflow-domain.com/your-page"}, timeout=90)
open("shot.webp", "wb").write(r.content)And in Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://your-webflow-domain.com/your-page' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Its Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. For page verification, remember that a screenshot shows the rendered page, while the OG image is metadata consumed by social crawlers.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Create a free ScreenshotNeo account to get 1,000 screenshots a month without adding a card.
Operational checks for teams
- Store the source image and its pixel dimensions alongside the page or CMS item so replacements remain consistent.
- After every OG-image change, publish first, test the public URL, and then refresh each priority social platform’s cache.
- Keep a stable image URL. Changing the URL can make a platform treat the image as new, while changing the file behind a heavily cached URL may delay visible updates.
- When automating QA, record the HTTP response and the screenshot separately. A successful browser render does not prove that a social crawler will accept the OG image URL.
Frequently Asked Questions
Does an Open Graph image replace the page’s visible hero image?
No. It is share metadata. Your page can display one hero image while social platforms use a different image configured in Open Graph settings.
Will changing the OG image improve search rankings?
The setting controls link-preview presentation on social services; it is not a direct substitute for SEO title, meta description, structured data, or the page content itself.
Can I verify the image without sharing the URL publicly?
The platform inspectors and crawlers need a publicly reachable URL. Use a published staging or production URL that does not require authentication, then request a re-scrape.
Recommended Free Tools
The Bottom Line
Set the image in Pages → page settings → Open Graph settings, choose a public JPG or PNG (or a CMS Image field), save, publish, and refresh the social platform’s cache. Use explicit dimension tags only when your implementation needs them.
Quick Recap
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.
