Facebook Open Graph : les balises et leurs fonctionnalités

Facebook a publié Open Graph en 2010 afin de permettre une meilleure présentation des sites Internet externes sur sa propre plate-forme. À cette fin, les développeurs du réseau social ont développé une technologie intéressante : Open Graph (Open Graph Protocol ; OGP) transforme les sites Internet en objets. Cette technologie aide les utilisateurs de la plate-forme à partager des contenus de sources externes sur le réseau. Une fonctionnalité particulièrement intéressante pour de nombreux exploitants de sites Internet puisque la plupart de ces derniers souhaitent accroître la notoriété de leur site Internet.

D’autres réseaux comme Twitter, LinkedIn ou Xing ont suivi les traces de Facebook et ont implémenté Open Graph sur leurs plateformes. Ce protocole est aujourd’hui un outil essentiel dans le webdesign.

Lorsqu’un utilisateur partage un site Internet sur les réseaux sociaux, celui-ci doit apparaître d’une façon ou d’une autre sur la plateforme. Une vignette et un texte d’accompagnement représentant le site Internet sont en effet mis en place de manière aussi efficace que possible pour inviter les internautes à visiter le site en question. Mais pour que le contenu de la vignette soit le plus pertinent possible, les webdesigners utilisent Open Graph.

Ils peuvent insérer des balises Open Graph dans le texte source du site Internet, et déterminer ainsi la manière dont ce site doit être présenté sur les réseaux sociaux. Open Graph est donc un outil intéressant dans le domaine du marketing en ligne. Ce protocole permet aux propriétaires de contenus de mieux gérer la manière dont ils partagent leurs contenus et leurs informations avec les internautes.

Les balises correspondantes sont placées dans l’en-tête du document HTML sous forme de meta property :

On définit donc tout d’abord le type de balise et on lui attribue une valeur ou un contenu.

Avant de commencer à insérer les différentes meta properties, on définit le vocabulaire au moyen d’un préfixe.

Vient ensuite l’en-tête du document.

Les balises Open Graph que l’on peut placer sur un site Internet sont nombreuses. Nous avons détaillé pour vous les principales ci-après. Elles doivent impérativement être placées sur tous les sites Internet destinés à être partagés sur les réseaux sociaux.

Quel sera le titre affiché en cas de partage du site Internet sur les réseaux sociaux ? La balise title permet de définir un nom. Sur Facebook, elle ne doit pas dépasser les 95 caractères. Un saut de ligne est effectué après environ 50 caractères. Ceci impacte également la façon dont les utilisateurs réagiront à la présentation du site.

Chaque document Web dispose dans tous les cas d’une balise title qui intervient par exemple pour l’affichage dans un navigateur ou un moteur de recherche. En principe, il est possible de la reprendre dans la balise Open Graph, mais le protocole Facebook permet également aux exploitants de sites Internet de définir une option plus adaptée au réseau social. Il est par exemple possible de mieux exploiter la longueur mise à disposition par Facebook avec une alternative adaptée plutôt qu’avec une balise standard qui sera également utilisée pour les moteurs de recherche. Une autre balise title permet par ailleurs d’adapter plus précisément le titre au groupe cible sur le réseau social.

Tout comme le titre, la description fait déjà partie intégrante de tout document HTML. Une balise Open Graph appropriée permet aux webdesigners d’adapter la description du contenu aux réseaux sociaux. Pour ce faire, Facebook prévoit une longueur d’environ 300 caractères. Selon le titre ou l’URL, l’espace peut également être plus court. On recommande donc de limiter la longueur à 200 caractères au maximum pour des raisons de sécurité.

L’image constitue une autre composante de l’aperçu du site Internet avec le titre et le texte de description. Cette balise Open Graph permet aux exploitants de sites Internet d’empêcher Facebook et les autres plateformes de réseaux sociaux de récupérer une vignette du site plus ou moins aléatoirement. En effet, le résultat peut être dramatique si l’image affichée est celle d’une bannière publicitaire plutôt que celle de l’article à proprement parler.

