Des balises meta pour la recherche et le partage, avec aperçus
Ce générateur de balises meta écrit le HTML qui détermine l'apparence d'une page dans les résultats Google et lorsque son lien est partagé sur Facebook, LinkedIn, X, Slack, Discord ou WhatsApp. Renseignez un titre, une description, une URL canonique et une image de partage : vous obtenez les balises SEO principales, les balises Open Graph et les balises Twitter Card, correctement échappées et prêtes à coller dans votre <code><head></code>, avec un aperçu en direct de l'extrait de recherche et de chaque carte sociale. Collez le head d'une page existante pour charger ses balises et les améliorer. Tout fonctionne dans votre navigateur.
Comment générer des balises meta
- 1Rédigez un titre et une description. Les compteurs passent au rouge quand Google risque de les tronquer : environ 600 pixels (≈60 caractères) pour le titre et environ 160 caractères pour la description.
- 2Saisissez l'URL canonique de la page, le nom de votre site et une URL d'image absolue — idéalement 1200 × 630 pixels — avec un texte alternatif.
- 3Choisissez le type Open Graph, la langue et le style de carte Twitter, et ajoutez vos identifiants X. Décochez Autoriser l'indexation pour les pages qui doivent rester hors des résultats de recherche.
- 4Vérifiez les aperçus Google, Facebook, LinkedIn et X, puis passez en HTML, choisissez les groupes à inclure et copiez les balises dans le
<head>de votre page. - 5Pour modifier une page existante, cliquez sur Importer et collez son HTML ou son code source.
Les balises qui comptent pour le SEO
- <title>
- Le signal on-page le plus important et le titre cliquable dans les résultats. Placez le sujet principal en premier, gardez-le unique pour chaque page et terminez par la marque. Google réécrit les titres qu'il juge peu utiles, trop longs ou bourrés de mots-clés.
- meta description
- Ce n'est pas un facteur de classement, mais elle sert souvent d'extrait sous le titre et influence donc les clics. Résumez la page en 120 à 160 caractères avec une raison de la visiter.
- canonical
- <link rel="canonical"> désigne l'URL préférée quand un même contenu est accessible à plusieurs adresses (paramètres de suivi, http et https, barres obliques finales).
- robots
- noindex exclut une page des résultats, nofollow indique aux robots de ne pas suivre ses liens. Index, follow est la valeur par défaut : la balise n'est donc écrite que si vous la changez.
- viewport & charset
- Ce ne sont pas des balises SEO à proprement parler, mais toute page en a besoin : l'UTF-8 et un viewport responsive sont des prérequis de l'indexation mobile-first.
- keywords
- Ignorée par Google et Bing pour le classement depuis plus de dix ans. Ne l'ajoutez que si un moteur de recherche interne ou un autre système la lit.
Open Graph : l'apparence des liens partagés
Open Graph est le protocole créé par Facebook et aujourd'hui lu par presque toutes les plateformes : LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage, Pinterest et bien d'autres. Les balises essentielles sont og:title, og:description, og:image, og:url et og:type ; og:site_name et og:locale affinent la carte.
L'image fait tout le succès de la carte. Utilisez une URL absolue en https://, 1200 × 630 pixels (ratio 1,91:1), moins de 5 Mo, en JPEG, PNG ou WebP, et éloignez textes et logos des bords, car chaque plateforme recadre différemment. Les plateformes mettent les cartes en cache : après avoir modifié les balises, rafraîchissez-les avec le Sharing Debugger de Facebook, le Post Inspector de LinkedIn ou en partageant l'URL avec une query string.
Cartes Twitter / X
X lit sa propre balise twitter:card pour choisir la mise en page — summary_large_image pour une image pleine largeur, summary pour une petite vignette carrée — ainsi que twitter:site et twitter:creator pour les identifiants du site et de l'auteur. Pour le titre, la description et l'image, il se rabat sur les balises Open Graph : le générateur n'écrit donc twitter:title, twitter:description et twitter:image que lorsque Open Graph est désactivé, pour éviter les doublons.
X affiche actuellement les cartes à grande image sous forme d'image avec le titre en surimpression et le domaine en dessous ; les descriptions n'apparaissent que sur les cartes summary, et seulement dans certains clients.
Longueur du titre : caractères ou pixels
Google tronque les titres selon leur largeur, pas selon un nombre de caractères : sur ordinateur, la limite est d'environ 600 pixels dans une police de type Arial en 20 pixels, soit 50 à 60 caractères selon les lettres — « WWW » est trois fois plus large que « iii ». Le compteur mesure le titre dans cette police, dans votre navigateur, et reflète donc vos vrais mots. Les descriptions sont coupées vers 920 pixels, soit environ 155 à 160 caractères sur ordinateur et moins sur mobile.
La troncature n'est pas une pénalité — elle masque seulement la fin du texte —, mais placer les mots importants au début garantit qu'ils soient vus. Faites correspondre le titre et la description au contenu visible : Google aura plus de chances de les garder tels quels.
Où placer les balises
Toutes ces balises vont dans l'élément <head> de la page et doivent figurer dans le HTML envoyé par le serveur : les robots d'aperçu de liens n'exécutent pas JavaScript, donc les balises ajoutées côté client sont invisibles pour Facebook, LinkedIn et X. Dans des frameworks comme Next.js, Nuxt ou Astro, utilisez leurs API de métadonnées pour les rendre côté serveur. Chaque valeur d'attribut est échappée en HTML, si bien que les guillemets et les esperluettes de vos titres ne peuvent pas casser le balisage.
Associez cela à un robots.txt qui laisse les robots accéder à vos pages, à un sitemap XML qui liste vos URL canoniques et à un favicon pour que votre résultat affiche votre icône.
Questions fréquentes
- Quelle est la longueur idéale d'une balise title et d'une meta description ?
- Environ 50 à 60 caractères (moins de ~600 pixels) pour le titre et 120 à 160 caractères pour la description. Les compteurs affichent les deux et passent au rouge quand Google risque de couper le texte.
- Quelle taille pour une image Open Graph ?
- 1200 × 630 pixels (1,91:1) fonctionne sur Facebook, LinkedIn, X et les messageries. Utilisez une URL https absolue, restez sous 5 Mo et gardez l'essentiel au centre.
- Pourquoi l'aperçu de mon lien affiche-t-il une ancienne image ou un ancien titre ?
- Les plateformes mettent les aperçus en cache. Utilisez le Sharing Debugger de Facebook ou le Post Inspector de LinkedIn pour relire l'URL ; X rafraîchit son cache au bout d'environ une semaine, ou immédiatement pour une URL avec une nouvelle query string.
- Ai-je besoin à la fois des balises Open Graph et Twitter ?
- Il faut Open Graph pour la plupart des plateformes et au moins twitter:card pour X. X se rabat sur og:title, og:description et og:image, donc les autres balises Twitter sont facultatives quand Open Graph est présent.
- La balise meta keywords aide-t-elle le SEO ?
- Non. Google et Bing l'ignorent pour le classement depuis de nombreuses années. Elle est facultative ici et ne sert que si un système interne la lit.
- Puis-je modifier les balises meta d'une page existante ?
- Oui. Cliquez sur Importer, collez le HTML de la page (le code source convient) et les valeurs title, description, canonical, Open Graph, Twitter et robots sont chargées dans le formulaire.
- Pourquoi mon image de partage n'apparaît-elle pas dans l'aperçu ?
- L'URL doit être absolue (https://…) et accessible publiquement. Certains serveurs empêchent l'affichage de leurs images sur d'autres sites ; les vraies plateformes les récupèrent côté serveur, elles peuvent donc tout de même fonctionner.
- Quelque chose est-il envoyé en ligne ?
- Non. Les balises sont générées dans votre navigateur. Seule l'image de partage est chargée depuis l'URL que vous saisissez, pour l'afficher dans les aperçus.