Dans cet article, je vous montre comment avoir un bel affichage lorsque vous partagez votre site sur Facebook (comme l'image ci-dessous).

Pour ce faire, rien de compliqué, il suffit d'ajouter quelques balises html, mais encore faut-il savoir lesquelles ...

Les balises open graph

Vous êtes peut-être déjà familier avec les balises <meta> pour optimiser votre site sur la page de résultat de Google (aussi appelée SERP = search engine response page). Pour Facebook, c'est le même principe, sauf que nous allons utiliser des balises appelées "open graph" .

Elles se placent également dans la balise <head> de votre page sous cette forme :

Vous le voyez, leur structure est identique à celle des balises <meta> classiques. La différence, c'est que Facebook va d'abord checker si vous avez ces balises og et va compenser les balises manquantes par vos meta classiques ou par le contenu dans votre <body>.

Pensez donc à mettre un minimum les balises sur la capture d'écran ci-dessus. Ainsi, vous serez sur d'avoir un beau rendu sur Facebook mais aussi sur les autres réseaux sociaux. Ça fonctionne également lorsque vous partagez votre page par message, comme ici :

Mise à jour de l'affichage

Attention, il peut arriver que Facebook ne se mette pas directement à jour. Si c'est le cas, vous devez vous rendre sur l'espace développeur à cette adresse :
https://developers.facebook.com/tools/debug/sharing/

Entrez ensuite l'url de votre page et appuyez sur débuguer :

(à noter que vous devez avoir partagé au moins une fois l'url du site pour que le debug opère correctement)

Vous aurez alors le rendu actuel de votre page ainsi que le contenu des balises og :

Pour mettre à jour, rien de plus simple, vous cliquez sur "Re-collecter".


Voilà, vous pouvez maintenant mettre à jour vos pages pour les partager sur tous vos réseaux !