HEY

Participate in the next Webflow Challenge!

How to change the Open Graph image on social networks?

What is the Open Graph image. Why is it important? How to change the Open Graph image of your page on Webflow? Find out the answers here.

Updated on

13/8/2020

change the open Graph image
Photo by Kobby Mendez on Unsplash

Do you ever watch shared content on social networks? You may have noticed it, but most of them are accompanied by a small image. It's called Open Graph. What is it? Why does it matter? How do you change the Open Graph image on your page?

Why change the Open Graph image?

The Open Graph protocol is often referred to as the Open Graph protocol. In fact, it has been implemented with the specific purpose of allowing website owners to easily share their content on social networks (Facebook, Twitter, Pinterest, LinkedIn...).

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

Indeed, visual content is a key element in interacting 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 good visibility (through a nice image), but it leaves it to 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.

change the open Graph image
Photo by Battlecreek Coffee Roasters on Unsplash

You need a quality image, an image that is sure to attract your targets. This is why I advise you to create an image especially for this purpose (Open Graph). Otherwise, 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 on. The link won't be attractive at all, and won't get any clicks.

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

change the open Graph image
Photo by Boba Jaglicic on Unsplash

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, no need to call 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 dimension should be 1200 x 630 pixels.

So all you have to do is go to Webflow, on the relevant page. Then, in the Open Graph Settings section. There is all the information about the Open Graph, but as I said before, only the image is of interest to us.

So add the image you just designed in the dedicated section. Only, you'll see that it's not classical. You'll have to copy a link. Go to the Webflow media library and drag and drop the image. Once you've done that, click on the image in question. It will appear in a new tab and you'll get the link (in the link bar). Copy it and go back to the relevant page. Then paste the link in the dedicated area. 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 subscting to the YouTube channel "Happy Desk Design"

change the open Graph image
Photo by Wesual Click on Unsplash

Open Graph for dynamic pages in Webflow

You probably figured it out: for your blog or your 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 section (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 right 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 come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydes.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training