Passer au contenu principal

Qu'est-ce qu'Open Graph ?

image

Définition​

Open Graph Protocol est un protocole de métadonnées développé par Facebook en 2010 qui contrôle comment les pages web sont affichées lorsqu'elles sont partagées sur les réseaux sociaux. En termes simples, ce sont des balises méta HTML qui prédéfinissent le titre, la description et l'image qui apparaissent lorsque vous partagez un lien de blog sur Facebook, KakaoTalk, LinkedIn, etc.

Avec Open Graph, vous pouvez transformer votre page web en un "objet" pour les réseaux sociaux. Par exemple, lorsque vous partagez un article de blog, au lieu d'afficher simplement une URL, une image miniature attrayante apparaît avec le titre et la description résumée dans un format de carte joliment conçu. Cela augmente considérablement les taux de clics et est devenu un élément central du marketing sur les réseaux sociaux.

Open Graph est implémenté avec des balises au format <meta property="og:xxx"> dans la section <head>. Bien qu'il ait commencé avec Facebook, il est maintenant adopté comme standard par la plupart des plateformes sociales, notamment Twitter (X), LinkedIn, Slack, KakaoTalk et Line. Sans Open Graph, les plateformes sociales extrairont arbitrairement le contenu de votre page, affichant potentiellement des images ou des textes non désirés.

Caractéristiques​

  • Optimisation des Réseaux Sociaux : Contrôlez précisément les titres, descriptions et images lors du partage de liens pour améliorer considérablement les taux de clics. Les recherches montrent que les liens avec des images Open Graph voient jusqu'à 200% d'engagement en plus.
  • Protocole Standard : Développé par Facebook mais maintenant un standard de facto de l'industrie pris en charge par presque toutes les plateformes sociales. Configurez-le une fois et il fonctionne sur plusieurs plateformes.
  • Implémentation Simple : Techniquement pas complexe car vous n'avez qu'à ajouter des balises méta à la section <head> HTML. Tout le monde peut facilement l'appliquer sans connaissances en programmation.
  • Outils de Débogage Disponibles : Facebook, LinkedIn et d'autres fournissent des outils de débogage officiels pour tester et prévisualiser les balises Open Graph.
  • Utile pour les Moteurs de Recherche : Les informations Open Graph sont également référencées par les moteurs de recherche, aidant indirectement au SEO. Particulièrement efficace pour l'optimisation de la recherche d'images.

Comment Utiliser​

Voici comment utiliser efficacement Open Graph.

Étape 1 : Ajouter les Balises Open Graph Requises Ajoutez des balises Open Graph de base à la section <head> de votre page web. Au minimum, vous devez inclure quatre balises : og:title, og:type, og:url et og:image. Ce sont les quatre éléments centraux d'Open Graph.

<head>
  <meta property="og:title" content="Guide Complet d'Optimisation SEO de Blog">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/seo-guide">
  <meta property="og:image" content="https://zero-coke.com/images/seo-thumbnail.jpg">
</head>

Étape 2 : Ajouter des Balises Optionnelles Ajoutez description, nom du site, locale, etc. pour fournir des informations plus riches. og:description est particulièrement important et doit contenir un texte convaincant qui encourage les clics.

<meta property="og:description" content="Méthodes d'optimisation SEO de blog étape par étape que même les débutants peuvent facilement suivre.">
<meta property="og:site_name" content="Blog Zero-Coke">
<meta property="og:locale" content="fr_FR">

Étape 3 : Optimisation de l'Image L'élément le plus important dans Open Graph est l'image. Les images miniatures déterminent la première impression, choisissez donc soigneusement. Facebook recommande 1200x630px, avec un minimum de 600x314px. Maintenez la taille du fichier en dessous de 8Mo.

<meta property="og:image" content="https://zero-coke.com/images/thumbnail.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Miniature du Guide d'Optimisation SEO">

Étape 4 : Balises Supplémentaires Spécifiques au Type de Contenu Pour les articles de blog (articles), vous pouvez fournir des informations supplémentaires telles que l'auteur, la date de publication et la section. Cela aide à afficher des informations plus riches dans les fils d'actualité.

<meta property="article:author" content="Jean Dupont">
<meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="Blog">
<meta property="article:tag" content="SEO">

