Draftcamp

Aperçu Open Graph

Vois comment une URL s'affiche lors du partage, et à quelle balise chaque plateforme revient réellement

Entre une URL pour voir sa carte

Nous récupérons la page, résolvons les balises comme le fait une plateforme, et t’affichons la carte ainsi que ce qui manque.

Ce que lit vraiment une plateforme

Quand un lien est collé dans Slack, LinkedIn, X ou iMessage, la plateforme récupère la page et crée une carte à partir de ses balises meta. Elle n’exécute jamais ton JavaScript ni ne voit ton CSS - elle lit uniquement les balises dans le head.

La chaîne de secours

La plupart des plateformes résolvent dans le même ordre, et cet aperçu le suit :

  • Titre - twitter:title, puis og:title, puis <title>
  • Description - twitter:description, puis og:description, puis la meta description
  • Image - twitter:image, puis og:image, puis rien

C’est pourquoi dupliquer chaque balise Open Graph en balise Twitter est souvent inutile. La seule qui mérite vraiment d’être définie séparément est twitter:card, car elle choisit entre l’image large et la petite vignette.

Les trois erreurs qui causent la plupart des cartes cassées

  • Un og:image relatif. Le crawler n’a pas de contexte de page pour le résoudre. URL HTTPS absolue ou rien.
  • Une image inaccessible. Derrière une authentification, bloquée par robots.txt, ou servie par un hôte qui refuse les user agents inconnus.
  • Cache trop agressif. Tu as corrigé les balises mais l’ancienne carte reste visible pendant des jours. Facebook Sharing Debugger et LinkedIn Post Inspector forcent une nouvelle analyse ; le cache de X doit juste expirer.

Pas une fonctionnalité SEO

Aucune de ces balises n’influence le classement. Elles déterminent si un lien donne envie d’être cliqué quand quelqu’un le partage – et un lien affiché en boîte grise avec juste l’URL est partagé et cliqué nettement moins.

Pour écrire les balises dès le départ, utilise le générateur de balises meta à la place.

Questions fréquentes

Pourquoi mon lien n'affiche-t-il pas d'image lorsqu'il est partagé ?
Presque toujours parce que og:image est manquant, est un chemin relatif au lieu d'une URL HTTPS absolue, ou pointe vers quelque chose que la plateforme ne peut pas récupérer - derrière une authentification, bloqué par robots.txt, ou trop volumineux. Le crawler qui récupère ta carte n'a pas de contexte de page, donc les chemins relatifs ne peuvent pas être résolus.
Quelle taille d'image dois-je utiliser ?
1200 par 630 pixels, moins de 5 Mo. Les plateformes recadrent différemment, donc éloigne texte et visages des bords. En dessous de 600 par 315, la plupart des plateformes affichent une petite vignette carrée, quel que soit le paramètre twitter:card.
J'ai mis à jour les balises mais l'ancienne carte s'affiche encore.
Les plateformes mettent en cache de façon agressive, souvent pendant plusieurs jours. Utilise Facebook Sharing Debugger et LinkedIn Post Inspector pour forcer un nouveau scan. X n'a pas d'outil public équivalent, donc son cache expire uniquement naturellement.
Ai-je besoin des balises twitter: si j'ai Open Graph ?
La plupart du temps non - X utilise Open Graph pour le titre, la description et l'image. L'exception est twitter:card, qui choisit entre la grande image et la petite vignette. Cette balise change vraiment la carte et mérite d'être définie explicitement.
Est-ce que tout cela impacte le SEO ?
Pas directement. Les balises Open Graph ne sont pas des facteurs de classement. Elles influencent l'apparence d'un lien partagé, ce qui impacte le trafic et les signaux secondaires qui en découlent - et un lien qui s'affiche comme un simple carré gris dans Slack est beaucoup moins partagé.