The Open Graph protocol: optimising content sharing on social networks

Through our SEO Agency Optimize 360

What is the Open Graph Protocol?

Le Open Graph protocolor simply OG, is a technology developed by Facebook to optimise the way in which the content of a web page is presented when it is shared on social networks.

This optimisation method involves adding meta tags in the page source code to improve the visibility and appearance of publications.

The principles of the Open Graph protocol

When a user shares a web page on a social network such as Facebook, Twitter or Pinterestthe platform retrieves certain information from the site to generate a preview of the publication. This preview generally includes :

A title
A description
An associated image

The importance of OG meta tags

To control this information when a page is shared, the Open Graph protocol uses specific meta tags added to the document header HTML. These tags enable social networks to understand what data to display in the publication preview to offer their users a better experience.

The different Open Graph tags

The OG protocol offers several tags that can be used to personalise the display of your content on social networks:

og :title : defines the page title that will be displayed in the preview.
og :description Add a short description of the content or a summary of the page.
og :image URL: indicates the URL of the image that will be used as the main illustration for the publication. This image must be in JPEG, GIF or PNG and be of an appropriate size for social networks (1200×627 pixels recommended).
og :type Type of content shared: specifies the type of content shared (article, video, product, etc.).
og :url : specifies the URL canonical of the page, i.e. the web address to be used as a reference when sharing.
og :local Local information: indicates the language and region of the content for displaying local information to international users.
og :site_name : mentions the name of the website from which the content originates.
og :audio and og :video audio or video files linked to the content of the page.

Example of HTML code with OG tags

Here is an example of source code incorporating a few Open Graph tags for an article page:

< !DOCTYPE html>
<html>
  <head>
    <meta property="og :title" content="Titre de l'article" />
    <meta property="og :description" content="Un résumé de l'article pour donner envie aux utilisateurs des réseaux sociaux de cliquer." />
    <metahttps://www.mon-site.com/images/mon-image.jpg" /&gt;
    <meta property="og :type" content="article" />
    <meta property="og :url" content="https://www.mon-site.com/articles/titre-de-l-article" />
    <meta property="og :locale" content="fr_FR" />
    <meta property="og :site_name" content="Le nom de mon site Web" />
  </head>
  ...
</html>

The benefits of the Open Graph protocol for search engine optimisation (SEO)

Improved visibility and appearance of publications

By controlling the information displayed when a web page is shared, OG helps to ensure that your content is valued on social networks. Publications accompanied by a nice preview (eye-catching title, description and image) are more likely to be noticed and generate more clicks and engagement.

Lower bounce rate

With the option of adding a clear, eye-catching description of the content in the og :descriptionThis way, users will know exactly what to expect when they click on your link. This reduces the likelihood of accidental clicks and, therefore, reduces the bounce rate.

Better allocation of traffic to your website

The use of OG meta tags ensures that your content is correctly linked to the preview published on a social network, allowing users to identify you and easily access your website to find out more and share more.

Compatibility and integration of the Open Graph protocol

Although initially designed by Facebook, OG tags are also recognised by other social networks such as Twitter and LinkedIn. However, some platforms have their own meta tags (such as Twitter Cards), so it is advisable to integrate both Open Graph tags and those specific to each network to optimise the reach and engagement of your publications.

To ensure that Open Graph tags are correctly applied to your website, you can use various tools offered by the social networks themselves, such as Facebook's "Sharing Debugger" or Twitter's "Card Validator". These tools allow you to check whether the tags can be retrieved correctly, as well as previewing the appearance of your publications on different platforms.

Finally, several plugins and extensions for CMS (Content Management System) such as WordPress and Joomla offer to automatically add Open Graph tags to pages to make them easier to integrate and manage.

With the Open Graph protocol, optimising your content for successful sharing on social networks is now as easy as 1-2-3. Adopt this method of improving the visibility of your web pages now and put all the chances on your side to generate more traffic and engagement on your site.