Facebook Debugger helps identify issues that cause Facebook to display incorrect images or text from shared links. It analyzes Open Graph meta tags and previews how content will be displayed. Common problems include outdated cached information and invalid meta tags. The debugger provides warnings to identify problems, but the developer must manually update the website code and meta tags. Clearing caches and rescraping the URL in the debugger can sometimes resolve display issues.

2. INTRODUCTION
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.

3. 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!

4. 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.

5. 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.

6. 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.

7. 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:

8. INTRODUCING FACEBOOK DEBUGGER

9. 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”.
If certain og tags are missing Debugger will show them as warnings.

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

11. 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.

12. 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.

13. 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. !

14. 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.)

15. 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. !

16. 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.

17. 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.)

18. 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.

19. FACEBOOK DEBUGGER POSSIBLE ISSUES
Here are possible issues you might face while using Facebook Debugger:
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.

20. 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.

21. 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.

22. 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.

23. 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!

24. Sociality.io
All in one social media management platform.
Learn more at Sociality.io