{"id":27994,"date":"2019-11-14T10:50:34","date_gmt":"2019-11-14T09:50:34","guid":{"rendered":"https:\/\/www.codeur.com\/blog\/?p=27994"},"modified":"2025-09-10T15:02:59","modified_gmt":"2025-09-10T13:02:59","slug":"integrer-open-graph-trafic-reseaux-sociaux","status":"publish","type":"post","link":"https:\/\/www.codeur.com\/blog\/integrer-open-graph-trafic-reseaux-sociaux\/","title":{"rendered":"Comment int\u00e9grer Open Graph pour g\u00e9n\u00e9rer plus de trafic sur les r\u00e9seaux sociaux"},"content":{"rendered":"

Les r\u00e9seaux sociaux peuvent \u00eatre un important moteur de trafic vers votre site Web, il est donc dans votre int\u00e9r\u00eat d’optimiser votre pr\u00e9sence sur eux, y compris vos balises Open Graph.
\nVous avez rempli votre bio de mots-cl\u00e9s et vous utilisez tous les bons hashtags dans vos messages. Mais savez-vous \u00e0 quoi ressemble un post lorsque d’autres personnes le partagent depuis votre site Web sur leurs propres profils ?
\nParfois \u00e7a tourne mal, et le post en question sera si mal fichu qu\u2019il ne suscitera aucun engagement. Pourtant vous pouvez dire aux r\u00e9seaux sociaux comme Facebook, Twitter, Pinterest et LinkedIn<\/a> quelles informations afficher lorsque vous ou quelqu’un d’autre partagez un lien de votre site.
\nTout comme les moteurs de recherche visitent votre site Web et recherchent les donn\u00e9es dont ils ont besoin pour afficher votre site dans les r\u00e9sultats de recherche, les r\u00e9seaux sociaux font pareil, en cherchant leurs propres balises (cela peut \u00eatre Open Graph, Schema.org, Twitter Cards).
\nL\u2019Open graph est une fa\u00e7on de d\u00e9finir quelles informations vont se placer dans l\u2019aper\u00e7u de votre lien, leur nature, et comment ces informations doivent \u00eatre plac\u00e9es.
\nPar exemple, vous pouvez sp\u00e9cifier l’image ou la vid\u00e9o qui appara\u00eet, le titre et la description qui doivent \u00eatre affich\u00e9s, et m\u00eame l’emplacement ou la langue.
\nEn facilitant aux r\u00e9seaux sociaux la recherche de vos informations et en vous assurant qu\u2019ils les pr\u00e9sentent correctement, votre site Web pourrait b\u00e9n\u00e9ficier d’une augmentation significative du taux de clics vers votre site web. Par exemple, Tumblr a augment\u00e9 son trafic de 250% apr\u00e8s son impl\u00e9mentation de l\u2019Open Graph.<\/p>\n

<\/h2>\n

Mais \u00e0 quoi ressemblent ces balises Open Graph ?<\/h2>\n

Les 5 propri\u00e9t\u00e9s indispensables pour chaque page sont :
\n1. og:title : Semblable \u00e0 la balise de titre HTML classique o\u00f9 vous indiquez aux moteurs de recherche le titre de votre page, le og:title est le titre de votre objet comme il devrait appara\u00eetre sur les r\u00e9seaux sociaux. Votre og:title doit \u00eatre clair sans mentionner le nom de domaine lui-m\u00eame, avec un maximum de 95 caract\u00e8res.
\nExemple : <meta property=\"og:title\" content=\"Open Graph : X astuces pour g\u00e9n\u00e9rer plus de trafic sur les r\u00e9seaux sociaux\" \/><\/code>
\n2. og:type : Qu\u2019est-ce que ce lien contient ? Un article, une vid\u00e9o, une recette de cuisine ? Selon le type que vous sp\u00e9cifiez, d’autres propri\u00e9t\u00e9s peuvent \u00e9galement \u00eatre requises.
\nExemple : <meta property=\"og:type\" content=\"website\" \/><\/code>
\n3. og:image : C’est ici que vous sp\u00e9cifiez une URL d’image pour qu’une image soit toujours affich\u00e9e \u00e0 c\u00f4t\u00e9 du contenu que vous partagez. Vos messages se distinguent ainsi des mises \u00e0 jour de statut qui ne contiennent que du texte dans les Timelines encombr\u00e9es des gens. Facebook recommande d’utiliser des images d’au moins 1200 x 630 pixels jusqu’\u00e0 un maximum de 8 Mo et d’utiliser au minimum des images de 600 x 315 pixels.
\nExemple : <meta property=\"og:image\" content=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/10\/seo-robots-txt-compressor-700x525.jpg\" \/><\/code>
\n4. og:url : C’est l’URL de votre page ou article (seul le domaine appara\u00eet dans le r\u00e9sultat, donc ne vous inqui\u00e9tez pas si l’URL compl\u00e8te n’appara\u00eet pas). Cette balise peut sembler non pertinente, mais il est important de la compl\u00e9ter car il se peut que vous ayez parfois plus d’une URL pour le m\u00eame contenu, par exemple si vous utilisez des codes UTM<\/a>. Utilisez cette balise pour pr\u00e9senter une URL \u00ab\u00a0propre\u00a0\u00bb, qui ne contient pas d’ID ou de param\u00e8tres de session, pour vous assurer que tous les partages sont attribu\u00e9s \u00e0 une URL plut\u00f4t qu’\u00e0 plusieurs URL.
\nExemple : <meta property=\"og:url\" content=\"https:\/\/www.codeur.com\/blog\/comment-tracker-url-utm-google-analytics\/<\/a>\" \/><\/em><\/code>
\n5. og:description : N’oubliez pas non plus d’ajouter une description. Cette balise est facultative, mais elle en dit plus aux utilisateurs de r\u00e9seaux sociaux sur votre page ou votre message pour encourager un clic. Essayez d’\u00e9crire quelque chose d’environ deux phrases et de le rendre vraiment pertinent par rapport au contenu de la page ou du message.
\nExemple : <meta property=\"og:description\" content=\" Un aspect crucial du marketing est d'\u00eatre capable de mesurer le succ\u00e8s d\u2019un produit, d\u2019une campagne publicitaire, d\u2019un r\u00e9seau social en particulier. D\u00e9couvrez comment en utilisant les codes UTM dans vos liens.\" \/><\/code><\/p>\n

Les autres balises Open Graph<\/h2>\n

Il existe d’autres balises OG qui peuvent \u00eatre pertinentes pour votre contenu, comme le nom de votre site :
\nExemple : <meta property=\"og:nom_du_site\" content=\"Codeur\"\/>><\/code>
\nVous trouverez une liste en suivant ce lien<\/a>.<\/p>\n

Comment impl\u00e9menter les balises Open Graph<\/h2>\n

Il y a plusieurs fa\u00e7ons d’ajouter des balises Open Graph \u00e0 votre site Web :<\/p>\n