You can use facebook debugger Tool for improving social media presence of wordpress websites and blogs. Using facebook febugger Tool Tutorial will show you how to use this developers facebook tool for debugging and social sharing. Facebook Debugger tool is used by social media managers for professional work. WordPress bloggers use facebook debugger tool to get a preview of the content shared in Facebook.
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 Debugger Tool for Beginners
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.
How to Use Facebook Debugger Tool Tutorial
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 | Use Facebook Debugger Tool Tutorial for Beginners
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;
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
Go to developers.facebook.com.
The home page will look like this.
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.
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.
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.
Facebook Sharing Debugger How To use
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.
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.
How to Make Facebook Show CORRECT Post or Page Thumbnail
Go to your website in Chrome or any browser
Go to the post that have a picture but Facebook is not showing post of page thumbnail correctly.
Right click and select view page source.
Press CTRL+F to find a piece of code “meta property=“og:image” without quotes.
For WordPress blogs, add any SEO plugins that adds open graph meta tags to posts.
You can use Yoast WordPress SEO plugin and select Add open Graph Meta Data.
Go to WordPress, Add plugin, search for Yoast, Install Plugin and Activate.
Go to Plugin, Select Open Graph Meta data Under Facebook and save changes.
For blogspot, add following codes inside the template.
