Comment ajouter les balises Open Graph sur votre site web

par Tychic Obanda


Posté le 22-11-2018 à 13:22 | Programmation web | 5



Avez-vous déjà remarqué, lorsque vous partagez un lien sur Facebook ou autre réseau social, ce lien devient enrichi avec une image et un titre ?

L'aviez-vous déjà remarqué? Et savez-vous comment ça marche? Il s'agit des balises Open Graph de Facebook.

Je vous montre donc dans cet article comment fonctionnent les balises Open Graph et comment les ajouter sur votre site web.

C'est quoi les balises Open Graph

Le protocole Open Graph est une solution qui permet à une page web de devenir un objet riche dans un réseau social.

Plus concrètement, le protocole Open Graph est un ensemble de balises HTML qui permet à un webmaster de donner aux principaux réseaux sociaux(Yonaye, Facebook, Whatsapp, Twitter, etc.) des informations précises sur ces pages.

Ces informations permettent aux réseaux sociaux de mieux afficher un lien en y ajoutant une image, un titre, une description.

Source : Yakaferci

En utilisant les balises Open Graph sur votre site, vous donnez plus de chances aux internautes de partager vos liens sur les réseaux sociaux car une étude a montré que les utilisateurs de réseaux sociaux préfèrent cliquer sur des liens enrichis que des simples liens.

Comment ajouter les balises Open Graph

L'utilisation de Open Graph est très facile car vous n'aurez qu'à utiliser des baliser HTML qui seront placées dans <head>.

Tout va se jouer avec la balise <meta /> avec les attributs property et content :

  • L'attribut property contiendra le graph;
  • L'attribut content contiendra la valeur du graph.

Ajouter les balises suivantes sur toutes les pages de votre site dans la partie <head>. J'expliquerais le fonctionnement juste après.

<meta property="og:type" content="website" />
<meta property="og:title" content="243tech.com – Astuces et tutoriels sur la programmation web" />
<meta property="og:url" content="https://www.243tech.com" />
<meta property="og:image" content="https://www.243tech.com/logo.png" />
<meta property="og:description" content="Les meilleurs astuces et tutoriels vidéos pour apprendre la programmation web, le blogging et le métier du web(webmaster)" />

Explication

  • og:type : précise le type de la page. Le type peut être website, video, article, music, etc. Dans notre cas, il s'agit d'un site web d'où la valeur website.
  • og:title : c'est le titre de la page. Il joue le même rôle que la balise <title>.
  • og:url : il s'agit de l'adresse URL de la page. C'est la page à laquelle l'internaute se rendra en cliquant sur le lien.
  • og:image : c'est l'image qui sera affichée quand le lien est partagé. Vous devez donc spécifier le chemin du fichier image.
  • og:description : il s'agit d'une petite description de la page. Il joue le même rôle que la balise meta description.

Ce sont là les principales balises Open Graph que vous pouvez ajouter sur votre site pour enrichir vos liens.

Sur ces balises, s'ajoutent d'autres balises Open Graph toujours dans le but d'enrichir vos liens.

Les balises suivantes ne sont pas obligatoires. Vous pouvez ou ne pas les ajouter sur votre site web.

<meta property="og:site_name" content="243tech" />
<meta property="og:determiner" content="auto" />
<meta property="og:vidéo" content="https://243tech.com/video-presentation.mp4/" />
<meta property="og:locale" content="fr_FR" />

Explication

  • og:site_name : il s'agit du nom de votre site web.
  • og:determiner : c'est le mot qui apparaît avant le titre du lien dans une phrase.
  • og:vidéo : si la page contient une vidéo, vous devez préciser le chemin de la vidéo ici.
  • og:locale : vous précisez la langue de votre page web

C'est donc tout pour cet article. S'il vous a été utile, n’hésitez pas de vous manifester dans les commentaires. Sinon si vous avez rencontré des difficultés, n’hésitez pas non plus de les dire dans les commentaires et je serai là pour vous aider.

Restons en contact ! Retrouvez-moi sur : Yonaye | Facebook | Whatsapp | Twitter |


Tychic ObandaSalut, Mbote! Je m'appelle Tychic Obanda. Avant j'étais un simple visiteur des sites internet et aujourd'hui je suis devenu le créateur des sites internet. Passionné de l'internet et de la programmation, je publie sur ce site des astuces et tutoriels pour vous aider de mieux apprendre la programmation web.









Voulez-vous apprendre la programmation web ?

Inscrivez-vous à la Newsletter et recevez mes ressources gratuites (guides PDF, checklists, etc.) pour programmeurs, webmasters et blogueurs.







Laisser un commentaire
Vous pouvez écrire en gras en utilisant * et en italique en utilisant _

5 commentaires

Darty
Darty
22-11-2018 à 22:49

Merci beaucoup pour l'article. Vraiment j'avais des problèmes à ce sujet. Merci vraiment

Répondre

Han Nim
Han Nim
22-11-2018 à 21:45

Brillant. Merci beaucoup

Répondre
Bonjour
Bonjour
29-11-2018 à 19:41

de rien Han


Joel Ambu
Joel Ambu
22-11-2018 à 13:35

Magnifique article merci beaucoup.

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
22-11-2018 à 14:50

Je t'en prie @Joel


Voulez-vous apprendre la programmation web ?

Inscrivez-vous à la Newsletter et recevez mes ressources gratuites (guides PDF, checklists, etc.) pour programmeurs, webmasters et blogueurs.

Recherche
M'écrire sur Whatsapp

Cliquez sur l'image ci-dessous pour entrer en contact avec moi sur Whatsapp. J'aimerais vraiment échanger avec vous!!!

Contactez Tychic Obanda sur Whatsapp

Avatar Tychic Obanda

Envie d'apprendre plus sur la création de sites web ? Vous êtes au bon endroit ! 86 articles publiés, 477 commentaires ont été postés sur 243tech. Tout ce que vous cherchez se trouve peut-être ici...