L’article en bref
- Les balises Open Graph permettent de contrôler l’apparence de vos contenus lors des partages sur les réseaux sociaux.
- Créé par Facebook en 2010, ce protocole est adopté par la quasi totalité des réseaux sociaux.
- Les cinq balises principales : og:title, og:type, og:image, og:url et og:description
Créé par Facebook en 2010. Il est aujourd’hui adopté par presque tous les réseaux sociaux comme Facebook, LinkedIn, Twitter, Pinterest et Instagram. Son objectif ? Contrôler précisément l’apparence de vos contenus lorsqu’ils sont partagés sur ces plateformes.
Qu’est-ce que le protocole Open Graph ?
Le protocole Open Graph est un ensemble de balise permettant d’avoir une meilleure gestion du partage de vos articles sur les réseaux sociaux. En effet, avant l’apparition de cette balise, il n’y avait pas de possibilité de gérer l’apparence de vos contenus une fois partagés (images, titres, descriptions, etc.).
Les 5 balises Open Graph essentielles
1. og:title:
Cette balise vous permettra de contrôler le titre de vos partages.
exemple : <meta property= »og:title » content= »le titre de votre article » />
💡Astuces : Essayez de rédiger quelque chose d’accrocheur et limitez-vous à 65 caractères pour éviter les troncatures.
2. og:type:
Cette balise indique la nature de votre page (site web, article, vidéo…).
Exemple : <meta property= »og:type » content= »website » />
3. og:image:
Cette balise correspondra à l’image qui sera mise en avant sur chacun des réseaux sociaux.
Exemple : <meta property= »og:image » content= »http://www.votresite.com/image.jpg » />
💡Astuces : Utilisez une résolution de 1200×627 pixels.
4. og:url:
Cette balise indique l’adresse exacte du contenu partagé. Ici, il s’agira de reprendre l’url exacte de votre page.
Exemple : <meta property= »og:url » content= »http://www.votresite.com/page/ » />
5. og:description:
Pour finir, la balise description servira à afficher un court texte explicatif sous le titre du partage.
Exemple : <meta property= »og:description » content= »Description incitative qui donne envie de cliquer » />
💡Astuces : Rendez là attractive et Limitez-vous entre 150 et 200 caractères grand maximum pour ne pas être tronqué par des « … » comme ci-dessus.
Quel impact sur votre trafic et SEO ?
Le fait de personnaliser ses balises Open graph aura un double impact sur votre trafic global, qui influencera également votre référecnement naturel. Voici selon moi les points les plus importants :
- Meilleur taux de clic = plus de trafic entrant et des signaux utilisateurs en plus
- Plus de partages = plus de signaux sociaux positifs pour Google
- Un impact et un rendu de meilleure qualité = Image de marque renforcée et qualitative
Comment implémenter le protocole Open Graph sur votre site web ?
WordPress
Utilisez des extensions comme RankMath ou Yoast SEO, permettant de personnaliser de manière dynamique ou manuel les balises Open Graph de vos pages.
Sur Shopify
Sur Shopify, vous pourrez également vous aider de plugins payants comme : Better Open Graph Tags ou placer manuellement au sein de votre fichier theme.liquid les balises dans votre section head.
Exemple : <meta property= »og:title » content= »{{ page.title }} »/>, qui permettra de rendre dynamique votre og:title à partir du titre de votre page.
Sur un site codé manuellement
Insérez les balises META dans la section <head> de chaque page.
<head>
<meta property="og:title" content="Titre pour les réseaux sociaux">
<meta property="og:description" content="Description attrayante">
<meta property="og:image" content="https://www.votresite.com/image.jpg">
<meta property="og:url" content="https://www.votresite.com/page/">
<meta property="og:type" content="article">
</head>
