Digital Marketing

How to use the Open Graph share Facebook debugger

By Sean, on January 28, 2021, updated on June 2, 2021 - 7 min read

Facebook provides tools for developers to improve their websites and applications.

One of the most popular free tools they offered is the Open Graph Facebook share debugger, or Open Graph Tags debugger, og tags debugger or even Facebook Share Debugger, because it is used to analyze and view all the content and informations that will be shared on Facebook, Messenger, Instagram or other applications belonging to Facebook.

Before we see how to use this debugging tool, let’s start by specifying what we talk about.

What is the Open Graph?

Open Graph is a data-sharing protocol invented by Facebook to optimize the content of a page to share and publish it on social networks: Facebook, Instagram, Messenger, What’s app, …

open graph debugger logo

They are called metadata because they are not directly visible to the page visitor but are in the source code of the page, are also used by search engines to understand a page’s content better.

The syntax is: og for Open Graph and the name of the property, like image, type, video, …

og:image contains some information, herethe url, of the image of the link.

Sample of code:

<meta property="og:title" content="ceci est un titre"/>
<meta property="og:type" content="page"/>
<meta property="og:url" content="https://www.monsite.com/titre-page"/>
<meta property="og:image" content="https://www.monsite.com/page_thumbnail.jpg"/>
<meta property="og:description" content="Cette page parle de l'open graph debugger de Facebook"/>

Other social networks such as LinkedIn also use this protocol to share informations. Be careful however to check that the characteristics of the properties are not different. The expected size of the images is not the same between the social networks.

Open Graph protocol refers to tags that can be used to include meta elements in your pages used for your sharing links.

How to add OG tags?

In any website

Insert these meta tags in the header of each page. The information contained in the tags are the information that will be used when sharing on social networks.

Example of code in the header of a web page
Code in the header of a page

It is easier to use a template to automate meta tags from page information such as author, locale, …

To do this, simply set the og: codes into the template of your page header and dynamically fill in the different fields with the current page’s information.

In the case of WordPress

WordPress is the most widely used CMS in the world for creating websites. Several extensions (plugins) allow you to automatically add the tags to your web pages, very simply and without code.

With the well known SEO plugin Yoast:

wordpress-open-graph-yoast
wordpress yoast plugin

Beyond WordPress, most of the tools for building websites such as Joomal, Drupal, Webflow, Wix, … propose natively or via extensions to generate the code easily.

Using Facebook Open Graph Debugger

The Open Graph Debugger is a free tool offered by Facebook that allows you to view the data present on the page being analyzed in order to find out if this is correct.

It’s the easiest way to verify Open Graph informations.

To access it, go to this page: https://developers.facebook.com/tools/debug/ by being connected to your FB developer account.

Paste the URL of the page you want to check, then click on the “Debugger” button.

url to be debugged with the Facebook share starter tool

After clicking, you get a detailed analysis of all the markup on the analyzed page:

facebook-debug-analyse-open-graph
debug detailed analysis of the og tags of the page

Facebook Share Debugger is a free tool allowing to verify that social media snippets are correctly optimized and enriched.

Analyze a web page

Let’s decrypt the result of a page analysis with the debugger.

The alerts

If it detects a problem on a data, it raises an alert, visible first in the information list.

open graph debugger facebook alert
an alert

Last data collection

The following section shows when and how Facebook collected the data on this page. You find it there:

  • the date of collection
  • the response code
  • the url you are looking for
  • the canonical url of the page
  • preview of the generated link containing an image, video, …
facebook debugger open graph data collection

Raw Open Graph recovered by the tool

A brief example of the Facebook meta tags found in the debugger:

  • og:url => must match the analyzed url
  • og:type => the type of page
  • og:title => must match the title of the page being scanned
  • og:image => the Open Graph image markup corresponding to the url of the media that are be used
  • og:description => the description of the page. This is very important because a good one can incite the click.
  • og:updated_time => the last date the page was updated. Interesting also to signal the freshness of the content to the person who will see the share link.

It is essential to check these informations and make sure that it matches the ones you want to display when this is shared on social networks.

raw facebook debugger tags

Batch Invalidation

You can analyze several urls at once. Simply paste the list of urls to get the result.

After clicking on Debugger, you get the simplified result for each url. A link allows you to access the details. This allows very quickly to detect problems on one or more pages and then see each page in detail.

batch invalidation facebook debugger
batch invalidation in the debugger

Images

Images are essential in your publications because they capture much more attention than text. It is essential to know which image are associated with your post and how it will be shown on the network.

The image is specified via the og:image which contains its url.

