Les balises Open Graph permettent de faire que vos pages soient des objets enrichis (rich object) afin d’en faciliter leur partage sur WhatsApp, Facebook,Twitter, Linked in, Google +,… ou sur les autres réseaux sociaux. Très facile à mettre en place, elles ont pour but et avantage de donner un aperçu succinct du contenu de la page lors de partage sur un média social.
Intérêt du balisage
Le contenu de ces balises doit avant tout être conçu pour l’utilisateur et pour avoir un bon taux de clic. Vous devez focaliser votre rédaction sur l’utilisateur. La taille de l’image par exemple dépend de l’endroit où vous allez publier. Si vous publiez sur whatsapp une image carrée est parfaire tandis que sur facebook recommande une image d’une dimension minimale idéale de 1 200 x 630 ou plus grande mais avec ce rapport
Comment implémenter Open Graph
Implémenter opengraph est très facile, il suffit d’avoir les bonnes informations et de lui transmettre correctement. Le bout de code suivant est un exemple qui est celui que j’utilise sur ce site. Il utilise donc les balises les plus courantes pour afficher des articles
<!-- A NOTER: le changement de la balise head !!!!--->
<!-- ... --->
<meta property="og:title" content="Allez plus loins avec Laravel">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.crabcake.ch/blog/laravel-snippet-utile">
<meta property="og:locale" content="fr_FR">
<meta property="og:locale:alternate" content="fr_CH">
<meta property="og:description" content="Divers snippets Laravel comme masquer la technologie, paramètre optionnel dans une route, créer des middlewares.">
<meta property="og:image" content="http://www.crabcake.ch/blog/img/14/laravel_fonction_utiles.jpg">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="800">
<meta property="og:image:type" content="image/jpeg">Différentes balises
Les balises disponibles sont d’une part trop nombreuse pour être détaillé (music, video, image, article, book, profile, websit) ici et d’autre part suffisamment bien détaillées sur d’autre site pour ne pas avoir à les reprendre. Le site officiel ogp.me est bien sur très inintéressant, mais la section opengraph de facebook est plus accessible et met à disposition énormément d’exemples très utiles.
Erreur de Validation
Le validateur de FaceBook n’est pas souple et à besoin d’un code HTML propre. Si vous ne l’avez pas déjà fait, assurez-vous avant d’utiliser leur outil de test que votre code respecte les standards W3C. Cette petite analyse en plus d’être un quasi-indispensable, peut vous permettre de gagner beaucoup de temps…
Erreur possible pour les Suisses
la valeur donnée fr_ch pour la propriété og:locale:locale n’a pas pu être analysée en tant que type enum
Si vous êtes confronté à l’erreur ci-dessus, c’est uniquement parce que Facebbok ne reconnais pas la locale fr_CH, vous devez donc utiliser une autre valeur. La liste des locales possibles est accessible en cliquant-ici!