Vidéo: Optimiser son site WordPress avec Facebook Opengraph 2024
Facebook est le premier site de médias sociaux au monde. Si vous souhaitez optimiser les médias sociaux, vous devez connaître le protocole Open Graph de Facebook. Le protocole Open Graph est une norme de balisage sémantique introduite par Facebook en 2010 et maintenant largement acceptée. Certaines personnes considèrent Open Graph comme étant en concurrence avec Schema. org, mais en réalité, les deux standards sont complémentaires.
Il est possible d'implémenter à la fois le schéma. microdonnées org et le balisage Open Graph. Les normes ne sont pas en conflit.
Ces deux normes ont le même objectif: mieux décrire les informations sur une page Web. Les principales différences peuvent être résumées de la façon suivante:
-
Les métadonnées Open Graph décrivent la page dans son ensemble.
-
Schéma. Les microformats d'organisation décrivent des éléments spécifiques sur la page.
Le balisage Open Graph contient moins d'informations que le schéma. org -microdata le fait mais est plus facile à implémenter. Pour rendre votre page Web compatible Graph-Open, vous devez ajouter des métadonnées de base à votre page. Comme les métadonnées traditionnelles, les métadonnées Open Graph vont dans l'étiquette de la page Web.
Dans Open Graph-speak, une page Web est un objet graphique ouvert .
Open Graph a quatre propriétés obligatoires:
-
og: title : Le titre de la page telle que vous voulez qu'elle apparaisse dans n'importe quel système qui lit les données Open Graph.
Il est préférable de garder la balise de titre plus courte que 88 caractères. Bien que vous puissiez ajouter plus de caractères, Facebook n'affiche que les 88 premiers.
-
og: tapez : Le type de votre objet. Les types sont spécifiés par le protocole et sont assez nombreux.
type est une propriété intéressante, car elle contrôle où le partage apparaît dans l'intérêt de l'utilisateur sur Facebook. Si, par exemple, vous définissez le type de l'objet sur "film" et que l'utilisateur partage l'objet, le partage apparaît comme l'un des intérêts de l'utilisateur sous l'en-tête Films dans le profil Facebook de la personne.
Cochez ici pour connaître tous les différents types d'objets.
-
og: image : L'URL de l'image que vous voulez représenter la page. L'image
est un tag important, car une bonne image peut aider à la diffusion de votre contenu. Utilisez cette balise pour contrôler ce qui apparaît lorsque votre contenu est partagé et assurez-vous qu'il est optimisé pour s'intégrer parfaitement dans Facebook. (Un rapport de 1. 9: 1 fonctionne mieux, gardez-le au-dessus de 400 × 209 pixels.)
Ne laissez pas cette balise vide. Si vous le faites, Facebook tirera simplement une autre image de la page, ce qui pourrait entraîner des résultats inappropriés.
-
og: url : L'URL de la page.Le contenu de l'étiquette d'URL détermine où l'utilisateur va quand il clique sur le bouton Partager.
Certains des éléments requis ont des attributs optionnels supplémentaires, et vous pouvez fournir plusieurs valeurs pour certains d'entre eux si vous le désirez.
Les options incluent
-
og: audio : Si vous voulez qu'un fichier audio accompagne l'objet, utilisez cette balise et indiquez l'URL du fichier.
-
og: description : Utilisez cette balise pour fournir une description en une ou deux phrases de l'objet.
Facebook n'affiche que les 300 premiers caractères de votre description.
-
og: determiner : Cette balise vous permet de spécifier le mot qui précède le titre de l'objet dans une phrase - typiquement, a, an, ou le.
-
og: locale : Cette balise spécifie les paramètres régionaux de la page - en d'autres termes, la langue de la page. Si votre contenu est en anglais américain, par exemple, la valeur de ce tag serait en_us.
-
og: locale: alternate : Si la page est offerte en plusieurs langues, vous pouvez tous les lister en utilisant cette balise.
-
og: site_name : Si la page Web fait partie d'un site plus grand portant un nom différent, utilisez cette balise pour spécifier le nom du site.
-
og: video : Si vous avez un fichier vidéo à inclure, utilisez cette balise pour spécifier l'URL du fichier.
L'utilisation des étiquettes est plus facile à saisir avec un exemple. Dans l'exemple suivant, vous voyez comment vous pouvez implémenter le balisage Open Graph pour une page Web sur un livre intitulé HowTo: WordPress 4:
200x300. png "> Ecrit par Ric Shreves et publié par water & stone digital. Disponible maintenant sur Amazon. com, Google Play Store et sur ce site. Publié dans les versions ePub, Mobi et PDF. ">
Vos balises Open Graph vont dans le tag de la page. Notez que si vous utilisez un système de gestion de contenu populaire (tel que WordPress, Joomla! Ou Drupal), les plug-ins géreront cette tâche pour vous afin que vous n'ayez pas à écrire de code.
Le résultat de l'implémentation des métadonnées Open Graph consiste à contrôler ce qui s'affiche lorsque quelqu'un partage le contenu de la page Web. Si quelqu'un partage la page avec le balisage indiqué dans le code précédent, voici à quoi cela ressemble.
Exemple de sortie de partage Facebook.Si vous n'êtes pas sûr d'avoir effectué correctement votre balisage Open Graph, testez-le avec le logiciel Open Graph Debugger de Facebook.
Bien que les métadonnées Open Graph soient la clé de la réussite de votre contenu sur Facebook, elles sont également utilisées par plusieurs autres sites sociaux importants, notamment Twitter, Pinterest, LinkedIn et Google+.
Le balisage Open Graph fonctionne-t-il? C'est certainement le cas! Site e-book Kobo affirme avoir réalisé une augmentation de 50% du trafic de Facebook après la mise en place des tags Open Graph.