How to Use Facebook Debugger

How to Use Facebook Debugger

Facebook is one of the most used content distribution channels to grow your online audience. Sharing links on Facebook increases engagement rates and overall discoverability of your content. However, sometimes Facebook doesn’t display your content in the right way.

You spend your valuable time preparing visuals for your blog or website. However, isn’t it upsetting to see a wrong image displayed? I have good news for you! You can easily fix the issue with the help of Facebook Debugger.

Facebook Debugger - Sociality.io Post

Today we are going to talk about Facebook Debugger and how it can help you to solve displaying issues. Also, together we will dig deeper and uncover the reasons why Facebook is making mistakes when pulling information from your content. Let’s get started!

Bonus: Check out our “Best Tools for Content Marketing” article to boost your engagement.

What Can Go Wrong and Why?

In 2010 Facebook developed Open Graphs to help content creators to controls how the platform display visuals and text in posts with links.

Each time you share your content link on Facebook, the system tries to pull a specific set of information hidden within your website. Then Facebook’s algorithm scrapes your open graphs meta tags or so-called og tags and displayed in the final result what it has pulled.

Visuals are an important part of any content distribution strategies. This is how your audience is going to judge the quality of your content. “Don’t judge a book by it’s cover” philosophy doesn’t work in web.

Basically, the problem is simple. If Facebook failed to display the right image or text, it means that the Open Graph failed to retrieve needed information from your content. And this is why you see a weirdly looking post.

Open Graph Details

Also, don’t underestimate the power of the wrong image displayed. A wrong image can drastically affect your traffic volume and engagement rates. It is important to fix and check content beforehand to make sure that everything is perfect.

Luckily, if you don’t see the right image, don’t panic and open HTML of your website. This is how it should look like.

Open Graph HTML Code

You don’t need to have a Ph.D. in computer science to recognize what meta property and og tags are responsible for what. All you need to do is identify your headline, URL, meta description and add an image. And see if they match what you want it to be. 

Using og tags you can control every aspect of how your content is displayed on Facebook. However, you probably won’t be able to recognize the mistake manually. This is why we need the Debugger tool to do all the hard work for us.

For example:

<link rel="canonical" href="https://sociality.io/blog/what-is-social-media-competitor-analysis/">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="What is Social Media Competitor Analysis? - Sociality.io Blog">
<meta property="og:description" content="Whether you are a business owner or a marketer, social media competitor analysis is one of the first tasks you should be doing.">
<meta property="og:url" content="https://sociality.io/blog/what-is-social-media-competitor-analysis/">
<meta property="og:site_name" content="Sociality.io Blog">
<meta property="article:tag" content="Social Media Analytics">
<meta property="article:tag" content="Social Media Competitor">
<meta property="article:tag" content="Social Media Management">
<meta property="article:tag" content="Social Media Reporting">
<meta property="article:tag" content="Social Media Template">
<meta property="article:section" content="Social Media Management">
<meta property="article:published_time" content="2019-05-01T11:05:45+00:00">
<meta property="article:modified_time" content="2019-06-12T21:21:56+00:00">
<meta property="og:updated_time" content="2019-06-12T21:21:56+00:00">
<meta property="og:image" content="https://sociality.io/blog/wp-content/uploads/2019/05/What-is-Social-Media-Competitor-Analysis.png">
<meta property="og:image:secure_url" content="https://sociality.io/blog/wp-content/uploads/2019/05/What-is-Social-Media-Competitor-Analysis.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Introducing Facebook Debugger

Facebook Open Graph Debugger helps you to analyze your pages and recognize every possible mistake and how Facebook is processing og tags.

You could also use the Facebook Debugger for a preview check to make sure that everything is good before your Facebook audience sees it.
Facebook Debugger is easy to use the tool. (Did I also mention that it is free?) All you need to do is to go to the Debugger website and type in the content’s link you want to analyze and press “Debug”.

Facebook Debugger - Debug URL

If certain og tags are missing Debugger will show them as warnings.

Facebook Debugger - Warnings That Should Be Fixed

After warnings, you’ll see all information according to previous time Facebook “scraped” your website or content page.

Facebook Debugger Scrapes Details

And most importantly you’ll see a preview of your content aka how it is going to be displayed on Facebook. The Debugger shows you how Facebook interprets your URL address. If there are any mistakes you will notice it before the general public. This way you can avoid mistakes and improve engagement rates. 

At the beginning of this blog, we talked about opening HTML editor and fixing issues manually by analyzing all og tags. This is one way. However, this method is very inefficient. Instead, use Facebook Debugger to optimize this process. 

So, we are scrolling down your Facebook Debugger report. After preview and warnings sections you will see a complete description of all og tags.

Facebook Debugger Og Tags List

In the ideal case scenario what you see on the page should correlate with a headline, meta description, URL, and the image you wanted. In case they don’t match you can use special techniques to fix the problem.

Now we are moving on to fixing part of this article. Notice that Facebook Debugger only highlights where the issue is located. It doesn’t fix the issue for you automatically.

If an image is displayed wrong, then take a look at og: image. The same goes to other elements of your content. The title or description, for example, can be updated in open meta tags.

After Debugger identifies all the warnings, you still have to go back to HTML editor and fix the og tags manually. In case, you work in a company and your role is social media marketer you can bring the list of warnings to developers team and ask for their help. They will know what to fix. Send them a link to this article, too. 🙂 

