Webflow sync, pageviews & more.
NEW

How can I change the open graph image displayed when sharing my Webflow website via chat or social media?

TL;DR
  • Set a default OG image in Webflow’s Project Settings under the SEO tab and save your changes.
  • For individual pages, enable and configure Open Graph settings in each page's settings panel in the Designer.
  • After publishing, use Facebook’s Debugger and Twitter’s Validator to refresh cached previews.

To change the Open Graph (OG) image that appears when sharing your Webflow site on social media or chat, you need to set a specific image in your Project Settings and/or per page. Here's how.

1. Set Default Site-Wide Open Graph Image

  • Go to Project Settings from the Webflow Dashboard.
  • Click on the SEO tab.
  • Scroll to the Open Graph Settings section.
  • Upload your desired default OG image under Default Open Graph Image URL.
  • Recommended dimensions are 1200 x 630 px.
  • Click Save Changes at the bottom.

2. Set Page-Specific Open Graph Image

  • Open the page in the Webflow Designer.
  • Click the Page icon (top left) to open the Pages panel.
  • Select the page you want to customize.
  • Click the gear icon next to the page name to open Page Settings.
  • Scroll down to the Open Graph Settings section.
  • Toggle Use Open Graph Settings to ON.
  • Add:
  • A title and description (optional but recommended).
  • A specific Open Graph Image (upload or link).
  • Click Save and Publish your site.

3. Clear Social Media Cache

Some platforms cache preview data. After updating OG settings:

4. Hosting Considerations

  • Ensure the image URL is accessible and hosted over HTTPS.
  • Images should be under 5MB for social media compatibility.

Summary

To change your OG image in Webflow, update it in the Project SEO settings for a site-wide image or per individual Page Settings for page-specific control. Don’t forget to refresh the cache using social media debug tools after publishing changes.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What could be causing payment conflicts when trying to upgrade from a free trial on Webflow, and how can this issue be resolved?
How can I use my own icons as bullet points in an unordered list on my Webflow site?
What is the best way to create a side navigation bar in Webflow that avoids overlapping with the main text content when resizing the browser?
How can I add a free appointment scheduling form from Taskeo to my Webflow website?
How can I create lists in rich text elements using Webflow?
Can Facebook Messenger be added to a Webflow website?
Can the order of items in the CMS be changed in Webflow?
How can I fix the issue with my Webflow dropdown menu not expanding in Chrome, even though it works in Firefox and Edge?
How can I fix the issue of repeatedly receiving "wrong password" error on my Webflow account and then encountering a "429 Too Many Requests" error?
How can I rotate text links in Webflow without disrupting the responsive layout?
How can I incorporate live shipping rates from UPS, FedEx, USPS, and LTL shipping into a client's website using Webflow?
How can I integrate Woocommerce with my Webflow website that has been converted to Wordpress with Udesly, so that I can fully utilize the capabilities of Woocommerce for my shop?
Is it possible to integrate the iDeal payment option into a Webflow website using third-party plugins or platforms such as Mollie, Ecwid, or WordPress?
Why is it not possible to invite users in Webflow? Is it because the product is still in beta?
How can I make the nav bar go full width in Webflow when the built-in container is restricting it?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?