Comprendre le protocole Open Graph

Comprendre le protocole Open Graph

Les médias sociaux sont un moteur de trafic important pour les sites web. L'apparition de votre site web sur les médias sociaux est donc très importante pour attirer et maintenir les utilisateurs sur votre plateforme

Imaginez que vous surfiez sur Twitter ou d'autres réseaux sociaux, il est possible de rencontrer quelques liens et s'il n'y a pas d'attrait, il serait rare que vous vous arrêtiez pour vérifier le lien. Le protocole Open Graph (OGP) vous permet d'afficher peu d'informations sur la page web, ce qui pourrait inciter l'utilisateur à vérifier le lien partagé. Le protocole OGP (Open Graph Protocol) :

  • Permet à une page web de devenir un objet riche dans un graphe social (un modèle ou une représentation d'un réseau social, où le mot graphe a été repris de la théorie des graphes).
  • Il vous aide à contrôler ce qui apparaît lorsqu'un lien vers votre page web est partagé sur des plateformes de médias sociaux comme Facebook, Twitter, WhatsApp, etc.

De la même manière que les moteurs de recherche ont les balises qu'ils recherchent dans une page web, les réseaux sociaux en ont aussi. Vous trouverez ci-dessous quelques cas d'utilisation de l'OGP :

Le titre

Cela permet d'ajouter un titre à votre contenu. Cela donne un titre à votre objet. Il est préférable que votre titre ne comporte pas plus de 100 caractères. Si votre titre dépasse 100 caractères, il sera automatiquement raccourci à 88. Vous trouverez ci-dessous un exemple de code :

<meta property="og:title" content="Les 50 premières entreprises technologiques du monde"/>

L'URL

Cela pourrait être très utile dans le cas d'un site web dynamique dont le contenu est dynamique mais où vous souhaitez que les utilisateurs puissent accéder à la page d'index du site indépendamment de la vue dans le lien qui leur est accessible. Vous trouverez ci-dessous un exemple de code :

<meta property="og:url" content="www.google.com" />

Le type

Cela permet de décrire le type de votre objet. Il peut s'agir d'un site web, d'un article, d'une musique ou d'une vidéo. Exemple de code ci-dessous :

<meta property="og:type" content="video.movie" />
<meta property="og:type" content="site web" />

L'image

Cela pourrait être utilisé pour afficher une image de prévisualisation qui pourrait d'une certaine manière donner des informations sur le contenu du site. Exemple de code ci-dessous :

<meta property="og:image" content="path/to/image" />

Les cas OGP écrits ci-dessus sont tout à fait nécessaires, ceux écrits ci-dessous sont facultatifs mais il est conseillé aux développeurs de les utiliser.

La description

Il peut s'agir d'une phrase ou deux, même si elle est facultative ; elle est très bonne ; elle est ajoutée car elle attire l'attention et fait que le lecteur est attiré par le site. Elle donne des informations sur l'objet. Exemple de code ci-dessous :

<meta property="og:description" content="Apple se classe en tête de la liste des plus grandes entreprises technologiques du monde. ... Avec un chiffre d'affaires annuel de 262 milliards de dollars, ..."/>

L'audio

Il est utilisé pour joindre une URL à un fichier audio pour accompagner cet objet.

<meta property="og:audio" content="http://url-to-audio.mp3" />

La vidéo

Comme pour l'audio, il donne l'URL de la vidéo de l'objet

<meta property="og:video" content="http://path/to/video.mp4" />

Le nom du site

Cela peut être utile si votre objet fait partie d'un site web plus vaste, le nom qui doit être affiché pour l'ensemble du site.

<meta property="og:site_name" content="google" />

Il existe de nombreuses autres façons de décrire le OGP, mais elles dépassent la portée de cet article. Pour plus de détails, vous pouvez consulter le site officiel.