Intégrer le balisage social sur mon site avec les balises Open Graph

Nous avons vu dans le tutoriel précédent, comment ajouter les micro données à notre site web pour améliorer notre position et le taux de clic (CTR) de notre annonce dans les SERPs (Résultats de recherche Google). Nous allons voir maintenant les balises Open Graph, ce sont des balises qui permettent cette fois d'ajouter des informations à votre site mais ces balises vont être utilisés par les réseaux sociaux pour afficher lors d'un partage par exemple, le bon titre, la bonne description et la bonne image.

Présentation du protocole Open Graph

Le protocole OpenGraph a été crée par Facebook, afin de permettre à vos pages web de s'intégrer parfaitement dans les réseaux sociaux. En effet, le développeur va avec ce protocole pourvoir facilement faire comprendre à facebook, twitter etc...ou est le titre de sa page, l'image, etc...
On va retrouver plusieurs informations en Open Graph :
- Les informations obligatoires : vous allez définir pour votre page, le titre, le type de contenu, l'image et l'url.
- Les informations optionnelles : la description de la page, la langue, le nom du site, etc...

Les balises open graph vont être définies avec 2 propriétés :
- property : quelle propriété vous voulez définir ?
- content : quelle valeur vous voulez définir pour cette propriété ?

Certains objets ont besoin de plusieurs balises pour être défini comme par exemple les images pour lesquels vous allez devoir définir le type, la longeur, la largeur, etc...

Comment intégrer les balises Open Graph à notre site

Maintenant que nous avons vu la théorie sur les balises Open Graph, il est temps de mettre en pratique !
Commençons par définir les balises obligatoires, à savoir le titre, le type de contenu, l'image et l'url de votre page.
Mettez donc ce code dans la partie "head" de votre page pour insérer les balises OpenGraph (og) pour le type, le titre et l'url :

<meta property="og:type" content="article" />
<meta property="og:title" content="Mettre en place les données structurées sur son site - Pierre FAY" />
<meta property="og:url" content="https://www.pierrefay.fr/premier-sur-google/mettre-en-place-donnees-structurees-site.html" />

Insérez également les 3 lignes qui définissent l'image (son url, la longeur et la largeur) :

<meta property="og:image" content="https://www.pierrefay.com/static/dist/images/logo_grand.jpg" />
<meta property="og:image:width" content="394" />
<meta property="og:image:height" content="200" />

Nous pouvons également ajouter certains attributs comme le nom de notre site ou encore la description :

<meta property="og:site_name" content="Pierre FAY" />
<meta property="og:description" content="Dans cet article de la formation sur le référencement, nous allons voir comment mettre en place les données structurées sur son site pour améliorer son SEO" />

Vous pouvez trouver ici plus de documentation concernant ce protocole. Vous pourrez y trouver les balises qui s'adapteront à votre contenu.
Questions sur cette leçon
Pas de questions pour cette leçon. Soyez le premier !

Vous devez etre connecté pour demander de l'aide sur une leçon.