×

OpenGraph et le SEO sur les réseaux sociaux

IL Y A 9 ans 12 mars 2015

Depuis plusieurs années maintenant, les réseaux sociaux ont prit une place à part entière dans nos vies. En effet, Facebook, le réseau social numéro 1 dans le monde, compte 1,393 milliard d'utilisateurs (chiffres de janvier 2015), et selon une étude menée par IDC en 2013, nous allons consulter notre fil d'actu en moyenne 14 fois par jour.

Avec des chiffres aussi imposants, les réseaux sociaux sont devenus une énorme pizza de la communication dont tout le monde veut avoir sa part.

Je vais donc vous donner toutes les astuces pour pouvoir partager vos liens et promouvoir votre contenu de la meilleure manière qu'il soit sur Facebook, Twitter et Google+.

OpenGraph, Facebook, Google+ et Pinterest

OpenGraph est un protocole créer par Facebook pour permettre à n'importe quelle page web de devenir un objet dans le graphe social de Facebook.

Donc en résumé, le protocole OpenGraph permet la mise en page de votre contenu sur Facebook, pour passer de ça :

Partage sur Facebook sans OpenGraph
Partage sur Facebook sans OpenGraph

à ça :

Partage sur Facebook avec OpenGraph
Partage sur Facebook avec OpenGraph

Comme vous pouvez le voir, au lieu que Facebook cherche lui-même dans votre page des images à partager, vous pouvez lui en spécifier une. Mais vous pouvez également définir un titre, une description et d'autres informations concernant votre page web.

Tout d'abord, nous devons indiquer à Facebook que nous utilisons le protocole OpenGraph, pour ce faire, définissez votre balise html comme ceci :

<html prefix="og: http://ogp.me/ns#">

Puis, dans votre balise head, définissez les meta obligatoires. C'est à dire le type de contenu, le titre, l'url et l'image.

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

<meta property="og:title" content="OpenGraph et le SEO sur les réseaux sociaux - cbrplx.io" />

<meta property="og:url" content="http://cbrplx.io/articles/opengraph-et-le-seo-sur-les-reseaux-sociaux-11" />

<meta property="og:image" content="http://cbrplx.io/assets/11/11.jpg" />

Puis, je vous conseille d'ajouter une dernière propriété optionnelle, mais que je considère comme nécessaire, la meta description :

<meta property="og:description" content="Awesome guy with an awesome website !" />

Voila ! Vous venez d'optimiser l'affichage de votre page web sur Facebook ! Et, bonne nouvelle pour vous, Google+ et Pinterest utilisent également le protocole OpenGraph, alors nous venons de faire d'une pierre trois coups.

Pour plus d'informations concernant le partage de contenu sur Pinterest, je vous conseille de vous rendre la documentation et de tester le rendu de vos liens avec leur Pins validator.

OpenGraph sur Google+
OpenGraph sur Google+

Mais l'OpenGraph ne se limite pas à ces 5 propriétés, et heureusement. Si vous avez du contenu vidéo à partager, du contenu audio, comme un album par exemple, ou encore un livre, redéfinissez votre propriété type et ajoutez des informations plus pertinentes.

<meta property="og:type" content="video" />

<meta property="og:type" content="audio.album" />

<meta property="og:type" content="book" />

Pour plus de documentation sur toutes les propriétés disponibles, rendez-vous sur le site officiel.
Enfin, pour tester et mettre à jour votre OpenGraph, vous pouvez utiliser le très bon outil de Facebook : Open Graph Object Debugger

Twitter cards

En se plaçant comme principal concurrent de Facebook, Twitter a dû, à ses débuts, développer son propre système de partage de lien, et gérer leur aspect. Ainsi sont nées les Twitter Cards.

Partage sur Twitter sans Card
Partage sur Twitter sans Card

Ici aussi, l'aspect est géré en fonction des informations placées dans les balises metas spécifiques. Et en premier par la balise twitter:card :

<meta name="twitter:card content="summary_large_image">

Cette première balise désigne la mise en page générale de la card. Ici, summary_large_image, comme son nom l'indique, affichera un rapide résumé du lien en dessous d'une image qui prendra toute la largeur de la card.

D'autres aspects sont disponibles, comme gallery, product ou encore summary, qui produira le même effet que sumary_large_image, mais sans l'image. Logique me direz-vous.

Et c'est maintenant que nous instaurons nos balises meta qui décrivent le contenu de ce que nous voulons partager, et qui seront nécessaires pour une bonne mise en page de votre lien.

<meta name="twitter:site content="@CBRPLX">

<meta name="twitter:title content="Nouveautés et astuces du web - Articles, blog et projets - cbrplx.io">

<meta name="twitter:description content="Awesome guy with an awesome website !">

<meta name="twitter:creator content="@CBRPLX">

<meta name="twitter:image:src content="http://cbrplx.io/dist/images/share.jpg">

Le nom de ces balises parlent d'elles mêmes, je ne pense pas avoir besoin de les détailler, si ce n'est twitter:site et twitter:creator. Elles correspondent au nom d'utilisateur Twitter du propriétaire du site, et du créateur du contenu. Pour moi, ces deux balises valent @CBRPLX.

Partage sur Twitter avec Card
Partage sur Twitter avec Card

A noter que depuis le passage de OpenGraph en protocole public, Twitter a prévu un fallback sur les balises OG. Donc, si vous ne voulez pas implémenter toutes les balises Twitter (je vous le conseille tout de même), vous n'avez qu'à déclarez les deux meta requises par Twitter :

<meta name="twitter:card content="summary_large_image">

<meta name="twitter:site content="@CBRPLX">

Pour plus d'informations, vous pouvez vous rendre sur la documentation officielle de Twitter qui vous aidera à choisir la card qui correspond le plus à votre contenu et votre public.

Et, comme Facebook et Pinterest, Twitter a son validateur de card, à vous d'en user et d'en abuser.

Pensez à demander la validation de votre card, puisque si elle n'est pas whitelistée, elle ne fonctionnera pas.

Et le référencement dans tout ça ?

En plus d'augmenter votre visibilité sur les réseaux sociaux, et d'attirer plus de visiteurs et de clients potentiels, Google repère les balises OpenGraph sur les sites web et l'utilise dans son algorithme. De quoi gratter quelques places dans les résultats de recherche Google !

En somme, peu de travail pour beaucoup de retombées positives, alors qu'attendez-vous ?

Autres articles :