Optimizing open graph tags with Facebook Sharing Debugger

For a long time now, I’ve building, managing and launching WordPress websites. A big part of having a website these days is the use of social media. Maybe you have heard of Facebook.

Anyway, over the past few years, we have seen the need for open graph tags. These tags help the social media networks, especially Facebook, know what they should display when someone shares your article or web page.

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.  Open Graph Protocol

Open Graph tags are important because, sometimes, you have a hard time trying to figure out why you do not see the correct image when your article is shared.

Usually, in the WordPress world, we add a feature image, and it works fine. I can remember when social media would choose the first image it finds on the page which could be tricky when you have multiple images. I have seen Facebook choose an image in the sidebar or banner ad. This is not ideal.

So, how do you solve this dilemma?

First of all, make sure you have open graph tags installed. Now, this is rather simple to do when using WordPress. The top SEO plugins such as All in One and Yoast include an easy plug and play option to add these tags.

Next, make sure you insert a featured image for each page and article. Most of the time, this is what Facebook will choose to display.

If your SEO plugin has the option to include a default featured image, then take advantage of that option as well.

This week I noticed Facebook displaying the default image for a local site I run. It is better than no picture at all. What I discovered was that some relatively new pages I had created recently did not contain specific featured images. Facebook included my default image because I had not specified the right picture.

Facebook has a tool that can help you see what you are missing for your open graph metadata. It is called the Facebook Sharing Debugger, and it is free to use.

Facebook Sharing Debugger

There are two options for using the Facebook Sharing Debugger,

You can use the Sharing Debugger to see the information that is used when your website content is shared on Facebook, Messenger and other places. The Batch Invalidator will let you refresh this information for multiple URLs at the same time. Open Graph markup lets you take control over how your website content appears to others.

The Access Token Debugger is a separate part of the Facebook Debugger. If you are using an access token and you are having issues with the token, you can debug using that part of the debugger.

Starting with the Sharing Debugger, this is where you can check any one URL.

As you can see in the image below when I put the URL from my website and I get any errors or missing tags and what the featured image.

Screenshot: Sharing Debugger Facebook for Developers

I am not using the Facebook app ID, so Facebook alerts me of that missing tag. You can also see the last time the page has been scraped by Facebook (13 hours ago), the Response Code, the Fetched URL, the Canonical URL, and the Link Preview.

Now, below you can see what Facebook sees for you open graph properties.

Now that you can see the image Facebook is using, you can make the necessary change. But what if you have made a featured image change and Facebook is still showing the wrong image. That’s pretty easy to fix.

You simply run the debugger, and click “Scrape Again.”

Sometimes it takes more than one scrape, but Facebook will reset its cache to show the correct image. This is very important when you have created a piece of content, and you are sharing it on Facebook, and the image needs to be correct for your promotional efforts.

Wrapping it up

Facebook is just one piece of the social media puzzle, but it is likely a critical piece for your business. Fortunately, SEO plugins come equipped to help you set these social media metadata.

Have you used the debugger before? How do you implement your social media metadata?