Étape 5 : Déboguer et Tester Après avoir ajouté les balises, testez-les toujours. Entrez votre URL dans le Débogueur de Partage Facebook (https://developers.facebook.com/tools/debug/) pour prévisualiser comment Open Graph sera affiché. Corrigez immédiatement toute erreur.

Étape 6 : Actualiser le Cache Si vous avez modifié l'Open Graph d'une URL déjà partagée, vous devez actualiser le cache de la plateforme sociale. Cliquez sur le bouton "Scraper à nouveau" dans le Débogueur de Partage Facebook pour mettre à jour avec les dernières informations. Chaque plateforme fournit des outils similaires.

Exemples​

Exemple 1 : Open Graph de Base pour Article de Blog

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Que sont les Backlinks ? Guide pour Débutants SEO</title>

  <!-- Balises Open Graph de Base -->
  <meta property="og:title" content="Que sont les Backlinks ? Guide Complet pour Débutants SEO">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/what-is-backlink">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-guide.jpg">
  <meta property="og:description" content="Explique la définition, l'importance et les méthodes d'acquisition des backlinks d'une manière que même les débutants peuvent facilement comprendre.">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="fr_FR">

  <!-- Balises Supplémentaires Liées à l'Article -->
  <meta property="article:author" content="Jean Dupont">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:modified_time" content="2024-03-23T14:30:00+09:00">
  <meta property="article:section" content="SEO">
  <meta property="article:tag" content="Backlinks">
  <meta property="article:tag" content="SEO">
  <meta property="article:tag" content="Optimisation pour les Moteurs de Recherche">
</head>
<body>
  <!-- Contenu de la Page -->
</body>
</html>

Exemple 2 : Open Graph avec Optimisation d'Image

<head>
  <!-- Informations de Base -->
  <meta property="og:title" content="Tendances du Marketing Digital 2024">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/marketing-trends-2024">

  <!-- Informations Détaillées sur l'Image -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:secure_url" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Infographie des Tendances du Marketing Digital 2024">

  <!-- Images Multiples (La Plateforme Choisit) -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-square.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="1200">

  <!-- Informations Supplémentaires -->
  <meta property="og:description" content="Analyse les tendances du marketing digital 2024 à surveiller, notamment l'IA, le marketing d'influence et le contenu au format court.">
  <meta property="og:site_name" content="Marketing Insights">
</head>

Exemple 3 : Page Produit E-commerce

<head>
  <!-- Informations de Base du Produit -->
  <meta property="og:title" content="Écouteurs Bluetooth Sans Fil Premium - XYZ-2000">
  <meta property="og:type" content="product">
  <meta property="og:url" content="https://shop.example.com/products/xyz-2000">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-main.jpg">
  <meta property="og:description" content="Écouteurs sans fil de haute qualité avec réduction de bruit. Jusqu'à 30 heures de lecture.">

  <!-- Informations Spécifiques au Produit -->
  <meta property="product:price:amount" content="129.00">
  <meta property="product:price:currency" content="EUR">
  <meta property="product:availability" content="in stock">
  <meta property="product:condition" content="new">
  <meta property="product:brand" content="TechSound">
  <meta property="product:retailer_item_id" content="XYZ2000-BLK">

  <!-- Images Supplémentaires -->
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-side.jpg">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-case.jpg">
</head>

Exemple 4 : Contenu Vidéo

<head>
  <!-- Informations de Base de la Vidéo -->
  <meta property="og:title" content="Guide Complet de Monétisation de Blog (Dernière 2024)">
  <meta property="og:type" content="video.other">
  <meta property="og:url" content="https://example.com/video/blog-monetization">
  <meta property="og:image" content="https://example.com/video/thumbnails/blog-monetization.jpg">
  <meta property="og:description" content="Gagnez 1000€/mois avec votre blog. Nous vous montrons tout, d'AdSense au marketing d'affiliation et à la vente de produits numériques.">

  <!-- Informations Spécifiques à la Vidéo -->
  <meta property="og:video" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:secure_url" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:type" content="video/mp4">
  <meta property="og:video:width" content="1280">
  <meta property="og:video:height" content="720">
  <meta property="video:duration" content="1200">
  <meta property="video:release_date" content="2024-03-23T09:00:00+09:00">

  <!-- URL d'Intégration YouTube -->
  <meta property="og:video" content="https://www.youtube.com/embed/abc123xyz">
  <meta property="og:video:type" content="text/html">
</head>

Exemple 5 : Page d'Accueil du Site Web

<head>
  <!-- Informations Globales du Site Web -->
  <meta property="og:title" content="Zero-Coke - Média Spécialiste de l'Optimisation SEO de Blog">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://zero-coke.com">
  <meta property="og:image" content="https://zero-coke.com/images/og-homepage.jpg">
  <meta property="og:description" content="Nous partageons des connaissances expertes sur le SEO de blog, l'optimisation pour les moteurs de recherche et le développement web. Guides pratiques pour tous, des débutants aux experts.">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="fr_FR">
  <meta property="og:locale:alternate" content="en_US">

  <!-- Profils de Réseaux Sociaux -->
  <meta property="og:see_also" content="https://twitter.com/zerocoke">
  <meta property="og:see_also" content="https://www.facebook.com/zerocoke">
  <meta property="og:see_also" content="https://www.instagram.com/zerocoke">
</head>

Avantages et Inconvénients​

Avantages​

  • Taux de Clics Considérablement Améliorés : Les liens avec des miniatures attrayantes et des descriptions ont des taux de clics 2-3 fois plus élevés que les liens en texte seul. Le moyen le plus efficace d'augmenter le trafic sur les réseaux sociaux.

  • Image de Marque Améliorée : L'utilisation d'images et de descriptions Open Graph cohérentes construit une image de marque professionnelle et digne de confiance. Les miniatures bien conçues augmentent la notoriété de la marque.

  • Polyvalence et Compatibilité : Configurez-le une fois et il s'applique automatiquement à la plupart des plateformes, notamment Facebook, Twitter, LinkedIn, KakaoTalk et Slack. Pas besoin de configuration séparée pour chaque plateforme.

Inconvénients​

  • Charge de Création d'Images : Nécessite des ressources de conception car vous devez créer des images Open Graph appropriées pour chaque page. Peut être un travail considérable si vous avez de nombreux articles de blog.

  • Problèmes de Cache : Les plateformes sociales mettent en cache les informations Open Graph, donc les modifications ne se reflètent pas immédiatement. Le cache doit être actualisé manuellement, et les liens déjà partagés peuvent ne pas se mettre à jour.

  • Différences de Plateforme : Bien que la plupart des plateformes prennent en charge Open Graph, certaines préfèrent leurs propres balises. Twitter, par exemple, priorise les Twitter Cards, donc un travail supplémentaire peut être nécessaire pour une optimisation parfaite.

FAQ​

Q : Que se passe-t-il sans Open Graph ? R : Les liens peuvent toujours être partagés sans balises Open Graph, mais les plateformes sociales extrairont arbitrairement des informations de la page. Cela peut entraîner l'affichage d'images ou de textes non désirés, ou l'absence totale de miniature. Cela réduit considérablement les taux de clics.

Q : Quelle est la taille optimale d'image Open Graph ? R : Facebook recommande 1200x630px (rapport d'aspect 1,91:1). La taille minimale est de 600x314px ; des tailles plus petites dégraderont la qualité. Fournir également des images carrées (1200x1200px) s'affiche mieux sur diverses plateformes. La taille du fichier doit être inférieure à 8Mo, et les formats JPG ou PNG sont préférés.

Q : Quelle est la différence entre og:title et la balise title HTML ? R : La balise HTML <title> est le titre affiché dans les onglets du navigateur et les résultats de recherche, tandis que og:title est le titre affiché lors du partage sur les réseaux sociaux. Ils peuvent être identiques, mais utiliser des titres plus courts et plus convaincants pour les réseaux sociaux peut être plus efficace. Exemple : <title> est "Que sont les Backlinks ? Définition, Caractéristiques, Méthodes d'Acquisition Guide Complet | Zero-Coke", tandis que og:title est "Comment Booster les Classements du Blog avec les Backlinks".

Q : J'ai changé Open Graph mais ça ne se met pas à jour. Que faire ? R : Les plateformes sociales mettent en cache les informations Open Graph pour des raisons de performance. Cliquez sur le bouton "Scraper à nouveau" dans le Débogueur de Partage Facebook (https://developers.facebook.com/tools/debug/) pour actualiser le cache. LinkedIn utilise Post Inspector (https://www.linkedin.com/post-inspector/), et Twitter a Card Validator. Les publications déjà partagées ne se mettront pas à jour, donc les modifications importantes peuvent nécessiter un nouveau partage.