• Why put and customize an Open Graph?
• How to ensure more clicks on social networks?
• How to change the Open Graph on Webflow?
• Open Graph for dynamic pages

Do you sometimes look at the contents shared on social networks ? You may have noticed, but most of them are accompanied by a small image. It is called Open Graph. What is it about? Why is it important? How to change the Open Graph image on your page?

Why change the Open Graph image?

It is often referred to as the Open Graph protocol. In fact, it was set up with the specific aim of allowing website owners to easily share their content on social networks (Facebook, Twitter, Pinterest, LinkedIn...).

It does not only concern images, but also titles and descriptions. However, the image is the main element I'm going to talk about (for the rest, another time maybe :) ).

Indeed, visual content is a key element to interact with your audience. Statistics actually prove that images help generate more likes, shares and comments (tweets with images get 150% more retweets).

This Open Graph protocol then ensures a good visibility (by a nice image), but it lets search engines like Google to better understand what you are talking about on your site.

However, a well-chosen image guarantees more clicks on social networks, hence the interest in changing the Open Graph image. Since you know exactly who you are targeting, you automatically know what kind of images your readers will be attracted to.

You need a quality image, an image that is sure to attract your targets. That's why I advise you to create an image especially for this purpose (Open Graph). Otherwise, the site will randomly choose any image on your site.

Maybe your logo or an image of the call to action button. If there isn't one, it's simple, he won't put one. The link won't be attractive at all, and won't get any clicks.

Make sure the image itself conveys all the information your audience needs to know. People don't necessarily need to read titles and descriptions to understand anything.

How to change the Open Graph on Webflow?

With Webflow, you only need 2 minutes to change the Open Graph image that will appear on social networks. Yes, you don't need to hire a developer to do it, you can do it yourself.

But first, the image in question must be ready. For my part, I use Figma. You can use the software you are most comfortable with: Xd, Sketch, Photoshop... The objective remains the same: to have a ready, personalized and attractive image. Its size should be 1200 x 630 pixels.

So all you have to do is go to Webflow, on the page concerned. Then, in the Open Graph Settings part. There is all the information about the Open Graph, but as I said above, we are only interested in the image.

So add the image you just designed in the dedicated part. But you will see that it is not a classic. You will have to copy a link. So go to the Webflow media library and drag the image into it. Once you've done that, click on the image in question. It will appear in a new tab and you will get the link (in the link bar). Copy it and go back to the page in question. Then paste the link in the dedicated part. You'll immediately get a preview of what will happen when the page is shared on social networks.

There is a YouTube video in which I describe this at the bottom of the article. Support me by subscribing to the YouTube channel "Happy Desk Design".

Open Graph for dynamic pages in Webflow

As you may have guessed: for your blog or product pages, the Open Graph image does not work the same way as for static sites. You will want the image that appears to be chosen automatically.

For these pages, in the collection templates (in the page concerned). Then, in Open Graph Image, click on "image".

Conclusion
Before changing the Open Graph image on each page of your site, take the time to choose the image and then customize it on an image processing software. By doing this, I promise you that your click rate will increase.

Come back to this page whenever you want. Did you find any ideas that I forgot? If so, what are they? Leave a comment below or send an email to hello@happydesk.be