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 the Open Graph image in Page Settings or Project Settings > SEO in Webflow.
  • Publish your site to update changes.
  • Clear social media caches using Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector.

To change the Open Graph (OG) image displayed when sharing your Webflow website, follow these steps:

1. Set the Open Graph Image in Webflow

  • Go to Webflow Designer and open your project.
  • Click on the Page Settings (⚙️ icon) for the specific page where you want to set the OG image.
  • Scroll down to Open Graph Settings and click Upload Image.
  • Ensure your image is at least 1200 x 630 pixels for optimal display.
  • If you want the same OG image for all pages, set it in Project Settings > SEO.

2. Publish Your Website

  • Click Publish in the top-right corner and publish your site to the appropriate domain(s).
  • This ensures that the updated OG image is live.

3. Clear Open Graph Cache on Social Platforms

Summary

Upload your Open Graph image in Page Settings or Project SEO settings, publish your site, and clear social media caches to update the preview image when sharing links.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is it possible to create a "show more" button in Webflow to display all records in an FAQ collection list?
Can you provide assistance with creating a modal view for glossary terms on my Webflow site using CMS collection content?
Is there an iPad landscape view option in Webflow? I've seen in a forum that the default desktop view looks the same as the iPad landscape view, but this doesn't appear to be the case. The iPad landscape view looks completely different and there doesn't seem to be a way to fix it.
How can I create a scroll-friendly, cursor-friendly, and touch-friendly horizontal scrolling section in Webflow with no scroll bars on any browsers?
How can I disable the dragging and touch swiping behavior in Webflow sliders?
What are the options to get real-time assistance with publishing issues on Webflow?
Can I create a split screen website in Webflow where the scrolling is determined by the position of the mouse on each side, without needing to write code in CSS/HTML?
Why is Webflow Designer running slow in Design Mode but not in Preview Mode, even after a system restart?
How can I create a form in Webflow that allows users to select options from a list and submit their selections?
What are the new features in the updated Webflow menu that replaces the default browser menu when right-clicking on elements?
How can I improve the loading speed of my Webflow website after creating a new page?
How can I add the 'Access-Control-Allow-Origin' header to Webflow to resolve the issue in Firefox and Safari where images are not being displayed? Is the syntax of the header supposed to be in HTML or Javascript?
How can I redirect users to their home dashboard after logging in on my members website (beta) in Webflow?
Can I create a website with Webflow where users can open an account, view their personal information, and integrate it with a database?
How do I achieve a draggable and scrollable web design using Webflow and integrate it with a prototype made in Figma?
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 use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I make the menu close when a link is clicked in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?
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?