How to use the Open Graph share Facebook debugger
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, …
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.
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:
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.
After clicking, you will get a detailed analysis of all Open Graph markup on the analyzed 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.
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
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.
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.
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:title | Content title |
| og:image | OG image is the url of the image highlighted in the share link |
| og:description | Content description |
| og:url | Url of the shared page |
| og:site_name | Site name |
| og:type | Corresponds to the type of content: video, website (default), … Important because it will determine the display of the content in the share link. |
| og:locale | Corresponds to the language of your content. Default is English (en_US) |
The App tag
| fb:app_id | You 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:video | url of the video (in https) |
| og:video:url | same as the above tag |
| og:video:secure_url | same as the tag above |
| og:video:type | Corresponds to the MIME type of the video. application/x-shockwave or video/mp4 |
| og:video:width | Video width in pixels |
| og:video:height | Video height in pixels |
| og:image | Corresponds to the image that will be displayed in the thumbnail. |
Tags for images
| og:image | Url 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:url | Same as above |
| og:image:secure_url | Same as above |
| og:image:type | Image type: image/jpeg, image/gif or image/png |
| og:image:width | Image width in pixels |
| og:image:height | Image 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.
Prerequisite
Before you can use this tool, you will need to have the domain verified by Facebook through your Business Manager account.
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.