How to Fix Wrong Og Tags

If you already configured your og tags following the process above, it’s possible that the problems are not due to the structure of your site. But Facebook still shows the image you haven’t selected or doesn’t display it at all – maybe the reason is in the caching plugin. Let’s see how to handle this.

Step 1: Clear cache for content URL

Facebook sometimes doesn’t pull the latest information. So step 1 is to clear the cache on your website itself. Sometimes Facebook simply pulls cached information instead of scraping it again, which basically creates two layers of caching.

(If you can’t do it, then talk to a developer in your company who can help you with this issue. Simply show him a screenshot from “Based on the raw tags, we constructed the following Open Graph properties” section and tell them that the issue can be related to cache.) 

So let me repeat this again. The problem with displayed information happens when Facebook pulls old og tags from your cached content instead of scraping your website again and pull most up-to-date versions.

You can do it on WordPress with the help of WordPress caching plugins such as Super cache or Total cache
For example, if you use Super cache go to Settings > WP Super Cache page > Click on ‘Delete Cache’ button. And this is it. 🙂

WP Super Cache - Delete Cache

Step 2: Scrape again

After the cache is cleared for the content page, we need to scrape it again in the Facebook Debugger tool. It can be done similarly as we did before. Enter the URL and click the “Scrape again” button.

Facebook Debugger Scrape Again

Notice that the warnings aren’t always 100% correct and can point to an issue that simply doesn’t exist. If you are sure that the displayed warning is wrong, simply press the “Scrape again” button for the second time. (I know it is a little bit weird, but in my personal experience, this is how Debugger works. Nothing is perfect.) Also, some warnings are more important than the other ones. For example, the warning from our example doesn’t affect the way the Sociality.io post is displayed. However, it limits the amount of Facebook Insights data we could potentially collect. 

For example, if a cached copy of one of your pages doesn’t include og tags, Facebook might have problems displaying the information correctly. Or you might have changed a page’s featured image, but Facebook is still insisting on showing an outdated version.

(Same situation, if you don’t know how to update meta tags, talk to your developer team and tell them that og tags need their assistance.) 
If you use WordPress download Yoast plugin. Go to your post > Click on “Edit snippet” > Edit the information listed under “SEO Title”, “Slug” and “Meta description” > Close Snipped editor.

Yoast SEO Edit Snippet
Yoast SEO Edit Title, Slug and Meta Description
Images from https://wpshout.com/quick-guides/how-to-change-meta-description-wordpress-meta-title-yoast/

Facebook Debugger Possible Issues

Here are possible issues you might face while using Facebook Debugger (Retrieved from Facebook for Developers FAQ):

URL debugger complains about image not being big enough

To share an URL, the associated image needs to be at least 200×200 px. If that is not the case you will get an error similar to this one “Provided og:image is not big enough. Please use an image that’s at least 200×200 px.”

For picking up an image for an URL we first look at your ‘og:image’ tag, see if it exists and if it is above the 200×200 px requirement. If the ‘og:image’ tag does not exist, we choose the first image we encounter on the webpage.

If you get the error but you think your site image is bigger than 200×200 px., you should verify that you have correctly set the ‘og:image’ tag, as the most probable cause, is that we are retrieving an incorrect image from your site.

I want my og:url or og:image tags to use relative URLs, but the debugger complains about this.

All URLs must be absolute as they represent the canonical location of a resource (page/image), so that we can attribute shares and likes to the correct URL and cache images properly.

I am trying to view the scraped contents for my site via the debugger, but an incorrect image is displayed in the preview.

If your web page is using our OpenGraph meta tags and is including an og:image entry, we will fetch that image and display it in the preview. Additionally, if your site provides both og:image, og:image:width and og:image:height, that image will be used even for the first share created.
Failing to provide these means that you will need to wait for our crawlers to fetch and analyze the images first. See http://ogp.me/#structured for an example of how this can be done.

Open Graph Structered Properties

Updated Open Graph image, or other resource associated with an OG meta tag, is not showing up in new posts.

The content most likely needs to be re-scraped, which will happen automatically in time, or it can be manually triggered via the Debug Tool.

When sharing my Open Graph object to Facebook can I control if it shows as a large or a small post?

You cannot control how a post is going to be displayed in News Feed or Timeline when sharing your open graph story beyond supplying the OG tags for your page. Facebook optimizes posts automatically to ensure maximum engagement for your content.

Why are Instagram posts and other Open graph posts not returned via the me/feed endpoint?

Photos uploaded via Instagram are published as Open Graph actions and require the appropriate Open Graph permissions to be read from the Graph API.

In the case of Instagram photos, the permission required is “user_actions:instapp” as “instapp” is the application namespace for Instagram.

Open Graph actions do not appear on the /feed connection but where a photo is uploaded as Open Graph action it can be accessed with the appropriate permissions via the user’s albums connection or /photos connection as applicable.

More information on Open Graph permissions can be found here.

To wrap it all up, 

Facebook Debugger is a handy tool that can be used to fix annoying issues related to wrong information being displayed. I hope now you have a clear idea of how to use Debugger tool and will easily fix related problems. 

Facebook is one of the most widely used content distribution channels. It is the right social media to grow engagement and increase the online audience. And lastly, never underestimate the power of great-looking visuals on your Facebook post!

Top