The debugger lets you preview how your content will look when it’s shared with Facebook and debug any issues with your Open Graph tags.
Facebook is one of the most used content distribution channels to grow your online audience. Sharing links on Facebook increases engagement rates and drives traffic to your website. 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? We have good news for you! You can quickly fix content displaying issues with the help of Facebook Debugger.
This ebook explains everything you need to know about Facebook Debugger and how you can guide Facebook to scrape your content in the right way. Together, we will dig deeper and uncover why Facebook makes mistakes when pulling information from your content. Let’s get started!
What can go wrong, and why?
In 2010 Facebook developed Open Graphs to help content creators control how the platform displays visuals and text in posts with links.
Each time you share your content link on Facebook, it tries to pull a specific set of information hidden within your website. Then Facebook’s algorithm scrapes your open graph meta tags or so-called og tags and displays in the final result what it has pulled.
Visuals are an essential part of any content distribution strategy. This is how your audience is going to judge the quality of your content. “Don’t judge a book by its cover” philosophy doesn’t work on the 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.
- og: image
- og: title
- og: description
Also, don’t underestimate the power of the wrong image displayed. A false image can drastically affect your traffic volume and engagement rates. It is crucial 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 the HTML of your website. This is how it should look like. Double click on a page > View Page Source.
You don’t need to have a Phd. in computer science to recognize what meta property and og tags are responsible for. 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:
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 right before your Facebook audience sees it.
Facebook Debugger is easy to use. (Did we 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”.
If certain og tags are missing, Debugger will show them as warnings. After warnings, you’ll see all information according to the previous time; Facebook “scraped” your website or content page.
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 ebook, we talked about opening an 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 the preview and warning sections, you will see a complete description of all og tags.
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.
How to fix wrong og tags?
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 problem for you automatically.
If an image is displayed wrong, then take a look at og: image. The same goes for 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 the HTML editor and fix the og tags manually. In case you work in a company and your role is a social media marketer, you can bring warnings to developers’ teams and ask for their help. They will know what to fix. Send them a link to this article, too.
Clear cache > scrape again
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 told them that the issue could be related to cache.)
The problem with displayed information happens when Facebook pulls old og tags from your cached content instead of scraping your website again and pulling the most up-to-date versions.
You can do it on WordPress.
For example, if you use Super cache, go to Settings > WP Super Cache page > Click on the ‘Delete Cache’ button. And this is it!
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.
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 it correctly. Or you might have changed a page’s featured image, but Facebook is still insisting on showing an outdated version.
(The 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 the 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.
Troubleshooting Facebook Debugger possible issues
Here are possible issues you might face while using Facebook Debugger (Retrieved from Facebook for Developers FAQ):
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.
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.
Take a look at http://ogp.me/#structured for an example of how this can be done.
💡 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.
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 an 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!