How to Add an Open Graph Image in Webflow

In this tutorial, Sandro, co-founder of Gemeos Webflow agency, shows you how to add an Open Graph image in Webflow so you can control the preview when your content is shared on social media.

1. Create your OG image

Create a 1200x630px image with your page title, your logo, and a strong visual background. Tools: Figma, Canva, or your usual design tool. Export it as JPG or PNG (under 8 MB).

2. Set the OG image at the project level

In Project Settings > SEO, upload your default OG image. It applies to every page that doesn't have a specific image set.

3. Customize the OG image per page

In the Designer, select a page and go to Page Settings > SEO. Upload a specific OG image for that page. It overrides the project's default image for that page only.

4. Test the preview

After publishing, test it with the Facebook Sharing Debugger or Twitter Card Validator. If the old image still shows up, click "Scrape Again" to force a refresh.

Conclusion

A good OG image can significantly increase click-through rates on social shares.