Sharing your content on Facebook is still one of the best ways to maximize your audience. However, in some cases, Facebook doesn’t display the correct images for your items. The good news is that you can fix this problem pretty quickly if you know how to use the .
You only have to perform two steps:
- Clear the cache of .
- Force Facebook to reload your open graph tags.
In this article, we are going to talk about what Facebook debugger is and how it works. We’ll also explain why Facebook sometimes makes errors when pulling images from your content, and show you how to fix the problem. Let’s do it!
How WordPress Images and Links Are Displayed on Facebook (And What Can Go Wrong)
When you share your content on Facebook, the platform tries to extract a specific set of information that tells it what to show. To do this, it uses elements called ‘open graph meta tags’, also known as ‘og tags’ or ‘og tags’.
and its tags were developed by Facebook in 2010 to help content creators control how the platform displays links to their pages. In practice, these tags allow you to choose which title, description, and image should appear when you share a WordPress link on Facebook:
Since the advent of og tags, other social media platforms have also jumped on the bandwagon, such as Twitter, LinkedIn, and Google+. That level of adoption should tell you how important these tags are.
However, if social media platforms can’t extract the information they need from your content, things can get a little weird. For example, you might occasionally see Facebook display the wrong featured image when you share a post from WordPress.
This error, in addition to being annoying, can negatively affect the conversion rates of your content. Social media can be a massive source of traffic, so you need to make sure your content displays correctly when you share it on Facebook or other platforms.
Fortunately, using og tags correctly is quite simple. All you have to do is include them in the HTML code of your page. They should look something like this:
Most of those tags are self explanatory. All you have to do is define your own title, URL, meta description and associated image where indicated.
With og tags, you can control every aspect of how your content looks on Facebook. That means you can even test them to see which ones work best and use that information to optimize your conversion rates. Of course, that only works if the platform displays your content correctly. If your Facebook images aren’t displaying correctly, you’ll need to fix the problem. That’s where the Facebook Debugger tool comes in.
The Facebook one helps you analyze your pages to see if there are any errors in the way they handle og tags. You can also use it to preview how your links will appear on Facebook when you share them, like in this example.
You don’t even have to sign up for a special account to use the Facebook debugger. However, you need to have a Facebook account to use it.
All you have to do is and write the link of the page you want to analyze. Then press the button Debug and the Facebook debugger tool will show a complete analysis.
The first thing you’ll see is a notification if the service finds that an og tag is missing:
Below that, you’ll find information about the last time Facebook accessed the link you entered. This section also includes information about the page’s canonical URL and about any redirects found on Facebook:
More importantly, you’ll also see a full preview of how Facebook will interpret the URL once you share it on the platform. If there’s something wrong with your featured image, for example, you’ll see it here:
If you want to be even more careful, you can test all your content using Facebook’s URL debugger before to share it. However, that is an inefficient approach. Instead, you should optimize the og tags in your content to avoid errors in the first place.
Before we talk about how to do that, scroll down your report to see a full breakdown of all the og tags on the page you’re analyzing:
Ideally, what you see here is the same title, meta description, URL, and images that you defined in WordPress. If those aren’t the values listed here, you may want to use a dedicated tool to make sure your tags are set up correctly. Let’s talk about how to do that.
How to fix Open Graph tags on Facebook
If Facebook debugger is not displaying the correct content for your WordPress pages, it is likely that you are not using og tags correctly. The best way to solve this problem is to use a plugin that helps you set the og tags for each page manually.
There are several plugins that allow you to choose which elements Facebook should display, which is the same as setting your og tags. The easiest to use is called (from now on we’ll just call it Open Graph for Facebook!):
To use this plugin, go to your WordPress dashboard and then to the tab plugins. Once you’re there, click Add new and use the search bar on the next page to search for the plugin using its full name. Open Graph for Facebook should appear first among the results, and all you have to do is click the button Install Now next to your name:
After WordPress has finished installing the plugin, a blue button will appear. Activate next to your name. You will need to click on it before you can start using the plugin. When Open Graph for Facebook is active, a new widget will appear below the WordPress editor when you open any page or post:
This section allows you to set your og image and description tags manually. As for the title and URL of your content, the plugin will automatically take care of them.
To set an image, click the button Upload/Choose under the field Use this image. The plugin recommends that you use an image with a resolution of 1200 x 630 px, which is optimal for Facebook:
Note that even if you manually set an image through this widget, you will still need to choose a featured graphic through the section Outstanding image. You can use the same image for both, but you still have to do each task separately.
After solving your Facebook image, define a meta description for your content. You can write descriptions of up to 300 characters for Facebook, which is slightly less than . Despite that slight difference, we recommend that you use the same description in both places, just to make your life a little easier.
When you are done using the plugin, remember to publish or update your WordPress post or page. Now you can share your content on Facebook with peace of mind. Already should not there may be problems with your submitted image. If you still get an error, take a look at the next section, where we’ll talk about how to tackle the most likely culprit.
How to Use the Facebook Debugger to Fix Your WordPress Images and Links (In 2 Steps)
If you have already set up your website’s og tags using the above process, the problem is likely not with your website structure. Instead, the most likely reason Facebook isn’t displaying the correct images for your content, or none at all, is probably your caching plugin. Let’s see how to fix that problem now.
Step 1: Clear your WordPress cache
Cache plugins are incredibly popular as they allow you to increase the performance of your website by storing some of its content in your visitors’ browsers. The problem is that sometimes Facebook might try to pull the og tags from your cached content, rather than from the most up-to-date version.
For example, if a cached copy of one of your pages doesn’t include the og tags, Facebook might have trouble displaying the information correctly. Or maybe you’ve changed the featured image on a Page, but Facebook keeps insisting on displaying an outdated version.
In any case, the most direct solution for this problem is to clear the WordPress cache. There are many ways to do this, depending on which plugin you are using. If you’re a fan of , for example, just go to your desktop and navigate to the tab Performance > Control Panel. You will see a button that says empty all caches at the top, which does exactly what it says:
Click that button now and wait for the plugin to do its job. After a few seconds, the page should reload, and your cache should be cleared.
This process is just as simple for other caching plugins, such as . If you are using that tool, just go to the tab Settings > WP Super Cache on your desktop and look for the button clear cache:
Another popular option is . For that plugin, go to the tab WP FastestCache and look for the section that says Delete Cache on the next screen. You will find a bright blue button that says Delete Cache:
Those are three of the most popular WordPress caching plugins. If you’re using a different tool, just take a quick look at its…
Facebook Comments
Disqus