Open Graph est un protocole créé par Facebook qui a révolutionné la façon dont les réseaux sociaux interagissent avec les sites Web. Il joue un rôle crucial dans la stratégie de référencement naturel et de marketing digital pour les entreprises. Cet article vous explique tout ce que vous devez savoir sur l’Open Graph, son fonctionnement, ses avantages et comment l’intégrer dans votre site Web.
Qu’est-ce que l’Open Graph?
L’Open Graph Protocol (OGP) est un ensemble de balises meta qui permettent d’améliorer la façon dont les pages Web sont partagées et interagissent avec les réseaux sociaux, en particulier Facebook. Il s’inspire du Dublin Core, des Microformats et du RDFa, et permet aux moteurs de recherche de mieux comprendre le contenu d’une page Web. Les balises Open Graph fournissent des informations spécifiques sur le titre, la description, l’image et l’URL d’une page, ce qui facilite leur partage sur les réseaux sociaux.
Pourquoi utiliser l’Open Graph?
L’Open Graph offre plusieurs avantages, notamment :
- Amélioration de l’expérience utilisateur: Grâce aux balises Open Graph, les réseaux sociaux peuvent afficher le bon titre, la bonne description et la bonne image lorsqu’un utilisateur partage une page Web. Cela rend le partage plus attrayant et incite les utilisateurs à cliquer sur les liens.
- Augmentation du trafic et des conversions: L’utilisation des balises Open Graph peut générer un taux de clics plus élevé sur les réseaux sociaux, ce qui se traduit par une augmentation du trafic et des conversions sur votre site Web.
- Amélioration du référencement naturel: Bien que l’Open Graph n’affecte pas directement le SEO, il contribue à améliorer la réputation et l’autorité d’un site Web. Les moteurs de recherche tiennent compte des liens sociaux et de la réputation de l’auteur pour déterminer la pertinence et l’autorité d’un site Web.
Comment fonctionne l’Open Graph Protocol (OGP)?
L’OGP permet aux pages Web de se comporter comme des pages Facebook. Lorsqu’un utilisateur se connecte à un plugin social, tel que le bouton « J’aime », il crée un lien vers cette page, qui apparaît sur son fil d’actualités Facebook. Les balises Open Graph obligatoires sont les suivantes :
- og:title: Le titre de la page
- og:type: Le type d’objet contenu dans la page (article, vidéo, musique)
- og:description: Une description courte de la page
- og:url: L’URL canonique de la page
- og:image: L’image à afficher lors du partage
- og:site_name: Le nom global du site internet
Comment intégrer les balises Open Graph dans votre site Web?
Pour ajouter les balises Open Graph à votre site Web, vous devez :
- Ajouter le namespace suivant au-dessus de la balise <head> : <html xmlns:og= »http://ogp.me/ns# »>
- Placer les balises Open Graph requises sous la balise <head>
Si vous utilisez WordPress, vous pouvez installer le plugin Yoast
SEO pour faciliter l’intégration des balises Open Graph. Voici comment procéder :
- Connectez-vous à l’interface d’administration de votre site WordPress (/wp-admin) et accédez à l’onglet SEO dans la barre latérale gauche.
- Sélectionnez « Réseaux Sociaux » et remplissez les champs requis pour Facebook, Twitter et Google+ (Google utilise également l’Open Graph pour son réseau social).
- Activez les métadonnées Open Graph et renseignez les balises Open Graph pour chaque article ou page de votre site Web.
Vous pouvez également utiliser le plugin « Open Graph for Facebook, Google+ and Twitter Card Tags » pour insérer automatiquement les balises Open Graph et les tags de la Twitter Card.
Exemples de balises Open Graph
og:locale
Cette balise permet de spécifier la langue et la région de votre contenu. Elle est utile pour les sites multilingues ou qui ciblent plusieurs régions. La valeur doit être sous la forme « langue_TERRITOIRE », par exemple « fr_FR » pour le français (France).
Exemple :
<meta property="og:locale" content="fr_FR" />og:video
Cette balise est utilisée pour indiquer l’URL d’une vidéo associée à votre contenu. Elle est souvent utilisée en combinaison avec og:type= »video ».
Exemple :
<meta property="og:video" content="https://www.example.com/videos/open-graph-tutorial.mp4" />
og:audio
Cette balise permet d’indiquer l’URL d’un fichier audio associé à votre contenu. Elle peut être utilisée pour les podcasts, les livres audio ou les chansons.
Exemple :
<meta property="og:audio" content="https://www.example.com/podcasts/episode-1.mp3" />
og:updated_time
Cette balise indique la date et l’heure de la dernière mise à jour de votre contenu. Cette information peut être utile pour les moteurs de recherche et les réseaux sociaux afin de savoir si le contenu est à jour.
Exemple :
<meta property="og:updated_time" content="2023-03-15T12:00:00+00:00" />
og:see_also
Cette balise peut être utilisée pour indiquer des URL de pages liées à votre contenu. Elle est utile pour suggérer aux réseaux sociaux d’autres pages pertinentes à partager ou à afficher à côté de votre contenu.
Exemple :
<meta property="og:see_also" content="https://www.example.com/blog/seo-tips" />
<meta property="og:see_also" content="https://www.example.com/blog/social-media-marketing" />
og:price:amount et og:price:currency
Ces balises sont utilisées pour indiquer le prix d’un produit ou d’un service. Elles peuvent être utiles pour les sites de commerce électronique qui souhaitent afficher les informations de prix lors du partage de leurs produits sur les réseaux sociaux.
Exemple :
<meta property="og:price:amount" content="99.99" />
<meta property="og:price:currency" content="EUR" />
og:availability
Cette balise est utilisée pour indiquer la disponibilité d’un produit ou d’un service, par exemple « en stock » ou « en rupture de stock ». Elle peut être utile pour informer les utilisateurs de la disponibilité d’un produit lorsqu’ils le partagent sur les réseaux sociaux.
Exemple :
<meta property="og:availability" content="in_stock" />
og:rating
Cette balise est utilisée pour indiquer une note ou une évaluation pour un contenu, un produit ou un service. Elle peut être utile pour partager des avis et des évaluations sur les réseaux sociaux.
Exemple :
<meta property="og:rating" content="4.5" />
og:latitude et og:longitude
Ces balises sont utilisées pour indiquer les coordonnées géographiques d’un lieu associé à votre contenu. Elles sont utiles pour les sites liés au tourisme, aux événements ou aux entreprises locales, afin de faciliter la localisation des utilisateurs.
Exemple :
<meta property="og:latitude" content="48.8566" />
<meta property="og:longitude" content="2.3522" />
og:street-address, og:locality, og:region et og:postal-code
Ces balises sont utilisées pour fournir des informations d’adresse spécifiques à un lieu associé à votre contenu. Elles sont utiles pour les entreprises locales qui souhaitent partager leur adresse sur les réseaux sociaux.
Exemple :
<meta property="og:street-address" content="123 Rue de l'Exemple" />
<meta property="og:locality" content="Paris" />
<meta property="og:region" content="Île-de-France" />
<meta property="og:postal-code" content="75001" />
og:email, og:phone_number et og:fax_number
Ces balises permettent de partager des informations de contact associées à votre contenu. Elles sont utiles pour les entreprises ou les professionnels qui souhaitent faciliter la prise de contact avec eux.
Exemple :
<meta property="og:email" content="contact@example.com" />
<meta property="og:phone_number" content="+33 1 23 45 67 89" />
<meta property="og:fax_number" content="+33 1 23 45 67 88" />
og:isbn et og:upc
Ces balises sont utilisées pour indiquer des identifiants uniques pour les produits, tels que les numéros ISBN pour les livres ou les codes UPC pour les biens de consommation. Elles sont utiles pour partager des informations spécifiques sur les produits sur les réseaux sociaux.
Exemple :
<meta property="og:isbn" content="978-1234567890" />
<meta property="og:upc" content="123456789012" />
En utilisant ces balises Open Graph supplémentaires, vous pouvez fournir des informations plus précises et détaillées sur votre contenu, ce qui peut améliorer la présentation et l’engagement de votre contenu lorsqu’il est partagé sur les réseaux sociaux. N’oubliez pas de toujours vérifier la documentation officielle d’Open Graph pour vous assurer que vous utilisez les balises appropriées et les bonnes pratiques.
V. Exemples d’utilisation de l’Open Graph
Voici quelques exemples d’utilisation des balises Open Graph pour différents types de contenu :
Pour un article de blog :
<meta property="og:title" content="Le guide ultime de l'Open Graph" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.example.com/blog/open-graph-guide" />
<meta property="og:image" content="https://www.example.com/images/og-guide.jpg" />
<meta property="og:description" content="Découvrez tout ce que vous devez savoir sur l'Open Graph et comment l'utiliser pour améliorer votre stratégie de marketing digital." />
<meta property="og:site_name" content="Example.com" />
Pour une vidéo :
<meta property="og:title" content="Tutoriel sur l'intégration de l'Open Graph" />
<meta property="og:type" content="video" />
<meta property="og:url" content="https://www.example.com/videos/open-graph-tutorial" />
<meta property="og:image" content="https://www.example.com/images/og-tutorial-thumbnail.jpg" />
<meta property="og:description" content="Apprenez comment intégrer l'Open Graph dans votre site Web grâce à ce tutoriel vidéo." />
<meta property="og:site_name" content="Example.com" />
Conclusion
L’Open Graph est un outil essentiel pour améliorer le partage de vos pages Web sur les réseaux sociaux et augmenter leur visibilité. En renseignant correctement les balises Open Graph et en les intégrant à votre site Web, vous pouvez optimiser votre stratégie de marketing digital et de référencement naturel. N’oubliez pas de vérifier que les balises sont correctement intégrées en utilisant des outils tels que l’Open Graph Check.
