If you are experiencing a problem when you want to share a blog post, a product or any page of your website on Facebook and the shared Facebook post has a weird thumbnail or preview text then it is very likely that your Facebook Open graph tags (OG tags) are not set up correctly.
In this guide, we are going to explain everything you have to know about Facebook Open Graph tags, so we are going to cover:
- What are FB Open Graph Tags?
- The types of Open Graph Meta Tags you can use
- Examples of Facebook OG tags implementation
- How to check, debug and troubleshoot your FB Open Graph Tags (three methods)
- How to add Open Graph meta tags to your website?
What are Facebook Open Graph Tags?
Facebook Open Graph Tags (also known as Facebook OG tags) are snippets of code that control how URLs are displayed when they are shared on Facebook.
These Open Graph meta tags can be found in the head section of your website and you can find them easily as all OG meta tags start with ‘og:’ text.
Open Graph protocol was developed by Facebook and is used by other social media companies as well. You can read more about Facebook Open Graph protocol here or watch this quick video tutorial for more explanation:
Why setting up Facebook Open Graph is important?
It is highly recommended to add Facebook OG meta tags to your website. It helps your website and your Facebook page visibility in the following ways:
- When you as the Facebook page admin or regular FB users share your blog posts or product pages on Facebook, the layout of the Facebook post will be more impressive so it is more likely that people stop scrolling in their FB newsfeed
- People ignore this usually, but Facebook has its own search engine that is used hundreds of millions of times of day. When you are using Facebook OG meta tags, Facebook can understand it more easily what the specific content is all about
Properties of Facebook Open Graph Meta Tags
Currently, there are four Open Graph Meta properties that are required for every page:
- og:title: The title of the object as it should appear in the graph
- og:type: The type of the object. To see the full list of available types, check out this link
- og:image: An url of the image that will appear with your graph
- og:url – The canonical URL of your object that will be used as its permanent ID in the graph.
Here is one of our blog post that has been shared on Facebook:
There are other optional metadata properties that you can also add to your objects, such as og:audio, og:description, og:locale, og:site_name, etc. You can learn more about optional open graph properties here.
Facebook Open Graph Meta Tags examples
So let’s see some examples of how these open graph properties appear on the head section of the website:
As you can see it basically has two parts, first the name of the meta property is added then the value is inserted within the content part. You can easily check this as well by opening the source code of your website by pressing ctrl+U in a PC then search for ‘OG’.
Here are OpenGraph meta tags that you would see for an e-commerce product page:
Sharing posts and pages on Facebook without Open Graph tags
If you share a Facebook post without the correct open graph meta tags, your shared page or post won’t have a nice thumbnail and preview text. In this case, the Facebook Crawler will crawl the HTML of your page and try to find information that it can use to display the shared object on Facebook.
However, in most cases, the end result will be significantly worse than what you would have with the open graph tags. Here is one of our Facebook post that is missing the og:image tag:
As you can see, Facebook has found an image scrawling the blog post and used it as the thumbnail image of the shared Facebook post, but it is far from an optimized image.
How to debug Facebook Open Graph tags?
To see and check if a specific website or webpage is using Open Graph meta tags and they are using it the right ways, you have the following options:
- You can use the Facebook Sharing Debugger
- Check it real-time on your website using Facebook Pixel Helper
- Paste the URL of the specific page to the Microdata debugger
Facebook Sharing Debugger to debug Facebook OG Meta tags
Facebook has developed its own tool so everyone can check and troubleshoot its open graph implementation for free by just simply plugging the URL of the website.
The Facebook Sharing Debugger can be reached by clicking on this link.
All you have to do is paste the URL and click on the Debug button.
You will get a result something like this:
In our case, the required tags are not missing, but let’s check out the results of BBC Home page instead.
It is a site with hundreds of millions of sessions per month and still their OpenGraph meta tags are not correctly configured.
For a website like BBC it is not a really big issue as they are well known and trusted anyway. But imagine a small e-commerce site that has a product that goes viral. People are sharing the product page on Facebook organically, but as the og:image tag is not set up correctly, all those impressions on Facebook are wasted as users can’t see a proper thumbnail of the product page.
Facebook Pixel Helper to check OpenGraph Meta tags
The second option you have to see what OG tags your page sends in to Facebook is to use the Facebook Pixel Helper.
Although not in a beautifully structured format as with the Sharing Debugger, you can see what data you are sending in with the Open Graph meta tags. All you have to do to see the results is:
- Install the Pixel Helper Chrome Extension if you haven’t done so
- Go to the page you want to audit
- Click on the Facebook Pixel Helper Icon
- Click on the subtitle ‘Microdata Automatically created’
- Click on ‘OpenGraph’. Here you can see all the OG meta properties and values
Microdata Debugger to debug OpenGraph Meta tags
The third option you have is similar to the first one, it is to use the Facebook internal tool that is called Microdata Debugger. The Microdata debugger is primarily designed to debug microdata communication systems that can help you to set up your Facebook Product Catalog automatically without building a product feed.
However, as OpenGraph is one of the systems that Facebook recognizes, you can also use it to show if your OG meta tags are correctly set up. It will also show you at the same time if your schema.org and JSON-LD microdata tags are correctly configured.
Here is the result you will get when you run a test for a regular blog post:
If you want to learn more about Microdata tags, definitely check out this article where we talk more about Schema.org and JSON-LD as well and how you can set up these Microdata tags.
Adding Open Graph Meta Tags to your website
There are multiple ways how you can add the proper open graph tags to your website. As we want to show you how you can do each of the methods step by step, we have written a separate article that only focuses on implementing open graph meta tags.
If you are interested in how to add open graph meta tags to your page, definitely check it out this article by clicking here.