Sharing on Facebook must respect several conditions:

  • the image must have a minimum size of 200 x 200 pixels
  • do not exceed 8 Mega Bytes

It is advisable to use images with a resolution of 1200 x 630 pixels for the best rendering on all devices and respecting the format 1.91:1 maximum (the width is 1.91 times the height).

On LinkedIn, the recommendations are as follows:

  • a maximum size of 5Mo
  • a minimum size of 1200 x 627 pixels
  • a ratio of 1.91:1

Caching

The robot caches all images.

It’s very important to know if you then change an image. Keeping the same url will not update the images. For this, you must use a new url for the new image.

It is also advisable not to delete the old image in case a publication still uses it.

The debugger makes it very easy to see if the right image is associated with the share link and if the rendering is relevant.

You can find all information about images on this page: https://developers.facebook.com/docs/sharing/webmasters/images.

Add a video to a post

Sharing a video contained in a post also uses Open Graph metadata.

Some tags are specific to the information to describe the video, such as og:video:width or og:video:height. Note the format where width and height are attributes of the og:video.

The og:image corresponds here to the thumbnail of the video.

< meta property="og:image" content="video thumbnail URL" >
< meta property="og:video" content="video source URL" >
< meta property="og:url" content="page URL" >
< meta property="og:title" content="video title" >
< meta property="og:description" content="video description" >
< meta property="og:video:width" content="video width" >
< meta property="og:video:height" content="name="video height" >
< meta property="og:type" content="video" >

List of Open Graph tags

The main ones

Below is a list of the main tags corresponding to the information presented in the social network content sharing link.

og:titleContent title
og:imageOG image is the url of the image highlighted in the share link
og:descriptionContent description
og:urlUrl of the page
og:site_nameSite name
og:typeCorresponds to the type of content: video, website (default), … Important because it determines the display of the content in the share link.
og:localeCorresponds to the language of your content. Default is English (en_US)

App

fb:app_idYou must add this one to use Facebook Insights.
These insights allow you to know the traffic between Facebook and your site or application.
The ID can be found in your application space.

Videos

Note: all the urls of the videos must be secure (https) so that the video can be read in the news feed.

og:videourl of the video (in https)
og:video:urlsame as the above
og:video:secure_urlsame as the above
og:video:typeCorresponds to the MIME type of the video. application/x-shockwave or video/mp4
og:video:widthVideo width in pixels
og:video:heightVideo height in pixels
og:imageCorresponds to the image that is displayed in the thumbnail.

For images

og:imageUrl of the image. Don’t forget to put a different url if the image is updated to force the cache to update. Use a url in https:// instead.
og:image:urlSame as above
og:image:secure_urlSame as above
og:image:typeImage type: image/jpeg, image/gif or image/png
og:image:widthImage width in pixels
og:image:heightImage height in pixels

Sharing on Twitter

Twitter does not directly use the OG protocol for sharing on its social network. It uses tags based on the same conventions but slightly different.

The ” og: ” are replaced by ” twitter:” .

The social network is also able to understand the Open Graph tags. When it reads the page, it looks first for the twitter: tags and leave the og:. You can even mix the them together.

You can do this:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@monsite" />
<meta name="twitter:creator" content="@johndoe" />
<meta property="og:url" content="https://www.example.com/" />

[Editor’s note: Soon do a full article on the other social networks’ card]

The Facebook Webmaster tool

Facebook developer debug tools is not limited to the Open Graph debugger. Don’t miss the “Webmaster” tool to track the crawl of your site’s different pages shared on the social network.

facebook webmaster tool

Prerequisite

Before you can use it you need to have the domain verified by Facebook through your Business Manager account.

facebook domain name validation

As with Google’s search console, you have several ways to verify from modifying the DNS of your domain to uploading a file to the root of your site.

All information about this procedure here: https://developers.facebook.com/docs/sharing/domain-verification/

The indexing robot

This robot indexes the HTML code of a website or application shared on Facebook via a share link.

The first time the content is shared, it caches the url and all the metadata.

Several conditions have to be respected to be indexed, including:

  • use gzip and deflate encodings
  • put the Open Graph of the page before the first mega byte
  • that the content is quickly accessible

You can find all the information here: https://developers.facebook.com/docs/sharing/webmasters/crawler/.

Abstract

Checking the Open Graph information of a page and the shape of the share link when one of your blog posts is shared is essential. You can find in seconds potential issues that could harm your web marketing efforts.

Facebook Open Graph debugger offers us a simple and efficient debug tool to quickly test and validate the format and information used in the Open Graph data of your web pages and applications.

Most of the time, you will standardize a template. The validation work will only have to be done once, which doesn’t prevent you from doing some long-term verification tests.

Sean