How to Add an Open Graph Image in Webflow
Learn how to add an Open Graph image in Webflow to control how your site looks when it’s shared on social media.
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 gets 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 by 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 strong OG image can significantly increase click-through rates on social media shares.
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
