Comment ajouter les balises Open Graph sur votre site web

par Tychic Obanda


Programmation web | 11 commentaires



Besoin d'une carte Visa ? Procurez-vous la carte visa Fyatu à seulement 5$. Cliquez ici


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.


Tychic ObandaJe suis 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 et de vivre de cette passion.




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

11 commentaires

Adrien
Adrien

Bonjour,

Merci pour cet article sur les balises open graph. Nous proposons un outil gratuit qui permets de visualiser et de générer le codes à intégrer directement sur son site web. Je pense que cet outils pourraient être utile pour vos lecteurs : https://www.scrivio.fr/ressources/outils-gratuits/open-graph

Répondre

Philippe
Philippe

Merci beaucoup pour cet article.

Répondre

Philippe
Philippe

Merci beaucoup pour cet article

Répondre

Maruba Exaucé.
Maruba Exaucé.

Merci pour l'article vraiment

Répondre

Valkiryvarnews
Valkiryvarnews

Salut comment garde une image sans la déforme avec css?

Répondre

Darty
Darty

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

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Je t'en prie Darty


Han Nim
Han Nim

Brillant. Merci beaucoup

Répondre
Bonjour
Bonjour

de rien Han


Joel Ambu
Joel Ambu

Magnifique article merci beaucoup.

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Je t'en prie @Joel


Recherche

Bonus Gratuit

50 conseils aux blogueurs débutants et futurs blogueurs

Un ebook écrit pour vous montrer tout ce qu'il faut pour devenir développeur web

Avatar Tychic Obanda

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