Tu partages un lien sur LinkedIn et il s'affiche comme une URL nue, sans image. Sur WhatsApp, l'aperçu récupère un logo au hasard dans ton footer. Sur X, la carte n'apparaît carrément pas. Rien de tout ça n'est aléatoire : tout se joue dans une poignée de meta tags placés dans le <head> de ta page — et la plupart des sites en ratent au moins un.
Ce guide couvre les meta tags essentiels, le protocole Open Graph, les Twitter cards, les bonnes dimensions d'image, et comment déboguer tes aperçus plateforme par plateforme.
C'est quoi les meta tags, et pourquoi tes aperçus sociaux sont cassés ?
Les meta tags sont des bouts de HTML dans le <head> d'une page qui décrivent son contenu aux machines : moteurs de recherche, navigateurs et crawlers des réseaux sociaux. Quand tu colles un lien dans LinkedIn, X, Slack, Discord ou WhatsApp, un bot va chercher ta page, lit ces tags et construit la carte d'aperçu à partir d'eux.
Si les tags manquent, la plateforme improvise. Et elle improvise mal : elle prend la première <img> qu'elle trouve, tronque un paragraphe au hasard, ou n'affiche rien du tout. Un aperçu cassé peut faire chuter ton taux de clic de façon brutale — les gens scrollent devant les liens qui ressemblent à du spam.
Les tags de base indispensables
Avant même Open Graph, assure les fondamentaux. Chaque page a besoin de :
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titre de ta page — Nom de marque</title>
<meta name="description" content="Un résumé accrocheur en 150–160 caractères. C'est souvent ce que Google affiche dans les résultats.">
<link rel="canonical" href="https://exemple.com/ta-page">
</head>
<title>— l'élément SEO on-page le plus important. Reste sous ~60 caractères pour éviter la troncature dans Google.meta description— pas un facteur de ranking, mais c'est ta pub dans les résultats de recherche. Vise 150–160 caractères.viewport— sans lui, le rendu mobile casse et Google marque la page comme non mobile-friendly.canonical— indique aux moteurs quelle URL est la "vraie" quand le même contenu est accessible à plusieurs adresses (paramètres de tracking, http/https, slash final).
Tu peux prévisualiser le rendu de ton titre et de ta description dans Google avec l'outil SERP Preview — il montre la troncature au pixel près, desktop et mobile.
Le protocole Open Graph : les propriétés og:* expliquées
Open Graph a été créé par Facebook et c'est aujourd'hui le standard de facto lu par LinkedIn, WhatsApp, Slack, Discord, Telegram, iMessage et (partiellement) X. Les tags utilisent l'attribut property au lieu de name :
<meta property="og:title" content="Meta tags et Open Graph : le guide complet">
<meta property="og:description" content="Répare tes aperçus de liens sur LinkedIn, X et WhatsApp.">
<meta property="og:image" content="https://exemple.com/og/guide.png">
<meta property="og:url" content="https://exemple.com/blog/guide-meta-tags">
<meta property="og:type" content="article">
<meta property="og:site_name" content="OneKitTools">
Voici ce que fait chaque propriété et son niveau d'importance :
| Propriété | Rôle | Priorité |
|---|---|---|
og:title | Le titre de la carte d'aperçu | Obligatoire |
og:description | Le texte sous le titre (souvent tronqué ~200 car.) | Obligatoire |
og:image | L'image d'aperçu — le premier levier de clics | Obligatoire |
og:url | L'URL canonique de la page | Obligatoire |
og:type | website, article, product, video.other… | Recommandé |
og:site_name | Le nom de marque affiché sur la carte | Recommandé |
og:image:width / og:image:height | Permet au crawler d'afficher la carte avant de télécharger l'image | Recommandé |
og:image:alt | Texte d'accessibilité de l'image | Bonus |
og:locale | ex. fr_FR, en_US | Bonus |
Plutôt que d'écrire tout ça à la main, le Meta Tags Generator génère le bloc complet — tags de base, Open Graph et Twitter cards — depuis un simple formulaire, avec aperçu en direct pour chaque plateforme.
Dimensions de l'image OG : 1200×630, le chiffre magique
L'erreur la plus fréquente, c'est l'image. La spec sûre en 2026 :
- Taille : 1200×630 pixels (ratio 1,91:1) — le standard pour Facebook, LinkedIn, les grandes cartes X, Slack et Discord.
- Format : PNG ou JPEG. Le support de WebP et AVIF reste inégal selon les crawlers.
- Poids : reste sous ~1 Mo ; certains crawlers abandonnent sur les images lourdes.
- URL absolue :
og:imagedoit être une URLhttps://complète, pas un chemin relatif. - Éloigne le texte des bords : WhatsApp et iMessage recadrent en vignette quasi carrée, donc centre le contenu important.
Pas de designer sous la main ? L'OG Image Generator produit des images 1200×630 aux bonnes dimensions avec ton titre, tes couleurs et ton logo en quelques clics.
Les Twitter cards : les tags twitter:*
X (Twitter) lit Open Graph en fallback, mais ses propres tags te donnent le contrôle du format de la carte :
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Meta tags et Open Graph : le guide complet">
<meta name="twitter:description" content="Répare tes aperçus de liens partout.">
<meta name="twitter:image" content="https://exemple.com/og/guide.png">
<meta name="twitter:site" content="@tamarque">
Le choix clé, c'est twitter:card :
summary_large_image— image pleine largeur au-dessus du titre. À utiliser presque partout.summary— petite vignette carrée à côté du texte. Correct pour de la doc ou des pages utilitaires.
Note la différence d'attribut : les tags Twitter utilisent name=, Open Graph utilise property=. Les confondre est la cause classique du bug "mes tags sont là mais la carte ne s'affiche pas". Vérifie le rendu exact avec le Twitter Card Preview avant de publier.
Comment les plateformes cachent les aperçus (et comment forcer le rafraîchissement)
Tu as corrigé tes tags, repartagé le lien… et l'ancien aperçu cassé revient. C'est le cache. Chaque plateforme garde le premier aperçu scrapé, parfois pendant des semaines :
| Plateforme | Comportement du cache | Comment rafraîchir |
|---|---|---|
| ~7 jours | Post Inspector (linkedin.com/post-inspector) | |
| Jusqu'au re-scrape | Sharing Debugger → "Scrape Again" | |
| X | ~1 semaine | Re-fetch souvent au nouveau tweet ; pas d'outil de purge officiel |
| Agressif, par appareil | Ajoute ?v=2 à l'URL en contournement | |
| Slack | ~30 minutes | /collapse puis re-poste, ou attends |
| Discord | ~30 minutes | Attends, ou ajoute un paramètre d'URL |
Deux astuces pratiques :
- Versionne l'URL de ton image OG (
/og/guide.png?v=3). Une nouvelle URL contourne tous les caches d'un coup. - Débogue avant de partager. Le premier scrape finit souvent en cache, donc valide la page avant de la poster où que ce soit d'important.
Un workflow de débogage fiable
Quand un aperçu est cassé, déroule cette checklist dans l'ordre :
- Affiche le code source et confirme que les tags
og:*sont dans le HTML brut — pas injectés par du JavaScript côté client. La plupart des crawlers n'exécutent pas le JS : des tags ajoutés par React/Vue après le chargement sont invisibles pour eux. - Teste l'URL de l'image directement dans un navigateur. Un 403 (protection hotlink), une redirection ou un blocage robots.txt sur ton CDN tue l'aperçu.
- Passe l'URL dans un débogueur. L'OG Debugger va chercher ta page comme le ferait un crawler, liste tous les tags trouvés, signale ceux qui manquent ou sont malformés, et affiche la carte résultante pour chaque plateforme.
- Force le rafraîchissement du cache sur la plateforme cible avec le tableau ci-dessus.
- Re-teste sur une deuxième plateforme pour distinguer "mes tags sont faux" de "le cache de cette plateforme est périmé".
Répare tes aperçus de liens maintenant
Colle n'importe quelle URL dans l'OG Debugger pour voir exactement ce que LinkedIn, X, WhatsApp et Slack vont afficher — tags manquants signalés, dimensions d'image vérifiées, aperçus côte à côte. Sans compte, gratuitement.