Pourquoi vos liens s'affichent mal sur WhatsApp et les réseaux sociaux, et comment y remédier

Un client envoie à un ami le lien d'un produit par WhatsApp. Au lieu d'une carte avec la photo et le nom, apparaissent votre logo pixelisé, l'image d'une bannière coupée en deux ou seulement l'adresse en bleu. C'est le bouche-à-oreille de votre boutique, et il arrive sous son plus mauvais jour.

La faute en revient rarement à WhatsApp. C'est que la page ne lui dit pas quelle image afficher, ou le lui dit mal.

Comment les réseaux décident quoi afficher

Quand quelqu'un colle un lien, l'application télécharge la page et cherche certaines balises dans le <head> : celles du protocole Open Graph, créé par Facebook et lu aujourd'hui par presque tous (WhatsApp, Facebook, LinkedIn, Telegram, Slack, Discord, Pinterest…). X/Twitter lit en plus ses propres balises twitter:, et s'il ne les trouve pas, il utilise celles d'Open Graph.

Les balises de base sont :

• og:title : le titre de la carte.
• og:description : le court texte en dessous.
• og:image : l'image. Avec une URL absolue et en HTTPS.
• og:url : l'adresse canonique de la page.
• og:type : le type (pour les produits, on utilise souvent product ou website).

Recommandées : og:image:width et og:image:height (elles aident l'image à s'afficher du premier coup), og:image:alt et twitter:card avec la valeur summary_large_image pour la grande carte.

La taille qui fonctionne partout

La dimension de référence est 1200 × 630 pixels (rapport d'environ 1,91:1). C'est celle que recommande Facebook pour le grand aperçu et celle qui s'adapte le mieux aux autres. Ce qui coince souvent :

• Des photos produit carrées : le réseau les rogne en haut et en bas, ou les affiche en vignette sur le côté.
• Des images trop petites : en dessous d'une certaine taille, les réseaux affichent une vignette ou rien du tout.
• Des images trop lourdes : WhatsApp en particulier peut ne pas afficher les images très volumineuses. Les garder légères (sous quelques centaines de Ko) évite les problèmes.
• Du texte collé aux bords : certaines applications rognent les marges. Laissez de l'air autour.

Pourquoi PrestaShop ne règle pas toujours le problème

• Beaucoup de thèmes n'impriment pas de balises Open Graph, ou seulement sur la page d'accueil.
• Certains impriment og:image avec l'image produit dans son format carré.
• Plusieurs modules impriment leurs propres balises, qui finissent en double, avec des images différentes. Le réseau retient la première qu'il trouve, qui n'est pas toujours la bonne.
• Les balises apparaissent à la fin du <head>, derrière beaucoup de code. Certaines applications ne lisent que le début de la page.
• Les catégories et les pages CMS n'ont pas d'image propre.

Le cache de chaque réseau : la raison pour laquelle « rien ne change »

Les réseaux enregistrent l'aperçu la première fois qu'un lien est partagé et le réutilisent pendant un certain temps. C'est pourquoi vous corrigez les balises et la carte continue de mal s'afficher. Comment forcer la mise à jour :

• Facebook : le Débogueur de partage (Sharing Debugger) montre ce qu'il lit et permet de récupérer à nouveau la page.
• LinkedIn : Post Inspector fait la même chose.
• WhatsApp : il n'a pas d'outil public. En pratique, testez l'URL en ajoutant un paramètre (par exemple ?v=2) pour vérifier que la nouvelle version est correcte ; le lien sans paramètre se mettra à jour avec le temps.
• Telegram : son bot @WebpageBot permet de demander la mise à jour de l'aperçu d'une URL.

Au-delà de la photo : une image qui fait vendre

Un aperçu n'a pas à se limiter à la photo du produit. Une image composée avec la photo, le nom, le prix et, le cas échéant, la remise, communique d'un coup d'œil ce que l'ami doit savoir pour cliquer. La condition est qu'elle soit à jour : une image avec un ancien prix inspire de la méfiance.

Check-list

1. Chaque fiche, catégorie et page CMS a son og:image, avec une URL absolue et en HTTPS.
2. L'image mesure 1200 × 630 et pèse peu.
3. Il n'y a qu'un seul jeu de balises Open Graph par page.
4. Les balises se trouvent au début du <head>.
5. og:title et og:description sont dans la langue de la page.
6. Vous avez passé trois URL dans le débogueur de Facebook et l'inspecteur de LinkedIn.
7. Vous avez essayé de partager par WhatsApp depuis un mobile.

Comment le résoudre dans PrestaShop

RKR Dynamic Image génère sur votre serveur, sans service externe, une image de 1200 × 630 pour chaque produit, catégorie et page CMS avec image, comprenant la photo, le nom, le prix au format de votre boutique, un badge de remise quand il y en a une (prix spécifiques compris) et les étoiles de notation si vous utilisez le module de commentaires produit de PrestaShop. L'image se met à jour automatiquement quand un prix change, se génère par langue et par boutique, et peut être conçue avec un éditeur visuel proposant 23 thèmes. Le module imprime les balises au début du <head> pour que WhatsApp les lise. Il fonctionne de PrestaShop 1.7.8 à 9.x.