Que sont les balises meta et les balises Open Graph ?
Les balises meta sont de courtes lignes de HTML placées dans le <head> d’une page, qui décrivent la page aux machines plutôt qu’aux personnes. Les moteurs de recherche lisent le <title> et la meta description pour les résultats de recherche. Les réseaux sociaux et les messageries lisent les balises Open Graph (og:title, og:description, og:image) pour construire la carte d’aperçu que l’on voit quand quelqu’un partage une URL, et X lit aussi ses propres balises twitter:.
Un générateur de balises meta les écrit toutes à partir de quelques champs, pour que vous n’ayez pas à retenir la syntaxe exacte. Celui-ci montre aussi l’apparence du lien sur sept plateformes et peut vérifier le HTML d’une page existante pour repérer les balises manquantes ou incorrectes.
Comment générer des balises meta et vérifier les aperçus de liens
Générer les balises
- Titre de la page. Le compteur affiche les caractères et la largeur approximative en pixels par rapport à la limite d’environ 580 px de Google sur ordinateur, avec un avertissement quand le titre risque d’être coupé ou est trop court.
- Description. Le compteur avertit au-delà de 160 caractères et en dessous de 70.
- URL de la page (utilisée pour le lien canonique et
og:url), URL de l’image de partage (1200 x 630, en https absolu) et Texte alternatif de l’image. - Nom du site et Type : website, article, product, profile, video.other, music.song ou book.
- Type de carte X (Grande image ou Petit carré) et votre Identifiant X.
- Couleur du thème, Langue et région (par exemple
fr_FR,en_US,en_IN) et Robots (index/noindex, follow/nofollow). - Vérifiez les Aperçus de liens à droite. Utilisez les pastilles pour tout afficher (Tous) ou seulement Google, Facebook, X, LinkedIn, WhatsApp, Slack ou iMessage.
- Cliquez sur Copier les balises et collez le bloc dans le
<head>de votre page.
Vérifier mon HTML
- Ouvrez votre page en ligne, affichez le code source (Ctrl+U, ou Cmd+Option+U sur Mac), copiez tout et collez-le dans l’onglet Vérifier mon HTML. Essayer un exemple vous montre le fonctionnement.
- Lisez le score (« x vérifications réussies sur y ») et la liste : chaque balise est marquée Trouvé, Vérifier ou Manquant, avec une correction courte.
- Les aperçus montrent alors ce qu’afficherait la page collée. Cliquez sur Modifier ces balises dans le générateur pour les charger dans le formulaire, les corriger et copier une série propre.
Référence des balises meta : longueurs et tailles
| Balise | Utilisée par | Recommandation |
|---|---|---|
<title> | Google, onglet du navigateur, solution de repli pour les partages | Environ 50-60 caractères ; Google tronque selon la largeur (environ 580 px sur ordinateur) |
meta name="description" | Extrait Google, solution de repli pour les partages | Environ 120-155 caractères ; peut être réécrite par Google |
link rel="canonical" | Moteurs de recherche | L’URL principale unique de la page, en absolu |
og:title, og:description | Facebook, LinkedIn, WhatsApp, Slack, iMessage et la plupart des apps | Identiques au titre et à la description, sauf si vous voulez une version propre au partage |
og:image | Tous les aperçus de liens | 1200 x 630 px (1,91:1), JPG ou PNG, URL https absolue, poids raisonnable (quelques centaines de Ko se chargent vite) |
og:image:alt | Lecteurs d’écran dans certaines apps | Une courte description de l’image |
og:type, og:site_name, og:locale | Réseaux sociaux | Généralement website ou article ; le nom de votre marque ; par exemple fr_FR |
twitter:card | X | summary_large_image pour une carte large, summary pour un petit carré |
meta name="robots" | Moteurs de recherche | Laissez index, follow sauf si la page doit rester hors des résultats |
meta name="theme-color" | Navigateurs mobiles | Teinte la barre du navigateur sur certains téléphones |
Le bloc généré inclut aussi meta charset et meta viewport, dont toute page a besoin. Les limites et règles d’affichage des plateformes changent : considérez les nombres de caractères comme des repères au moment de la rédaction.
Qui a besoin d’un générateur de balises meta
- Les sites de petites entreprises faits à la main ou sur un hébergeur simple, où personne n’a ajouté de balises de partage et où les liens s’affichent comme de simples URL dans WhatsApp.
- Les blogueurs qui rédigent un titre et une image adaptés au partage pour chaque article.
- Les développeurs qui veulent un bloc head correct et prêt à copier pour une landing page ou un projet perso.
- Les marketeurs qui vérifient une page de campagne avant l’envoi d’un e-mail ou d’une publicité, pour que l’aperçu n’affiche pas la mauvaise image.
- Les créateurs qui lancent une page de formation ou de produit et veulent qu’elle s’affiche correctement quand leurs fans la partagent en story Instagram, sur X ou sur LinkedIn.
Conseils et erreurs fréquentes avec les balises meta
- Utilisez des URL d’image absolues en https.
/images/og.jpgouhttp://échouent souvent ; le vérificateur signale les deux. - Gardez le texte important au centre de l’image. WhatsApp et certaines apps recadrent en carré ou en vignette plus petite. Créez-en une avec le générateur d’image OG.
- Écrivez un titre et une description uniques pour chaque page. Des doublons sur tout un site rendent chaque résultat identique.
- Placez le mot-clé principal au début du titre, mais écrivez pour des humains ; les titres bourrés de mots-clés sont réécrits.
- Ne laissez pas un noindex actif par erreur après le lancement ; le vérificateur vous prévient s’il en trouve un.
- Attendez-vous à du cache. Après une modification des balises, les plateformes peuvent afficher l’ancien aperçu pendant un moment. Facebook et LinkedIn ont leurs propres outils de débogage pour le rafraîchir ; les autres se mettent à jour avec le temps.
- Vérifiez la longueur des descriptions avec le compteur de caractères quand vous en écrivez beaucoup d’un coup.
Générateur, outils de débogage des plateformes ou plugins de CMS ?
L’outil de débogage de partage de Facebook, le Post Inspector de LinkedIn et les outils similaires récupèrent votre page en ligne et montrent exactement ce que voit cette plateforme, et ils peuvent rafraîchir son cache. Utilisez-les après la publication. Ils ne couvrent que leur propre plateforme et exigent que la page soit en ligne.
Les plugins SEO pour WordPress et d’autres CMS écrivent ces balises automatiquement, ce qui est la meilleure option si vous utilisez ces systèmes. Ce générateur se situe entre les deux : il fonctionne avant la mise en ligne d’une page, montre sept aperçus côte à côte et vous donne du HTML brut pour n’importe quel site, y compris les pages codées à la main et les hébergeurs statiques.
Fonctionnement : rien n’est récupéré ni envoyé
Les balises et les aperçus sont construits dans votre navigateur. Le vérificateur analyse le HTML que vous collez et n’interroge jamais votre site : il fonctionne donc aussi pour des pages de préproduction protégées par une connexion. Rien n’est envoyé à Biolinko. La seule requête externe est l’image de partage elle-même, que votre navigateur charge depuis l’URL saisie pour l’afficher dans les aperçus.
Les aperçus de liens et votre lien en bio
L’URL de votre lien en bio est sans doute le lien que vous partagez le plus : dans vos bios, vos messages privés, vos signatures e-mail et sur WhatsApp. Une page Biolinko comme biolinko.me/votrenom définit elle-même son titre, sa description et son image de partage à partir de votre profil : elle s’affiche proprement partout sans toucher au code. Consultez le lien en bio pour les petites entreprises, ou créez votre page gratuite.
Mis à jour le 8 octobre 2026