Have you ever wondered why some web pages have well-designed images and description when their links are shared on Facebook? The truth is that you can control what users see when your link is shared.

 

Enter Facebook Open Graph

Facebook Open Graph is not new, but some small business owners and social media teams that are less familiar with the platform are likely to be unaware of this feature.

Here’s how Facebook defines Open Graph:

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

In other words, you can add images and specify the text description that appears below the image with open graph.

 

How can I use it?

Well, that is the point of this tutorial. It is easy to take advantage of Facebook’s open graph to make sure that every link of your website shared by users on Facebook looks the way you want it to. Facebook has documented the entire process here, but all you really need to do are these:

1. Add metadata to any object you want to feature
2. Specify the object type, such as, when it’s a video, you need to use og:type to specify that it is a video

But how?

Fret not. If you’re using WordPress, there are plenty of plugins that allow you to complete those 2 tasks easily. I use SEO by Yoast to do this. If you’re using another platform, you will need to search for one that works with your content management system.

 

Adding metadata using SEO by Yoast

If you’re using SEO by Yoast like me, you can easily add metadata to your website by navigating to the “Social” tab of the plugin as shown in the image above.

Once you’re in, navigate to the Facebook tab.

First, tick on “Add Open Graph meta data”.

Next, click on “Add Facebook Admin” and log in to your Facebook. In the example above, I already logged into my Facebook account so the button shows “Add Another Facebook Admin” instead. But it doesn’t matter.

Then, type your Facebook Page URL in. I’m not 100% sure what this is for but it could be useful when you’re running ads.

You’re almost there! Upload the image and specify the title and description you want Facebook to show when your link is shared. For your meta description, you have the option of using the same one as your website. To do so, simply click on the button “Copy home meta description” .

Finally, you should choose another image for the default settings. This image is used if the link shared does not contain any images. In other words, if a particular webpage of yours does not have any image, Facebook will use this image instead. I simply used the same one I uploaded earlier.

 

The final step

You’re set and ready to go! Try typing your link into a Facebook post now. Do the image and description show up the way you wanted them to? No? That is because Facebook has not grabbed the latest data from your website. So there is just one more simple task for you.

First, go to the Facebook debugger tool.

You should see the screen below.

Type your website URL into the text box and click on “Debug”.

Once you’re at the screen below, click on “Fetch new scrape information” and you’re done!

To check if Facebook has indeed updated your website data, scroll down and look at these 2 parts.

Ensure that Facebook has just scraped new information from your website.

Also make sure that the information scraped is indeed what you want Facebook users to see when your website appears on their newsfeed.

And that is it! I try to keep my beginner tutorials up-to-date so if there is anything that is not working anymore for you, let me know. Else, I’d always appreciate it if you share this with someone who might find it helpful.