Webflow sync, pageviews & more.
NEW

What is the recommended method for hosting an open graph image in Webflow?

TL;DR
  • Upload your OG image to Webflow’s Asset Manager, copy its hosted URL, and paste it into the Open Graph Image URL field in your Page Settings.
  • Publish your site and verify the image displays correctly using Facebook's Sharing Debugger and Twitter's Card Validator.

To ensure your Open Graph (OG) image displays correctly when sharing your Webflow site on social media platforms, it's important to host it reliably and link it properly.

1. Upload the Image to the Webflow Asset Manager

  • Go to the Webflow Designer and open any page.
  • In the right-hand Assets panel, click the Upload icon to upload your OG image (JPG or PNG, ideally under 300 KB).
  • Once uploaded, click on the image and copy the hosted file URL (Webflow hosts this image on their CDN).

2. Set the OG Image in the Page Settings

  • Go to your Pages panel.
  • Hover over the page you want to edit and click the gear icon to open Page Settings.
  • Scroll to the Open Graph Settings section.
  • Paste the hosted image URL you copied earlier into the Image URL field.

3. Follow OG Image Best Practices

  • Resolution: Use at least 1200 × 630 pixels for optimal Facebook/Twitter previews.
  • Format: Use .jpg or .png.
  • Accessibility: Make sure the image is publicly accessible by visiting the URL directly in a new browser tab.

4. Publish the Site and Test OG Tags

Summary

Upload the OG image to Webflow’s Asset Manager, copy the CDN URL, and set it in your Page Settings’ Open Graph section. Always test with social preview tools to confirm proper implementation.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is there an updated method or script that can prevent body scrolling while a modal window is active in Webflow?
How can I bypass Webflow's limitation for nested collection lists in static single pages and use unlimited nested collections with more than 5 items using a lightweight jQuery with no performance issues?
What is the difference between the account plan and the site plan in Webflow? Which plan would you recommend for creating a simple website with multiple sections, like a portfolio site, that is not business-oriented? Please help!
What is the recommended method for hiding CMS item pages from Google search results in Webflow? Can the NOFOLLOW meta tag be applied to all CMS pages or is a Robots.txt file the only option?
Are there any reported issues with FIXED-BACKGROUND-IMAGEs on iOS devices in Webflow? The background image scrolls with the page instead of staying fixed. Could this issue be related to iOS?
Why is the lottie animation file size so large when exported from After Effects using bodymovin with a compression of 60, making it unsuitable for Webflow due to long loading times?
How can I resolve the issue of images not being displayed on the published Webflow site due to a lack of authorization?
Can custom content like buttons, custom components, image grids, etc., be placed within Rich Text elements in the Webflow CMS for a blog-like website? How can this limitation be overcome for a more flexible design and layout?
Can I place an order on Webflow without purchasing a plan by using a sandbox account?
Is it possible to enable auto play for a YouTube video in the new Webflow lightbox, even if passing on YouTube parameters through the URL doesn't work?
Why did my Webflow site stop working with a 526 error after using Cloudflare's proxy DNS?
How can I change the color of a button on my side nav in Webflow when it is pressed and its landing page is opened?
How can I adjust the scroll down button in my Webflow hero section to account for a fixed navbar, ensuring the top part of the second fold is not covered?
Can I stack two images in Webflow with just one click, if they have the same size?
How can I redirect my old domain to my new domain in Webflow after rebranding?
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?