Développement web

[Tuto] Comment utiliser Facebook Debug

Par Dave, le janvier 31, 2021, mis à jour le avril 30, 2021 - 7 min read

Facebook fournit des outils aux développeurs pour améliorer leurs sites web et leurs applications.

L’un des outils gratuits les plus populaires proposés par Facebook est le Facebook Debug OpenGraph (Open Graph Meta Tags debugger en anglais), appelé aussi « Programme de debug du partage », car il sert à analyser et voir tout le contenu et les informations qui seront partagés sur Facebook, Messenger, Instagram ou autres applications appartenant à Facebook.

Avant de voir comment utiliser cet outil de debug Facebook, commençons par préciser de quoi nous allons parler.

C’est quoi l’Open Graph ?

Open Graph est un protocole de partage de données inventé par Facebook pour optimiser le contenu d’une page web en vu de son partage et sa publication sur tous les réseaux sociaux du groupe Facebook: Facebook, Instagram, Messenger, What’s app, …

logo Open Graph protocol
Logo de l’Open Graph Protocol

Ces données, appelées metadonnées car elles ne sont pas directement visibles par le visiteur de la page mais sont dans le code source de la page web, sont également utilisées par les moteurs de recherche pour mieux comprendre le contenu d’une page.

Exemple de 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"/>

Les autres réseaux sociaux comme LinkedIn ou Twitter utilisent également les données Open Graph pour les partages. Attention cependant à vérifier que les caractéristiques des propriétés ne soient pas différentes. La taille attendue des images n’est par exemple pas la même entre LinkedIn et Facebook.

Comment ajouter des balises Open Graph ?

Dans n’importe quel site internet

Il vous suffit d’insérer ces meta tags dans l’entête de chaque page. Les informations contenues dans les tags seront celles qui seront utilisées lors du partage sur les réseaux sociaux.

Exemple de code open graph dans l'entête d'une page web
Exemple de code dans l’entête d’une page web

Il sera plus facile d’utiliser un template pour automatiser la création des meta tags à partir des informations de la page comme le titre, l’auteur, la description, …

Il suffit pour cela de glisser dans le template de votre entête de page les codes og: et de remplir dynamiquement les différents champs avec les informations de la page courante.

Dans le cas de WordPress

WordPress est le CMS (Content Management System) le plus utilisé dans le monde pour créer des sites web. Plusieurs extensions (plugin) vous permettent d’ajouter automatiquement les balises Open Graph dans vos pages web, très simplement et sans code.

Un exemple avec le plugin SEO très connu Yoast:

wordpress open graph with yoast plugin

Au delà de WordPress, la plupart des outils de construction de sites web comme Joomal, Drupal, Webflow, Wix, … proposent nativement ou via des extensions de générer très simplement les données Open Graph.

Utiliser Facebook Debugger

Facebook Debugger est un outil web gratuit proposé par Facebook permettant de visualiser les data Open Graph présentes sur la page analysée afin de savoir si ces données sont correctes.

Pour y accéder, il suffit d’aller sur cette page : https://developers.facebook.com/tools/debug/?locale=fr_FR en étant connecté à votre compte développeur Facebook.

Collez simplement l’URL de la page à vérifier, puis cliquez sur le bouton « Debugger ».

url à débuger avec l'outil de début du partage de Facebook

Après avoir cliqué, vous obtiendrez une analyse détaillée de toutes les balisse Open Graph de la page analysée:

facebook debug analyse détaillée des données open graph de la page

Analyser une page web

Décryptons le résultat d’une analyse de page avec le débugger.

Les alertes

Si l’outil détecte un problème sur une donnée, il va remonter une alerte, visible en premier dans la liste des informations.

alerte sur le facebook debogueur d'open graph

Dernière collecte de données

La section suivante indique quand et comment Facebook a collecté les données sur cette page. Vous y retrouvez:

  • la date de la collecte
  • le code de réponse
  • l’url recherchée
  • l’url canonique de la page
  • l’aperçu du lien généré contenant une image, un titre et une description
facebook debogueur collecte de données open graph

Les données Open Graph brutes récupérées par Facebook debugger

Un exemple succinct des données que l’on retrouve dans le debugger de Facebook:

  • or:url => doit correspondre à l’url analysée
  • og:type => le type de page
  • og:title => doit correspondre au titre de la page analysée
  • og:image => l’url de l’image qui servira dans le lien
  • og:description => la description de la page dans le lien de partage. C’est très important car une bonne description peut inciter au clic.
  • og:updated_time => la dernière date où le contenu a été mis à jour. Intéressant aussi pour signaler la fraîcheur du contenu à la personne qui verra le lien de partage.

Il est très important de vérifier ces données et de vous assurer qu’elles correspondent à celles que vous souhaitez afficher quand ce contenu est partagé sur les réseaux sociaux.

balises brutes facebook debogueur

Invalidation par lots

L’outil offre la possibilité d’analyser plusieurs urls d’un seul coup. Il suffit simplement de coller la liste des urls pour obtenir le résultat.

Après avoir cliqué sur Debugger, vous obtiendez le résultat simplifié pour chaque url. Un lien permet d’accéder au détail. Cela permet très rapidement de déceler des problèmes sur une ou plusieurs pages puis d’aller voir chaque page en détail.

invalidation par lot facebook debugger

Les images dans le partage de lien

Les images sont très importantes dans vos publications car elles captent beaucoup plus l’attention que le texte. Il est primordial de savoir quelle image sera associée à votre image et comment elle apparaîtra sur le réseau.

L’image partagée est spécifiée via le tag og:image qui contiendra son url.

Plusieurs conditions sont à respecter pour le partage sur Facebook:

  • l’image doit avoir une taille minimale de 200 x 200 pixels
  • ne pas dépasser 8 Mega Octets

