How To Fix WordPress Images Via Facebook Debugger
- Last Updated: May 8th, 2019
- Posted by: Editorial team
- Category: Tutorial
Suffixing a long research! Every blogger or social media marketer noticed that – sharing a link of your site in the faith of your blog posts or a page over Facebook, either does not show up or it is not the right one. Even though, sometimes the text from your blog post or web page does not get illustrated properly. Here, comes the twist and now you need to fix it. Often you are not very aware of the issue, hence, fix WordPress images via Facebook Debugger with our helpful article on the same.
So keep reading, we will illustrate to you a super easy guide which will help to fix the twin within a short time interval. But before that, we will show you some basics like – how Facebook displays WordPress images, what is Facebook debugger and how to use it, etc.
Let’s get cracked…
How Facebook display WordPress images and links?
When you share a post on Facebook, so it chooses a specific set of information that defines, what to display. For doing the same the Facebook uses elements called ‘open graph meta tags’ that are also known as ‘og tags’.
Facebook caches your images on their Server and CDN while you share the content on your WordPress site. You can think in the same manner as caching works on your site. Sometimes you need to clear the cache to get something working again.
The same things apply for Facebook – means to say, when sometimes you update something on your site and share it on Facebook, so it may still display an old image. This is because instead of fetching the new information it serves up the already cached information.
Likewise, the same things apply for information about your content and link. They fetch what they call Open Graph Meta Tags.
In accordance with Facebook, the Open Graph protocol allows web pages to become a rich object in a social graph. Generally, these are the tags developed by Facebook in 2010 that inform to facebook what information you shared.
For example, visit our guide How to install WordPress. Here you will see the mentioned below data regarding open graph. However, open graph uses the various attributes like og:image, og:locale, etc. This is the code that facebook uses to display the title, description, and featured image;
|<meta property=”og:locale” content=”en_US” />
<meta property=”og:type” content=”article” />
<meta property=”og:title” content=”A complete guide on WordPress Rich Snippet” />
<meta property=”og:description” content=”Basically, a normal Snippet is a result which Google shows to the users in the Search Engine Result Pages. For example, if you are searching for a good recipe for homemade chocolate and you googled it. Google shows you the results list in SERP (Search Engine Result Pages) with normal and rich snippets.” />
<meta property=”og:url” content=”https://www.wpglobalsupport.com/use-rich-snippets-in-wordpress/” /><meta property=”og:site_name” content=”wpglobalsupport” />
<meta property=”article:publisher” content=”https://www.facebook.com/wpglobalsupport/” />
<meta property=”article:section” content=”Social Media Marketing” />
<meta property=”article:published_time” content=”2018-04-23T11:00:38+03:00″ />
<meta property=”article:modified_time” content=”2018-04-24T11:30:51+03:00″ /><meta property=”og:updated_time” content=”2018-04-24T11:30:51+03:00″ />
<meta property=”og:image” content=”https://s15158.pcdn.co/wp-content/uploads/2018/04/Featured-Image-rich-snippets.png” /><meta property=”og:image:secure_url” content=”https://s15158.pcdn.co/wp-content/uploads/2018/04/Featured-Image-rich-snippets.png” />
<meta property=”og:image:width” content=”695″ /><meta property=”og:image:height” content=”308″ />
Causes of the problem
#1: Well, there are several reasons for this issue. Hence, it is a bit difficult to know which one creating a specific issue. But, most of the time this error occur due to the inappropriate use of og tags (Open Graph tags set as og: images). Due to this og:image tag error the featured image is smaller than the others.
While you sharing an article on Facebook, so by using og tags it tries to determine which thumbnail is best to use. And sometimes pick a larger image instead of the one you have set. However, sometimes the og tags are missing due to cache plugin or hosting such as CDN systems not choose the right image.
#2: It can also be due to using an image size that Facebook doesn’t like. Further, facebook accept at least 200 x 200 px images and prefers at least 600 x 315 px larger images. However, 1200 x 630 px resolution image is ideal for large displays.
#3. You know very clearly speed up WordPress plays a very important role to rank a site. Means to say, if your pages loading speed is good, then users can focus towards your content, otherwise, you can lose your users potential.
Fast forward, a WordPress website is only a combination of code and files that run together to create a good interface. But when any user visits your site, so these files and codes need much of processing power from your server – that’s it too much slow. And when you add content to your site it only gets worse.
Reason of the problem is – your server cache a web page. Now the question is how to cache a web page? let’s see – Generally, it creates a static HTML copy of this and sends to the browsers of any new visitors.
In reality, you have to clear the cache of your web page when it has changed, many times some small issues occur such as meta title or featured image. Because of this, Facebook unable to upload the correct element.
The best solution to the same problem is using a WordPress caching plugin – we have mentioned below some of the best plugins to clear the cache.
#4. Facebook Caching: Similar to the WordPress site, Facebook also has its own caching system.
When you shared a post to Facebook and you want to tweak your featured image. Therefore, you delete the old one to update and save the new image. And when you uploaded the new one so sometimes the Facebook shows you cache.
#5. WordPress has a dedicated widget to set a featured image. But sometimes users forget to set it. In this situation, Facebook behaves the same as the undersized image. It picks the first one properly sized image of your post and shows on the page.
Fast forward, there are two ways to solve the problem;
- Manually uploading the images. But there is a problem with this solution – When we click on the image, the image opens in a lightbox instead of moving the reader to the article. And stored in your uploaded images and timeline. This is not a good solution because a user that shares your article will see and share the wrong image.
- Using Facebook Sharing Debugger. It is the best solution to fix the problem. However, here we are focusing only on images but the facebook debugger will also check URL’s, titles, descriptions and much more.
What is Facebook Debugger?
Facebook debug tool is an open source software also known as Facebook Open Graph Debugger. This software helps you to analyze your entire pages, just to check if there is any error in the way while handling og tags. Further, while sharing a link on Facebook, you can use it to analyze how your link will appear. Illustrated below image shows an example;
In addition, a facebook link debugger is a tool that comes with supports and tools on the Facebook developers site with many useful things. More so it allows the users to inspect what information facebook receive from each and every page on your entire website.
How to use the Facebook debugger?
To use the facebook og debugger, you don’t need to create any special account. Just need a facebook account to use it.
You just have to copy the URL of the page that you want to analyze and paste it on the Facebook URL Debugger.
Thereafter, click on the “Debug” button. As you have pressed the debug button this facebook object debugger will show you a full analysis of that particular page.
Note: Facebook has been selected to hold a list with og (open graph) elements at the share message. Following are the elements that are included in og list:
- og:type article
In the return analysis, you will see a warning as a notification if the service finds an og tag missing;
Just below that, you will find information that Facebook accessed or ‘scraped’ last time the link that you entered. In addition, the canonical URL page’s information and any redirects that Facebook encountered is also included in this section.
[Image Source File: www.hostinger.com]
Consequently, the very important thing is that – when you share a URL on the platform, you’ll also see the entire preview of how Facebook will interpret the URL. If any error occurs along with the featured image, see the illustrated below image as an example;
Further, if you want to be more attentive, you should always check all the content via facebook link debugger before sharing on facebook. However, this is an inefficient approach. Instead, in order to avoid error in the first place, you should look to optimize the og tag of your content.
Continuously, by scrolling down your reports you can see a full breakdown of all the og tags on the page that you have selected to analyze.
Ideally, what you see here should be the same title, meta description, URL, and images you set in WordPress. If those are not the values that appear here, you might want to use a dedicated tool to make sure your tags are set up correctly. Let’s talk about how to do that.
Note that the title, meta descriptions, images, and URLs that you have set up in WordPress should be the same that you are seeing here. If these are not the same, you may use a dedicated tool to ensures that your tags are set properly. But the question is how to do that, let’s see;
Fixing incorrect Open Graph Tags in Facebook
Well, if you are not using og tag properly, then chances are – the facebook url linter will not display your entire content. That’s not your WordPress pages fault.
The best way to avoid the issue is using a plugin that will help you to set up og tags manually for each & every page.
However, there are various plugins that authorize you to select what elements facebook should display, which is the same as enabling you to configure your og tags.
However, Open Graph for Facebook, Twitter Card Tags, and Google+ are the easiest one among them to use (here, we recommend Facebook Graph Debugger tool from now on.) – Now what?
This is the time to use the plugin, open your WordPress dashboard and go to the Plugins tab. Thereafter, click the Add New button and use the search bar on the next page to see the plugin by using its full name.
Open Graph for Facebook will appear among the search result, now press the Install Now button.
Consequently, here set up manually your og image and description tags. As far as, the plugin will automatically take care of the title and URL of your content.
Press the upload/choose button to set an image. Next, the plugin suggests you use the image with 1200 x 630 px resolution, that is excellent for facebook.
Remember that, you will also need to select a featured graphic by using the featured image section even if you are manually setting up an image. You can use the same image for both, but still, you need to deal with each task separately.
Once you set up the image, thereafter, set up your content meta description within 160 characters for Facebook, Google also 160 characters.
Notwithstanding that little difference, we suggest you use the same description in both places to make it a bit easier.
Once you all this done! update or publish your WordPress page or post. Thereafter, share your content on Facebook. Now you will no longer have any problems with your featured image. Still, if you are facing any problem then take a look at the next section – here we will discuss how to tackle most likely culprit.
Fix WordPress Images via Facebook Debugger
With any tools or software, if you don’t follow the instruction laid out for good implementation, you have multiple issues or quirks in your works.
Well, we have discussed above – the facebook debugger plugin that will help you to troubleshoot the issues with your Open Graph Meta tags. You can find Facebook Debugger on Facebook for developers site. However, if you wish sharing number of content on Facebook, this is the best link to bookmark for future reference.
Further, to crawl a post, you have to do is to enter the URL and click on the ‘debug’ button. Now we are going to illustrate you through an example:
If you update the image on any (x,y,z) article. When we enter the URL into the Facebook debugger, it will first pull the cached information. In this case, it is pulling the old image before you updated the content. You can also see that the og: image is the old file name.
Thus, we will elaborate throughout the two steps to fix the problem! Let’s get cracked…
#1 Step: Clear the WordPress Cache
To get the latest information, you need to ensure the facebook grabs. Before that – clear the entire cache from your site: developed on either of the CMS (Content Management System.)
Caching plugins are fabulously popular! Because they allow the users to increase the performance of their site by storing some content in the visitor’s browsers. But there is a problem – instead of the most up-to-date version, sometimes Facebook can try to drag the og tags from the cached content.
For example, if the og tags are not included in the cached copy of one of your pages, Facebook may have the problem to show the entire information properly. And it may also be that, you may have changed the particular image of the page.
Continuously, in any case, the best way to fix this issue is to clean your WordPress cache. However, there are several ways to do the same that’s depends on which plugin you are using.
Here, we will elaborate you by using the 3 different plugins:
1. W3 Total Cache
Here we will fix this problem via W3 Total Cache. To do this, you just need to visit your dashboard and navigate to the performance>>dashboard tab. Here, you will see “empty all caches” button on the top.
Thereafter, you have to click on that button and wait. After a few seconds reload your page, now your cached has cleared.
2. WP Super Cache
However, fixing the problem by using the WP Super Cache plugin is also quite simple. To do this, you need to visit Settings>>WP Super Cache tab in your WordPress dashboard. Here you will see a “Delete Cache” button. Now click on that button and clear your cache.
3.WP Fastest Cache
To fix the issue via WP Fastest Cache plugin, you have to go to WP Fastest cache tab and look the segment that says Delete Cache on the next screen. Now, you will see a bright blue “Delete Cache” button. You have to click on the button.
Further, in case you are using a third-party plugin you need to see their documentation to ensure how to clear your cache for a URL.
# 2 Step: Force Facebook to Reload Your Open Graph Tags
Now, your cache has cleared and you have set og tags for your content. Hence facebook should be able to organize your link properly.
To do this, navigate to the Facebook Debugger tool and enter the URL that you want to post on the platform.
On the next page, find out the “Scrape Again” button, next to the Time Scrape field:
Now, you need to click on the “Scrape Again” button. Facebook will see your article again. If all things working accurately, then, your article preview will be pixel-perfect.
Bending towards the next point, you need to set the images and meta description properly that you want to show on Facebook for each & every article.
Last but not least! If you go through more issues, just clear your cache.
Hope you like the information. For any kind of issue regarding WordPress contact our WordPress support desk on +1-844-275-0975 (Toll Free).
Read More Blogs:
- How to Create a Custom Facebook Feed in WordPress: Ultimate Guide
- 3 Methods to add Facebook Open Graph Meta Data in WordPress Themes