How to Add or Change Open Graph Image in Webflow

under 60 seconds

Open Graph Image in Webflow

What's this Open Graph Image?

The Open Graph Image is like the invitation card for your webpage in the social media world. Also known as meta graphic, social share image or social share graphic.

So, what's it used for?

This nifty image serves as the face of your content when shared on social platforms. Think of it as the visual ambassador that says, "Hey, check out this cool stuff!" It's what people see when your article or page gets shared on Facebook, Twitter, or other social hangouts.

Now, let's get down to the step-by-step of jazzing up your content's social presence with this Open Graph Image thing in Webflow! 🚀

Step by Step Instructions

Step 1: Access Page Settings

Navigate to your Webflow project by opening the project dashboard. Choose the specific site and click on "Open Desinger" where you want to work on the Open Graph image. Click on the "Pages" tab, and from there, select the exact page that deserves the social media spotlight.

Step 2: Open Graph Settings

Open Graph Image Settings

Once inside the Page Settings, scroll down to find the hidden gem – "Open Graph Settings". It's the backstage pass for your social media presence, so keep your eyes peeled.

Step 3: Locate the Open Graph Image URL

Within the Open Graph Settings, locate the field named "Open Graph image URL". This is where the magic happens, where your image gets its social media charm.

Step 4: Upload Image to Webflow Assets

Webflow Project Assets

Move over to your Webflow project assets. Upload the image you fancy as your Open Graph star. Remember, a picture speaks volumes, especially in the social media language.

Step 5: Grab that URL

Open Graph URL

After uploading, click on the image to open it. Now, either hit the 'Open in a new tab' icon or simply right-click and select 'Copy link address.' This step is like giving your image a passport to the URL world.

Step 6: Paste and Save

Return to the Page Settings and find the "Open Graph image URL" field. Paste the link you just copied. And don't let the curtain fall without hitting that all-important "Save" button – it's like sealing an envelope before sending out your social media invitation.

And there you have it – your Open Graph image is all set to shine across the vast expanse of social media. Now, when someone shares your article, it won't just be informative; it'll look good doing it! 🌟