×
Christian S.

Fixing Facebook Open Graph 404 Post Previews

Written by Khalid Abuhakmeh
3
This post is days old.

TL;DR use the Facebook Open Graph Debugger to refresh the scraping cache.

In 2016, a successful site must have a strong social media strategy. The best sites to promote our professional content include Facebook, Twitter, LinkedIn, and Google+. The best kind of promotion comes from our readers, traditionally known as “word of mouth”. Providing share buttons enables visitors to easily share with their social networks.

Here is an example of share buttons on a recent site.

share buttons

You will also find them on this post, so please use them. We always appreciate sharing.

When we tested the share buttons, we saw our 404 page as the preview. Note the title of “Something went wrong?” in the preview. No matter what we tried to do, we could not get Facebook to refresh the preview.

share buttons

It felt like Facebook was caching our Open Graph metadata and was not refreshing. That is when we realized there was an Open Graph debugger.

Facebook Open Graph Debugger

Note that Time Scraped, in the screenshot, was 18 hours ago. By pressing the button Scrape Again, you ask Facebook to get the latest version of your page. Now let’s see what the preview looks like.

Facebook Preview Fixed

Fixed!

Why Does This Happen?

In our case, there are two reasons this behavior happened.

  1. Somehow the shared url was being previewed before it went live. This makes sense with Jekyll and our staging environments.
  2. Some of our posts were using the future feature in Jekyll. Someone may have shared the post via Facebook before the post went live.

The outcome is rooted in Facebook’s aggressive caching strategy. Remember, they are Facebook, servicing billions of individuals.

Conclusion

SEO and promotion are important. Leveraging existing social networks is critical for promotion, but expect to make mistakes. By utilizing powerful debugging tools, we get a more accurate sharing experience and more readers.

If you know of any other great SEO debugging tools, we’d love to hear about them in the comments.

Khalid Abuhakmeh
Khalid Abuhakmeh
Director of Software Development
Facebook
Social Media
SEO
Suggested reading

UX/UI Solutions: Make Content Less Overwhelming.

SEO
How do you not overwhelm the user with a wall of content? When thinking abou...
Read now

IIS Rewrite Maps and Redirecting On Url Paths

SEO
URLs are the bridges that connect our little island of a website to the bigge...
Read now

Leveraging Metadata with Google Tag Manager

SEO
Our APIs expose data to Ritter’s quote engines based on product, marketplace,...
Read now

Comments

Stay fresh! The brighter green, the fresher the article!