Récemment j'ai eu besoin de configurer la preview d'un site qui s'affichait de manière affreuse sur les réseaux sociaux, que ce soit LinkedIn ou Messenger en passant par Twitter. Je m'attendais à devoir faire énormément de configuration mais en fait c'est très simple à faire ! 🤓
À noter que sans qu'on fasse rien sur nos sites, on aura une preview de celui-ci sur les réseaux sociaux. Malheureusement cette preview ne va pas forcément correspondre à ce qu'on veut, le rendu sera vite très basique, on aura pas un bon référencement non plus, en effet les métadonnées qu'on va ajouter pour les previews ont aussi un impact sur le référencement. On fait une pierre deux coups !
Open Graph Protocol
Là où j'ai été assez surpris c'est par la découverte d'Open Graph Protocol. Ce protocole est un ensemble de balise meta qu'on peut ajouter dans le header de notre site pour déclarativement indiqué ce qu'on veut afficher comme informations sur notre carte de preview : le titre, le type de contenu, l'image à prendre, l'url sur laquelle pointer, la description, etc.
À la base ce système a été créé chez Facebook puis s'est répandu à la concurrence avant d'être confié à l'Open Web Foundation. Maintenant il est largement utilisé par la majorité des acteurs du web donc pas besoin de faire une configuration spécifique pour chaque plateforme sur laquelle on veut contrôler l'affichage de la preview.
Exemple
Je ne vais pas détailler l'ensemble du protocole, mais plutôt vous donner un exemple concret de quoi indiquer pour avoir un rendu propre :
<html>
<head>
...
<meta property="og:title" content="European Travel Destinations" />
<meta property="og:type" content="article" />
<meta
property="og:image"
content="http://euro-travel-example.com/thumbnail.jpg"
/>
<meta
property="og:url"
content="http://euro-travel-example.com/index.htm"
/>
<meta
property="og:description"
content="Offering tour packages for individuals or groups."
/>
<meta property="og:site_name" content="European Travel, Inc." />
...
</head>
<body>
...
</body>
</html>
Si vous remplissez chacun de ces champs vous aurez une preview card propre partout ! Ou presque...
Pour Twitter
Twitter utilise aussi Open Graph Protocol mais pour certaines informations, il utilise ses propres tags… Ce n'est pas bien grave, mais on se retrouve à ajouter à minima trois tags pour avoir une vraie preview propre sur Twitter :
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@nytimes" />
<meta name="twitter:creator" content="@SarahMaslinNir" />
Tester le rendu
Le meilleur moyen de tester le rendu des previews est de directement créer un post sur les différentes plateformes mais certaines vont quand même proposer un outil pour tester nos rendus.
Quelques exemples de site/apps :
- Twitter proposait un outil en ligne, mais depuis quelques mois il ne fonctionne plus et on nous redirige vers la preview au moment de créer un tweet
- pour Facebook :
- côté Facebook, on peut tester via la preview au moment de la création d’un post, mais on peut aussi utiliser l’outil Sharing Debugger qui permet directement de valider les informations, voir une preview, et avoir des indications sur les informations qui manqueraient
- côté Messenger et Whatsapp, on peut tester via les sites/applications eux-mêmes
- côté LinkedIn on peut utiliser la preview au moment de la création de post ou l’outil Post inspector
Dans tous les cas, je vous conseille même si c'est long à faire, de valider si le rendu est bon à la fois sur les versions web desktop et mobile mais aussi sur les applications, car on a parfois des surprises. Par exemple au niveau des images certaines plateformes (comme Whatsapp) n'affichent pas les images si elles dépassent 300Ko !
Conclusion
C'est assez simple de configurer les previews sur les différentes plateformes, par contre il ne faut pas négliger les balises plus classiques comme title et description qui sont totalement standards et sans lesquels vous aurez un très mauvais référencement !
Sources :
- The Open Graph protocol
- The Essential Meta Tags for Social Media
- Facebook sharing debugger
- Twitter cards large image card
- Twitter cards tags
- LinkedIn Post Inspector
- Outils Google pour analyser les données structurées d'une page
Crédit photo : https://pixabay.com/photos/media-social-media-apps-998990/
Top comments (0)