northstage

← Tous les guides

Guide

Ton lien montre le mauvais aperçu ? Cinq vérifications pour les aperçus de liens

Quand tu partages un lien, les messageries et réseaux sociaux affichent une carte d'aperçu. Cinq vérifications si elle montre la mauvaise image, le mauvais titre ou rien.

Dernière mise à jour:

La réponse courte

Quand un lien partagé montre la mauvaise image, le mauvais titre ou aucun aperçu, les balises Open Graph de la page sont absentes, fausses ou en cache. Vérifie cinq choses. D'abord, regarde ce que voient les autres en collant le lien dans un outil d'aperçu ou une conversation. Ensuite, assure-toi que la page a ses propres balises og:title, og:description, og:image et og:url. Puis utilise une image avec une adresse https complète, ouverte à tous sans connexion, en 1200 sur 630 pixels. Quatrièmement, trouve d'où viennent les balises : une valeur par défaut du modèle, une page provisoire de l'hébergeur ou un script qui s'exécute trop tard sont les causes habituelles. Enfin, actualise la copie enregistrée par la plateforme, car corriger la page ne change pas l'ancien aperçu tout seul.

À voir en moins d’une minute

Une courte vidéo sur le problème et sa solution. Les sous-titres sont dans la vidéo.

Pour qui est ce guide

Quelqu’un a partagé un lien vers ton site, ta boutique, ta page de réservation ou ta page d’état, et la carte d’aperçu dans la conversation ou sur le réseau social montre le logo d’une autre entreprise, une vieille image, une simple adresse ou rien du tout. Dans le navigateur, la page elle-même s’affiche bien. Ce guide explique pourquoi les aperçus se trompent et te donne cinq vérifications. Si le lien appartient à un site que tu ne gères pas, la dernière partie explique comment le signaler pour qu’il soit corrigé vite.

Comment un aperçu est fabriqué

Quand tu colles un lien, l’application n’affiche pas ta page. Un petit programme récupère le HTML de la page et lit quelques lignes de son en-tête, les balises Open Graph. Le titre, la description et l’image de la carte viennent de ces lignes et de nulle part ailleurs. Si elles manquent, sont fausses ou copiées d’un modèle, la carte montre exactement cela. L’application garde une copie du résultat, c’est pourquoi une correction n’apparaît souvent pas tout de suite.

Les cinq vérifications

  1. Regarde ce que voient les autres. Colle le lien dans une conversation avec toi-même ou utilise un outil d’aperçu : le Sharing Debugger pour Facebook et Instagram, le Post Inspector pour LinkedIn. Ils montrent le titre, la description et l’image trouvés et listent les problèmes. Regarde la carte, pas ton navigateur : ce que tu vois sur la page n’est pas ce que lit le programme qui la récupère.

  2. Donne à chaque page ses propres balises. Le jeu de base se compose de og:title, og:description, og:image et og:url, plus og:type pour le genre de page. Elles se trouvent dans le <head> de la page :

    <meta property="og:title" content="Horaires et réservation">
    <meta property="og:description" content="Réserve un appel gratuit de 30 minutes.">
    <meta property="og:image" content="https://example.com/img/reservation.png">
    <meta property="og:url" content="https://example.com/reservation/">
    

    Un seul jeu pour tout le site signifie que chaque page affiche la même carte. C’est acceptable pour un petit site, mais une page d’état, une page de réservation et une fiche produit méritent la leur.

  3. Utilise une image que le programme peut ouvrir. Prends une adresse complète commençant par https://, pas un chemin comme /img/carte.png. L’image doit s’ouvrir sans connexion, sans bandeau de cookies ni redirection, et ne pas être bloquée pour les robots. Une taille de 1200 sur 630 pixels, un rapport d’environ 1,91 pour 1, convient bien aux grands réseaux ; le minimum de Meta est de 200 sur 200 pixels. Garde le fichier léger, quelques centaines de kilo-octets suffisent. Mets peu de texte dans l’image, car elle s’affiche en petit.

  4. Trouve d’où viennent les balises. Quand la carte montre une image qui n’est pas la tienne, les balises viennent d’un endroit que tu n’as pas réglé. Les causes habituelles :

    • un thème, un modèle ou un créateur de site met une image par défaut, souvent la sienne
    • l’hébergeur ou le service montre une page provisoire aux programmes, par exemple quand l’adresse pointe vers le mauvais site ou un projet inachevé
    • les balises sont ajoutées par JavaScript après le chargement de la page. Beaucoup de programmes d’aperçu n’exécutent pas les scripts et ne les voient jamais. Les balises doivent figurer dans le HTML envoyé par le serveur. Pour vérifier, ouvre le code source de la page (pas l’inspecteur) et cherche og:image.
  5. Actualise la copie enregistrée. Facebook et LinkedIn gardent ce qu’ils ont récupéré. Après la correction, repasse le lien dans le débogueur ou l’inspecteur et utilise le bouton qui le récupère à nouveau. Certaines messageries gardent leur propre copie sans outil pour l’effacer. Ajouter un paramètre sans conséquence au lien, comme ?v=2, fait traiter le lien comme un nouveau. Les messages déjà envoyés gardent leur ancienne carte.

Un autotest de deux minutes

  • Colle ton lien le plus important dans un outil d’aperçu : titre, description et image sont-ils justes ?
  • Affiche le code source et cherche og:image : est-il là, avec une adresse https:// complète ?
  • Ouvre l’adresse de l’image dans une fenêtre privée : se charge-t-elle sans connexion ?
  • L’image reste-t-elle nette et lisible en petit, et est-elle bien la tienne ?
  • As-tu fait récupérer le lien à nouveau après la dernière modification ?

Si le lien est sur le site de quelqu’un d’autre

Quand le mauvais aperçu est sur le site d’un fournisseur ou d’un partenaire, tu ne peux pas le corriger toi-même, mais tu peux rendre le signalement facile à traiter. Envoie le lien, une capture de la mauvaise carte et le résultat du débogueur ou de l’inspecteur. Dis laquelle des cinq vérifications échoue, par exemple « la page n’a pas de og:image, donc la carte montre une image sans rapport ». Avec ces trois éléments, leur équipe reproduit le problème en quelques minutes. Il aide aussi d’indiquer l’application où tu l’as vu.

Quand demander de l’aide

Demande à quelqu’un d’expérimenté si :

  • tu as modifié les balises et l’ancienne carte apparaît encore après l’actualisation
  • tu gères beaucoup de pages ou une boutique et il te faut une carte par produit
  • les balises sont justes dans le code source mais le débogueur signale des erreurs que tu ne sais pas lire
  • tu veux faire vérifier l’aperçu, les titres et les images avec le reste du site

Cela fait aussi partie de la liste de contrôle avant la mise en ligne. Nous la parcourons avec toi lors d’un appel vidéo gratuit de 30 minutes : réserver un appel.

Envie d’un coup de main ?

Tu peux tout faire toi-même. Si tu préfères me confier la tâche, réserve l’appel vidéo gratuit de 30 minutes et apporte l’adresse de la page avec le formulaire et ce que tu as constaté lors de ton test. Ou écris-moi simplement.