How To Fix WordPress Images Via Facebook Debugger
- Last Updated: Sep 15th, 2018
- Posted by: Editor
- Category: WordPress Knowledge
Suffixing a long research! Every blogger or social media marketer noticed that – sharing a link on 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. Quite you are not very aware of the issue, hence, to fix WordPress images via Facebook Debugger, just go through our article on the same.
Keep reading, we will illustrate to you a super easy guide which will help to fix the twin within a short time interval.
Let’s get cracked…
What is Facebook Debugger?
It is also known as Facebook Open Graph Debugger and is an open source software. However, the very software succors you in analyzing your entire facebook pages. Just to see if there is any error while executing the pages.
Further, the errors faced by any of the users is itself handled by the og (open graph) tags, if any occurs!
With the help of this, you can see, how your links will appear on Facebook that you posted, as in the below example:
Although to use facebook debugger, you don’t need to create a special account. Just have a facebook account to use it.
In addition, the facebook debugger allows the users to inspect what information facebook receive from each and every page on your entire website.
To analyze the site page, all you have to do is visit the Facebook URL Debugger and paste the URL of the page that you want to analyze.
Thereafter, click on the “Debug” button. Now you will see the information that Facebook received from your site’s page. 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
Now, the very first thing, in case the service finds an og tag missing then you will see a notification:
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 is also included in this section. And here’s to encounter any Facebook redirects:
Consequently, the very important thing is that – after you post the 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.
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. Rather, in order to avoid error at the first place, you should look to optimize the og tag of your content.
Contiguous, to see the entire breakdown of all og tags on the page that you pick to analyze, then scroll down your reports.
Preferably, what you see here is the same title, meta descriptions, URLs, and images that you have set up in WordPress. If they are not the same that appear here, then you’ll want to use a dedicated tool to ensure that your tags are set correctly.
Let’s talk about how to do that.
Fix Incorrect Open Graph Tags in Facebook
Well, if you are not using og tag properly, then chances are – the facebook og debugger will not display your entire content. That’s not your WordPress pages fault.
To avoid this issue, you need to use a plugin that will help you to set up og tags manually for each & every page.
There are multiple plugins that authorize you to select which 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 will just call it Open Graph for Facebook from now on.) – Now what?
This is the time to use the plugin, visit your WordPress Dashboard and navigate to the plugins tab. All this done! then, click the Add New button. Thereafter, 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 you need to click on the install now button.
After installing the plugin, a blue Activate button will appear you next to its name. You must click on it before using the plugin. Once the plugin is activated, a new widget will appear you just below the WordPress editor while you open up any page or post.
Consequently, this part empowers you to set up manually your image and description tags. As far as, the plugin will automatically take care of the title and URL of your content.
Subsequently, press the Upload/choose button to set an image. Further, the plugin suggests you use the image with 1200 x 630 px resolution, that is excellent for facebook.
Remember that, if you manually set an image via this widget, you will also have to pick a featured graphic by using the featured image segment. You can use the same image for both, but still, you need to deal with each task separately.
Take care of your Facebook image once, go ahead and set up your content meta description within 300 characters for Facebook, that is a bit less than the limit of Google (320 characters).
Note: Notwithstanding that little difference, we suggest you use the same description in both places.
Once you all this done! Don’t forget to update or publish your WordPress page or post. Thereafter, share your content on Facebook. Consequently, you will no longer have any problems with your featured image.
How Facebook Fetches Information
Facebook caches your images on their Server and CDN while you share the content on WordPress site. However, it works on your site in the same caching manner. sometimes you have to clean the cache again to get something working.
Even though, sometime when you update something on your site, then, the same thing goes to facebook. Subsequently, when you share it, the Facebook may still display the old image. The reason for this problem – instead of fetching the new information it serves up the already cached information.
Continuously, they cache your content and link also. They fetch what’s called Open Graph Meta Tags.
In accordance with Facebook, the Open Graph protocol allows web pages to become the rich object in a social graph. Generally, these are the tags that inform to facebook what information you shared.
In addition, the most popular plugin such as Yoast SEO and Social Warfare use automatically “Open Graph Meta Tags”. Hence, if you are using any one plugin among them, we recommend you use these tag, we have shown below:
For example, let’s see our Rich Snippet guide. If you see the source code, you will see the “og” tags like “og:locale or “og:image”. Let’s see how facebook drag that information.
|<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″ />
Prime Goal To Fix WordPress Images
#1. Well, there are several reasons for this issue. Hence, it is not easy to know which reason create a specific issue. But, the most likely reason is the inappropriate use of og tags (Open Graph tags set as og: images).
While you post an article, by using og tags facebook tries to guess which thumbnail is best to use. And sometimes picking a larger image 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. Another option is to manually upload 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.
#4. Last but not least, Facebook Sharing Debugger 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.
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 helps 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 about 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 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 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 this beginner guide for rich snippet & structure is helpful for you. In case of any related problem, contact to our WordPress tech Support team now to get instant help. Dial +1 888 614 0555 (Toll-Free).