Il est conseillé d’utiliser des images d’une résolution de 1200 x 630 pixels pour avoir le meilleur rendu sur tous les appareils et respectant le format 1,91:1 au maximum (la largeur est 1,91 fois la hauteur).

Sur LinkedIn, les préconisations sont les suivantes:

  • une taile maximale de 5Mo
  • une taille minimale de 1200 x 627 pixels
  • un ratio de 1,91:1

Mise en cache

Toutes les images sont mises en cache par le robot.

C’est très important à savoir si vous changez ensuite une image. Si vous conservez la même url, l’image ne sera pas mise à jour. Pour cela, il faut impérativement utiliser une nouvelle url pour la nouvelle image.

Il est également conseiller de ne pas supprimer l’ancienne image au cas où une publication l’utilise encore.

L’outil de debug permet très facilement de voir si la bonne image est associée au lien de partage et si le rendu est pertinent.

Vous pouvez retrouver toutes les informations à propos des images sur cette page : https://developers.facebook.com/docs/sharing/webmasters/images.

Ajouter une vidéo à un article avec Open Graph

Le partage d’une vidéo contenue dans un article utilise également les metadonnées Open Graph.

Certaines balises sont spécifiques aux informations pour décrire la vidéo comme og:video:width ou og:video:height. On notera le format où la largeur et la hauteur sont des attributs du tag og:video.

La balise og:image correspond ici au thumbnail de la vidéo.

< 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" >

Liste des balises Open Graph

Les principales

Ci-dessous la liste des principales balises Open Graph correspondant aux informations présentées dans le lien de partage du contenu sur les réseaux sociaux

og:titleTitre du contenu
og:imageImage mise en avant dans le lien de partage
og:descriptionDescription du contenu
og:urlUrl de la page partagée
og:site_nameNom du site
og:typeCorrespond au type du contenu: video, website (défaut), … Important car il va déterminer l’affichage du contenu dans le lien de partage
og:localeCorrespond à la langue de cotre contenu. Par défaut en anglais (en_US)

La balise App

fb:app_idVous devez ajouter cette balise pour utiliser les Insights Facebook.
Ces insights vous permettent de connaître le trafic entre Facebook et votre site ou application.
L’ID se trouve dans votre espace d’application.

Les tags spécifiques aux vidéos

Ci-dessous tous les tags spécifiques aux vidéos. On y voit notamment l’utilisation des attributs pour préciser une information.

A noter : toutes les urls des vidéos doivent être sécurisée (https) pour que la vidéo puisse être lue dans le fil d’actualité.

og:videourl de la vidéo (en https)
og:video:urlmême chose que la balise au dessus
og:video:secure_urlmême chose que la balise au dessus
og:video:typeCorrespond au type MIME de la vidéo.
application/x-shockwave ou video/mp4
og:video:widthLargeur de la vidéo en pixels
og:video:heightHauteur de la vidéo en pixels
og:imageCorrespond à l’image qui sera affiché dans le fil d’actualité (thumbnail)

Les tags pour les images

og:imageUrl de l’image qui est partagée.
N’oubliez pas de mettre une url différente si l’image est mise à jour pour forcer le cache à se mettre à jour.
Utilisez plutôt une url en https://
og:image:urlMême chose que ci-dessus
og:image:secure_urlMême chose que ci-dessus
og:image:typeType de l’image : image/jpeg, image/gif ou image/png
og:image:widthLargeur de l’image en pixels
og:image:heightHauteur de l’image en pixels

Le partage sur Twitter

Twitter n’utilise pas directement l’Open Graph pour le partage sur son réseau social. Il utilise des balises basées sur les mêmes conventions mais légèrement différentes.

Les « og: » sont remplacées par « twitter:« .

Twitter est également capable de comprendre les balises Open Graph. Quand il lira la page, il cherchera en priorité les balises twitter:, mais parsera également les balises og:. Vous pouvez même mixer les balises entre elles.

Exemple:

<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/" />

Nous ferons prochainement un article complet sur les Twitter Card.

L’outil Webmaster

Facebook propose également un outil appelé « Webmaster » permettant de suivre le crawl des différentes pages de votre site partagées sur Facebook.

facebook webmaster tool

Pré-requis

Avant de pouvoir utiliser cet outil, vous devrez avoir préalablement fait vérifier le domaine par Facebook au travers de votre compte Business Manager.

validation nom domaine facebook

Comme pour la search console de Google, vous aurez plusieurs moyens de vérifications allant de la modification des DNS de votre domaine à l’upload d’un fichier à la racine de votre site.

Toutes les infos sur cette procédure ici : https://developers.facebook.com/docs/sharing/domain-verification/

Le robot d’indexation de Facebook

Ce robot indexe le code HTML d’un site internet ou d’une application partagé sur Facebook via un lien de partage.

La première fois où le contenu est partagé, il met en cache l’url et toutes les metadonnées.

Il faut respecter plusieurs conditions pour être indexé dont:

  • utiliser les encodages gzip et deflate
  • mettre les données Open Graph de la page avant le premier mega octet
  • que le contenu soit rapidement accessible

Vous pouvez retrouver la totalité des informations ici : https://developers.facebook.com/docs/sharing/webmasters/crawler/

Résumé

Vérifier les informations Open Graph d’une page et la forme du lien de partage lorsqu’un de vos articles de blog est partagé est très important.

Facebook nous propose un outil de debug simple et efficace pour très rapidement tester et valider le format et les informations utilisées dans les données Open Graph de vos pages et applications web.

La plupart du temps, vous standardiserez un template pour ces données, donc le travail de validation ne sera à faire qu’une fois, ce qui n’empêche pas de faire quelques tests de vérification au long cours.

Dave