November 30, 2017

How to Use Facebook Debugger Tool Tutorial


Facebook Debugger is an amazing tool for bloggers and social media managers. Facebook open graph debugger tool fetches Open Graph (OG) meta tags from websites, Wordpress blogs, social networks, blogger blogs and display them in Facebook. This post will show the best methods on How to Use Facebook Debugger to Fix Sharing on Facebook, How to Use Facebook Debugger Tool Tutorial, Fix WordPress Links on Facebook, how to use Facebook open graph debugger tool and Facebook Sharing Debugger tool and Use Facebook Sharing Debugger Tool Facebook for Developers. Many people call it wordpress facebook debugger and developers facebook tools debug sharing. I am calling it as Facebook Debugger and it is essential to make the facebook debugger work properly.

There are basically two debuggers: Open Graph Object Debugger and Facebook Sharing Debugger.

What is Facebook Open Graph Object Debugger

Developers in facebook.com has decided to make a tool that crawl the post, find out properties inside content by accessing the og meta tags and give a preview of the post. If you find any errors, clear them and fetch new scrap information to re-fetch the post. The tool is officially called Open Graph Object Debugger

What is Facebook Sharing Debugger

Facebook Sharing Debugger fetch posts from their website and blogs and show how they will be displayed in Facebook when other share it.. This debugger tool gave control to webmasters to redefine how their posts, images, quotes, links are shared and displayed in Facebook.

What is the Use of Facebook Open Graph Object Debugger

You can access Facebook Open Graph Object Debugger by visiting developer.facebook.com. To make it easy I will explain the working of the tool. It is essential that everyone knows about it. If you do not know how to use the facebook debugger tool, your post will not displayed properly in Facebook.

Who wants to have no images, blurred images in their posts? 
Who want no links in posts? 
Who wants no author name in posts?

No one right?

Especially when the Facebook space is extremely competitive in terms of posts and articles. Your post should always stand apart to get the users to see and click on your posts. For that you should know how to effectively use debugger tool and give appropriate open graph meta tags in the website theme and templates.

What Are Open Graph Meta Tags

Open Graph is a protocol used in Facebook and meta tags are just like keywords for bots to identify appropriate content from a post. Using a meta tag of og:image, webmasters can tell bots to identify a property of the content of article as image.

What Are Essential Meta Tags for posts for Facebook

Moz has given a list of essential meta tags to be added to WordPress themes, blogpost templates and other types of themes. Read them here Must-Have Social Meta Tags for Twitter, Google+, Facebook and More. They are;

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />

By adding meta tags properly to themes and templates, you can control how your posts looks like.

How to Use Facebook Sharing Debugger Tool Facebook for Developers


The home page will look like this.

How to Use Facebook Sharing Debugger Tool Facebook for Developers

Under Input URL, type or paste your post URL. A post URL will look like https://www.shipmethis.com/2017/11/facebook-debugger.html. Then click "Show existing scrape information". 

There is a chance that the debugger tool does not provide appropriate result and show you an error. Many times it gives no result or shows random parsing errors. I wished many times that it would be great if someone can sit with me and clear these errors. This majorly happens if the post newly published or has been deindexed in Facebook.

Error parsing input URL, no data was cached, or no data was scraped.

You may get the common "Error parsing input URL, no data was cached, or no data was scraped." error like the one in the image. In the case of Error parsing input URL, no data was cached, or no data was scraped, the issue is that Facebook has not yet fetched the post data. Just click on the 'Fetch New Scrape Information' and it will be fetched and processed.

If Facebook debugger tool still fetches previous data, use the below URL and paste in the browser. Change the URL of your article and press enter.

http://developers.facebook.com/tools/debug/og/object?q=http://www.example.com/?p=3568&fbrefresh=89127348912

This will consider your post as new and fetch new data. Kindly check if your post is having the original URL and not a 301 redirect.

Preview of Posts In Facebook

When clicked the "Fetch New Scrape Information", 'Facebook debugger' tool will fetch new tags and information and display a preview of the post of how it is going to appear in facebook. The debugger tool will shows you details of the post such as Time Scraped, Response Code, Fetched URL, Server IP, Graph API, redirects and raw meta tags.

Open Graph properties will appear like this.

og:url
og:type
og:title
og:locale:alternate
og:locale
og:image
og:description
og:site_name
og:updated_time
article:author
article:publisher
article:section
article:tag
og:image:alt

A Preview is what users will see when they share the URL.

If you are finding warning and errors, try to read about them in Google and fix it. Check the 11 Facebook Share Buttons And Plugins for Blogger Post to find out about how to Add Facebook og Metadata, how to verify the Meta Tags and how to Add Facebook JavaScript SDK.

How to Use Facebook Debugger to Fix Sharing on Facebook

Many time I shared an WordPress post in facebook and found it having no image or URL. This is majorly happens when the WordPress theme have not correctly added og meta tags. Sometimes the images are shown but they are just thumbnails of the image. Go to the debugger tool and enter URL of the post.

How to Use Facebook Debugger to Fix WordPress Links on Facebook


Facebook sharing debugger can help you to find how exactly your posts will appear in desktop and mobile display. It is suggested to use both Facebook debugger tools after you publish a post or launching a new web project.

How to Use Facebook Debugger to Fix WordPress Links on Facebook

You can use Simple Facebook open Graph plugin or Yoast SEO plugin in WordPress for resizing images while sharing a post.

You can add width and height og meta tags to resize images.

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

This will server images in approximate scale.

Kindly share the post for others who are searching on How to Use Facebook Debugger.


How to Use Facebook Debugger Tool Tutorial
4.7 (94.02%) 174 votes

Kindly spend 5 seconds to share this post



Search Here

Whats Hot

About Author