Vérifier et Corriger le partage de votre page web sur facebook

Lorsqu’on partage un article provenant d’un site web ou d’un blog sur facebook, il apparait avec une petite mise en page qui consiste en une image de présentation, un titre et un résumé de l’article (ou ces premières lignes). Mais parfois, le résultat escompté n’est pas le bon…

Si vous êtes blogueur et que vous partagez vos article sur les réseau sociaux, il vous est possible de vérifier à quoi va ressembler votre partage sur facebook avant de partager, ou éventuellement de forcer facebook à mettre à jour les éléments d’une publication que vous avez déjà partagée.

Facebook met un outil à votre disposition pour cela : l’Open Graph Object Debugger.

Open Graph, c’est le nom que l’on donne au standard qui permet d’indiquer dans nos pages web quels sont les éléments que doit prendre la plateforme de partage pour afficher un aperçu de la page que vous partagez.

Voici un exemple de code source d’une des pages de 65bits.com, enfin, la partie qui nous intéresse, celle qui contient les informations de l’Open Graph:

Les données de l’Open Graph sont les propriétés Meta qui commencent par « og: ».

Comme vous le voyez il y en plusieurs:

• og:title (le tire affiché dans le partage)
• og:type (le type de page web)
• og:url (l’adresse pour accéder à l’article)
• og:image (l’adresse de l’image à afficher à coté de l’article)
• og:site (le nom du site web)
• og:description (une courte description de l’article, ou un résumé en texte)

Je ne vais pas rentrer dans le détail de la façon de procéder pour que ces informations Open Graph apparaissent dans votre page, c’est propre à chaque CMS, c’est à dire à l’outil que utilisez pour publier votre site web.

Mais reparlons de l’Open Graph Object Debugger de facebook, grâce à cet outil vous pouvez voir à quoi va ressembler le partage de votre page web sur facebook.

si vous rentrez l’adresse URL d’une page que vous voulez partager dans le champ Input URL, le debugger vous donne le détail de ce qu’il a trouver, avec un aperçu du partage facebook:

Et voici la prévisualisation du partage facebook:

Ce que je remarque en premier dans cet essai avec le débugger c’est que l’image associée n’est pas la bonne.

Je vais donc faire quelques réglages dans mon outil de publication (WordPress) pour ne pas partager l’image principale du site (logo) pour chaque article, mais pour partager dans le lien « og:image » le lien vers l’image « à la une » de l’article.

Après un petit réglage dans mon WordPress, je reviens sur le debugger, et je clique sur le bouton « Fetch new scrape information » pour forcer facebook à relire les données Open Graph de la page, et le résultat est le suivant:

L’image a bien été mise à jour. Facebook récupérer les nouvelles données du champ Meta « og:image » de mon article et a mis à jour les données de publication du partage interne de facebook.

Cette fonction « Fetch new scrape information » est très utile si vous avez déjà partagé un lien web sur facebook.

Si le titre ou l’image par exemple ne sont pas corrects, vous pouvez forcez facebook à récupérer les information Open Graph corrigées sur votre page web.