Il est recommandé de concevoir une image dédiée à cet aperçu afin de susciter le meilleur nombre de clics. Pour y parvenir, il faudra non seulement soigner le contenu de l’image, mais aussi veiller à son format. Les vignettes qui fonctionnent bien sont celles qui associent un visuel à un texte. Pensez à positionner le texte au centre de l’image, car il arrive à Facebook de rogner les bords. Le format 1200 x 627 pixels s’avère être le format optimal. Si l’on choisit ces paramètres, Facebook affiche l’image au-dessus du titre et de la description. En cas de format plus petit, l’image passe en miniature à côté du texte.

Il est possible de fournir de plus amples informations à la balise image afin de garantir son bon fonctionnement :

• secure_url : si le site Internet impose le protocole HTTPS, vous devez pouvoir proposer une option appropriée.
• type : dans le cas d’une image, le type de média est toujours « image ». Le format utilisé est également indiqué à cette ligne. (L’IANA a élaboré une liste de tous les types de médias utilisables.)
• width : cette entrée transmet à l’autre site Internet la largeur de l’image en pixels.
• hight : cette entrée transmet à l’autre site Internet la hauteur de l’image en pixels.
• alt : Il s’agit d’un texte facultatif que l’on retrouve en HTML. Il tient lieu de description du contenu de l’image lorsque la miniature ne peut pas être affichée.

La balise URL permet de définir l’adresse Web du site Internet partagé. Cela peut sembler quelque peu redondant puisque l’URL est de toute façon connue. Cependant, certains exploitants de sites Internet disposent de plusieurs URL pour le même contenu dans le but, par exemple, de favoriser un meilleur traçage. La balise Open Graph veille à ce que le bon site Internet soit toujours mis en lien.

Le type indique la nature exacte du contenu. Les types « website », « blog » ou « article » conviennent à la plupart des sites Internet. Mais il existe d’autres options :

• website
• article
• blog
• profile
• book
• video
  • video.movie
  • video.episode
  • video.tv_show
  • video.other
• music
  • music.song
  • music.album
  • music.playlist
  • music.radio_station

En pratique, on peut rencontrer d’autres types que l’on peut trouver sur la liste de schema.org. Les types présentés dans cet article sont tous spécifiés sur le site Internet officiel d’Open Graph.

Dans cet exemple, le code indique donc non seulement aux réseaux sociaux que l’objet est un article, mais précise aussi quand il a été publié et dans quelle catégorie il apparaît.

Outre les principales balises Open Graph présentées plus haut, d’autres balises peuvent être placées dans le texte source de votre site Internet. Elles permettent de pousser encore plus loin l’adaptation du contenu aux réseaux sociaux.

Chaque balise Open Graph dispose d’un contenu qui doit apparaître au bon endroit sur le réseau social et doit respecter le bon format. La balise og:title requiert par exemple un ou plusieurs mots, c’est-à-dire une chaîne de caractères. Les valeurs suivantes sont également possibles :

• Boolean : valeurs de vérité (true, false, 1, 0)
• DateTime : indication temporelle au format yyyy-mm-ddThh:mm:ss
• Enum : ensemble d’indications définies (par ex. masculin, féminin)
• Float : nombre flottant 64 bits
• Integer : nombre entier 32 bits
• String : suite de caractères Unicode
• URL : URL fonctionnelle utilisant les protocoles HTTP ou HTTPS
• Array : collection de valeurs

Balises Open Graph concernant différents types d’objets :

L’exemple suivant présente un document HTML très simple qui a été préparé pour les réseaux sociaux avec des balises Open Graph :

Pour utiliser le Debugger, il est nécessaire de disposer d’un compte Facebook. Toutefois, le site Internet à contrôler doit déjà être en ligne.