Digital Marketing

How to use the Open Graph share Facebook debugger

By Sean, on January 28, 2021, updated on February 24, 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 will talk about.

What is the Open Graph?

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

open graph debugger logo
Open Graph Protocol logo

These data, called metadata because they are not directly visible to the page visitor but are in the source code of the web 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 title, url, image, …

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

Example 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 or Twitter also use Open Graph protocol for the sharing data. Be careful however to check that the characteristics of the properties are not different. For example, the expected size of the images is not the same between LinkedIn and Facebook.

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

How to add Open Graph tags?

In any website

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

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

It will be easier to use a template to automate meta tags from page information such as title, author, description, …

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 (Content Management System) in the world for creating websites. Several extensions (plugins) allow you to automatically add Open Graph tags to your web pages, very simply and without code.

An example with the well known SEO plugin Yoast:

wordpress-open-graph-yoast
wordpress open graph with yoast plugin

Beyond WordPress, most of the tools for building websites such as Joomal, Drupal, Webflow, Wix, … propose natively or via extensions to generate Open Graph data very simply.

Using Facebook Open Graph Debugger

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

It’s the easiest way to check Open Graph data.

To access it, go to this page: https://developers.facebook.com/tools/debug/ by being connected to your Facebook 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
url to be debugged with the Facebook share starter tool

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

facebook-debug-analyse-open-graph
facebook debug detailed analysis of the open graph data of the page

Facebook Share Debugger is a free web tool allowing to check 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 the tool detects a problem on a data, it will raise an alert, visible first in the information list.

open graph debugger facebook alert
open graph debugger facebook alert

Last data collection

The following section shows when and how Facebook collected the data on this page. You will 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, title and description
facebook debugger open graph data collection
facebook debugger open graph data collection

Raw Open Graph data recovered by Facebook

A brief example of the Facebook meta tags found in the Facebook 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 tag corresponding to the url of the media that will be used in the link
  • og:description => the description of the page in the share link. This is very important because a good description can incite the click.
  • og:updated_time => the last date the content 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 this data and make sure that it matches the data you want to display when this content is shared on social networks.

raw facebook debugger tags
raw facebook debugger tags

Batch Invalidation

The tool offers the possibility to 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 facebook debugger

Images in link sharing

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

The shared image is specified via the tag og:image which will contain 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 debug tool 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 with Open Graph

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

The tag 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 Open Graph 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 shared page
og:site_nameSite name
og:typeCorresponds to the type of content: video, website (default), … Important because it will determine the display of the content in the share link.
og:localeCorresponds to the language of your content. Default is English (en_US)

The App tag

fb:app_idYou must add this tag 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.

The tags specific to videos

Below are all the tags specific to the videos. You can see the use of attributes to specify information.

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 tag
og:video:secure_urlsame as the tag 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 will be displayed in the thumbnail.

Tags for images

og:imageUrl of the image that is shared. 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 Open Graph for sharing on its social network. It uses tags based on the same conventions but slightly different.

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

Twitter is also able to understand the Open Graph tags. When it reads the page, it will first look for the twitter: tags and leave the og: tags. You can even mix the tags together.

For example, 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/" />

We will soon do a full article on the Twitter Card.

The Facebook Webmaster tool

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

facebook webmaster tool
facebook webmaster tool

Prerequisite

Before you can use this tool, you will need to have the domain verified by Facebook through your Business Manager account.

facebook domain name validation

As with Google’s search console, you will have several ways to check 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/

Facebook’s 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 data 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.

You will most of the time standardize a template for these data, so the validation work will only have to be done once, which doesn’t prevent you from doing some long-term verification tests.

Sean