Comment est géré l’affichage de vos publications sur les réseaux sociaux ?

Aujourd’hui, nous allons aborder une question récurrente souvent posée par nos utilisateurs : comment est géré l’affichage sur les réseaux sociaux des contenus que nous partageons ? Cela concerne notamment l’image illustrant vos article. Comment est-elle choisie ? Pourquoi cela n’est pas toujours la bonne photo qui est affichée ? Tout cela se gère finalement assez simplement, grâce au protocole Open Graph.

Le protocole Open Graph

Par définition, le protocole Open Graph permet à toute page web de devenir un objet ‘riche’ sur un réseau social.
Ce protocole fut créé à l’origine par Facebook mais est désormais géré par l’Open Web Fondation.
Tout cela peut vous paraître abstrait … mais concrètement, le protocole Open Graph est un ensemble de balises permettant aux développeurs/webmasters de donner aux réseaux sociaux (Facebook, Twitter, LinkedIn, Google+, Viadéo etc …) des informations précises par rapport à la page comme :

  • Le type du contenu (article, photo,vidéo)
  • Le titre
  • La description
  • Le visuel
  • L’adresse URL de l’article

Ces informations seront donc traitées par les réseaux sociaux et leur permettra d’afficher correctement le lien partagé par l’utilisateur.

En l’absence de ces balises, vous laissez le réseau social choisir pour vous ces informations. D’ou des visuels non conformes ou autres anomalies. En remplissant ces balises, vous imposez aux réseaux sociaux un type d’affichage de vos contenus.

Ou placer les balises sur mon site internet ?

Facebook a donc crée une batterie de balises meta définissant quelques règles quand une page de votre site internet est partagée sur les réseaux sociaux. Ces dernières vont vous permettre de choisir le titre, la description, l’adresse de votre contenu (le lien) ainsi que l’image qui sera affichée.
Ces balises, comme toutes les balises meta, se mettent avant le corps de vote site.
Toutes les balises meta se placent dans le header de votre site (ou bien dans le fichier header.php, si vous utilisez WordPress). Elles sont uniques pour chaque pages (et donc chaque contenus)

 

Ainsi, lorsque vous partagez un lien, son affichage sur les réseaux sociaux dépend de ces balises meta.

Grâce à quelles balises l’affichage est-il géré sur les réseaux sociaux ?

Pour que le format d’affichage soit correct, il faut que les différentes balises soient présentes dans le header de votre site ou blog ou dans le fichier header.php. 

Il existe de très nombreuses balises Open Graph, mais rassurez-vous, pour avoir un format de publication optimisé, seulement 3 seront utiles :
<og:title> : Cette balise comportera le titre de l’article qui sera affiché sur les réseaux sociaux.
<og:description> : Ici se trouvera la description de votre article
<og:image> : C’est dans cette balise que doit se trouver le visuel de l’article que vous partagerez sur les réseaux sociaux.

pubfbdescriChaque élément affiché de votre publication correspond donc à une balise Open Graph. Dés que ces 3 balises seront présentes sur votre site et donc sur la page de votre article, vous n’aurez aucun problème d’affichage lors de votre partage sur les réseaux sociaux.

Il est important de noter que le titre de votre article (<og:title>) sera le message de votre Tweet – Statut Facebook/LinkedIn.

Utilisation des balises via WordPress

Si vous n’êtes pas familier au code et que vous utilisez WordPress, il est facile de configurer ces balises.

Vous ne le savez peut-être pas, mais lorsque vous rédigez un article dans le back office de votre blog, le fait de ”mettre une image à la une” remplit automatiquement la balise <og:image> par cette image à la une.
Le titre de votre article correspond donc au titre présent dans la balise <og:title>
Dans la balise <og:description> se trouve souvent la première phrase de votre article.

Il reste une dernière problématique :

Comment faire pour que l’image à la une de mon article soit différente de celle partagée sur les réseaux sociaux ?

C’est un jeu d’enfant en utilisant ce plugin sur votre site, si vous êtes sous WordPress !
Il vous permet, tout simplement de pouvoir choisir l’image qui sera partagée sur les réseaux sociaux.
En utilisant ce plugin très facile à prendre en main (il faut seulement aller chercher une image dans les dossiers de votre ordinateur) vous aurez la possibilité de définir le visuel qui représentera votre article sur les réseaux sociaux. Pour info, le format conseillé pour l’image étant de 1200px * 630px.
Ce plugin viendra donc optimiser votre visuel pour vos partages sur les réseaux sociaux, au lieu de simplement partager l’image à la une de votre article qui ne sera certainement pas au bon format (mais au format adapté pour l’affichage de l’article sur votre blog).

Spécificité Sociallymap

Un grand nombre de nos utilisateurs se servent de l’opérateur photo qui permet de publier un lien “En tant que photo” (comme si vous aviez ajouté une photo manuellement au lien qui sera partagé).
En utilisant cet opérateur, les balises <og:description> et <og:title> deviennent obsolètes. Seulement l’image comprise dans la balise <og:image> est importante, car c’est elle qui sera affichée.

Nous remarquons que le “widget” (ou format de publication par défaut d’un lien) a disparu pour laisser place à la photo. Le titre de l’article se retrouve donc en “statut” accompagné du lien.

Maintenant que l’affichage de vos contenus sur les médias sociaux n’a plus de secret pour vous !
Il ne vous reste plus qu’à embêter un gentil développeur ou bien télécharger le plugin afin de configurer votre site, si cela n’est pas déjà fait !