Les réseaux sociaux peuvent être un important moteur de trafic vers votre site Web, il est donc dans votre intérêt d’optimiser votre présence sur eux, y compris vos balises Open Graph.

Vous avez rempli votre bio de mots-clés et vous utilisez tous les bons hashtags dans vos messages. Mais savez-vous à quoi ressemble un post lorsque d’autres personnes le partagent depuis votre site Web sur leurs propres profils ?

Parfois ça tourne mal, et le post en question sera si mal fichu qu’il ne suscitera aucun engagement. Pourtant vous pouvez dire aux réseaux sociaux comme Facebook, Twitter, Pinterest et LinkedIn quelles informations afficher lorsque vous ou quelqu’un d’autre partagez un lien de votre site.

Tout comme les moteurs de recherche visitent votre site Web et recherchent les données dont ils ont besoin pour afficher votre site dans les résultats de recherche, les réseaux sociaux font pareil, en cherchant leurs propres balises (cela peut être Open Graph, Schema.org, Twitter Cards).

L’Open graph est une façon de définir quelles informations vont se placer dans l’aperçu de votre lien, leur nature, et comment ces informations doivent être placées.

Par exemple, vous pouvez spécifier l’image ou la vidéo qui apparaît, le titre et la description qui doivent être affichés, et même l’emplacement ou la langue.

En facilitant aux réseaux sociaux la recherche de vos informations et en vous assurant qu’ils les présentent correctement, votre site Web pourrait bénéficier d’une augmentation significative du taux de clics vers votre site web. Par exemple, Tumblr a augmenté son trafic de 250 % après son implémentation de l’Open Graph.

Mais à quoi ressemblent ces balises Open Graph ?

Les 5 propriétés indispensables pour chaque page sont :

1. og :title : Semblable à la balise de titre HTML classique où vous indiquez aux moteurs de recherche le titre de votre page, le og :title est le titre de votre objet comme il devrait apparaître sur les réseaux sociaux. Votre og :title doit être clair sans mentionner le nom de domaine lui-même, avec un maximum de 95 caractères.

Exemple : <meta property="og :title" content="Open Graph : X astuces pour générer plus de trafic sur les réseaux sociaux" />

2. og :type : Qu’est-ce que ce lien contient ? Un article, une vidéo, une recette de cuisine ? Selon le type que vous spécifiez, d’autres propriétés peuvent également être requises.

Exemple : <meta property="og :type" content="website" />

3. og :image : C’est ici que vous spécifiez une URL d’image pour qu’une image soit toujours affichée à côté du contenu que vous partagez. Vos messages se distinguent ainsi des mises à jour de statut qui ne contiennent que du texte dans les Timelines encombrées des gens. Facebook recommande d’utiliser des images d’au moins 1200 x 630 pixels jusqu’à un maximum de 8 Mo et d’utiliser au minimum des images de 600 x 315 pixels.

Exemple : <meta property="og :image" content="https ://www.codeur.com/blog/wp-content/uploads/2019/10/seo-robots-txt-compressor-700x525.jpg" />

4. og :url : C’est l’URL de votre page ou article (seul le domaine apparaît dans le résultat, donc ne vous inquiétez pas si l’URL complète n’apparaît pas). Cette balise peut sembler non pertinente, mais il est important de la compléter car il se peut que vous ayez parfois plus d’une URL pour le même contenu, par exemple si vous utilisez des codes UTM. Utilisez cette balise pour présenter une URL « propre », qui ne contient pas d’ID ou de paramètres de session, pour vous assurer que tous les partages sont attribués à une URL plutôt qu’à plusieurs URL.

Exemple : <meta property="og :url" content="https ://www.codeur.com/blog/comment-tracker-url-utm-google-analytics/" />

5. og :description : N’oubliez pas non plus d’ajouter une description. Cette balise est facultative, mais elle en dit plus aux utilisateurs de réseaux sociaux sur votre page ou votre message pour encourager un clic. Essayez d’écrire quelque chose d’environ deux phrases et de le rendre vraiment pertinent par rapport au contenu de la page ou du message.

Exemple : <meta property="og :description" content=" Un aspect crucial du marketing est d'être capable de mesurer le succès d’un produit, d’une campagne publicitaire, d’un réseau social en particulier. Découvrez comment en utilisant les codes UTM dans vos liens." />

Les autres balises Open Graph

Il existe d’autres balises OG qui peuvent être pertinentes pour votre contenu, comme le nom de votre site :

Exemple : <meta property="og :nom_du_site" content="Codeur"/>>

Vous trouverez une liste en suivant ce lien.

Comment implémenter les balises Open Graph

Il y a plusieurs façons d’ajouter des balises Open Graph à votre site Web :

Avant de commencer à implémenter quoi que ce soit, vous pouvez vérifier s’il y a déjà des balises sur votre site en cherchant des balises comme « og :type » dans votre code source, ou en utilisant l’outil de débogage de Facebook. Facebook ne crawlera votre page Web qu’une seule fois, donc si vous avez apporté des modifications aux anciennes données Open Graph, vous devrez demander manuellement à Facebook de crawler à nouveau votre contenu, ce que vous pouvez faire en utilisant leur débogueur.

Si vous avez besoin d’aide pour mettre en place les balises Open Graph, contactez gratuitement un développeur sur Codeur.com.