Meta Tag Generator : créer des balises meta SEO

Qu'est-ce que Meta Tag Generator ?

J'utilise cet outil chaque fois que je publie une nouvelle page et que je veux voir comment elle apparaîtra réellement dans Google, sur Facebook et sur Twitter avant la mise en ligne. L'outil produit le bloc HTML complet de balises meta (SEO de base, Open Graph, Twitter Card) et affiche des aperçus pixel-perfect de chaque plateforme côte à côte. Vous remplissez l'onglet Input, copiez depuis Output et vérifiez dans Preview.

Fonctionnalités principales

L'outil génère trois blocs de balises à partir d'un seul jeu d'entrées. Le bloc SEO de base couvre <meta name="title">, <meta name="description">, <meta name="keywords">, <meta name="author">, <meta name="robots"> et <link rel="canonical">. Le bloc Open Graph couvre og:title, og:description, og:type, og:url, og:image, og:site_name et og:locale, avec des options de type pour website, article, product, video et music. Le bloc Twitter Card couvre twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description et twitter:image, supportant les cartes Summary et Summary Large Image.

Les compteurs de caractères vous guident vers les bonnes longueurs. Title affiche actuel/60 et passe au vert dans la plage 30–60, jaune sous 30, rouge au-dessus de 60. Description utilise le même schéma avec une cible de 120–160. Trois aperçus en direct se mettent à jour pendant que vous tapez : un aperçu Google SERP avec le bleu de lien réel (#1a0dab), URL en vert (#006621) et description en gris (#545454) ; un aperçu Facebook qui rend la carte 1.91:1 avec l'image OG fournie ; et un aperçu Twitter Card qui bascule entre Summary et Summary Large Image selon votre paramètre.

Le menu déroulant Robots offre les quatre combinaisons de directives standard : index, follow (par défaut), index, nofollow, noindex, follow et noindex, nofollow. L'onglet Output divise Basic, Open Graph et Twitter en sections séparées avec des boutons de copie individuels, plus un Copy All pour le bloc combiné.

Comment utiliser Meta Tag Generator

Étape 1 : remplissez l'onglet Input

Ouvrez Bientôt disponible: Meta Tag Generator. L'outil s'ouvre sur l'onglet Input, qui comporte trois sections.

Section SEO de base :

• Title : le titre de votre page. Le compteur de caractères se met à jour en temps réel. Maintenez-le entre 30–60 caractères (vert) pour éviter la troncature dans les résultats de recherche. Exemple : TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole (53 caractères, vert).
• Description : votre meta description. Visez 120–160 caractères (plage verte) pour un affichage complet. Exemple : TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75. (137 caractères, vert).
• Keywords : mots-clés séparés par des virgules. Les moteurs de recherche modernes ignorent largement cette balise, mais cela ne nuit pas de l'inclure. Exemple : hiking boots, trail running, waterproof boots, vibram outsole.
• Author : nom d'auteur optionnel.
• Robots : choisissez parmi les quatre combinaisons de directives robots. Laissez index, follow pour le contenu public. Utilisez noindex, nofollow pour les pages privées, zones admin ou contenu dupliqué que vous ne voulez pas indexer.
• Canonical URL : l'URL préférée pour cette page. Entrez l'URL absolue complète (ex. https://example.com/products/trailmaster-pro).

Étape 2 : configurez les balises Open Graph

Faites défiler jusqu'à la section Open Graph :

• OG Type : sélectionnez "website" pour les pages d'accueil et générales, "article" pour les articles de blog, "product" pour les pages e-commerce.
• OG Site Name : le nom d'affichage de votre site (ex. "TrailMaster Outdoor Gear").
• OG Image : l'URL complète de l'image de partage social. Facebook recommande 1200×630 pixels. Si vous fournissez une URL accessible, l'aperçu Facebook rend l'image réelle.
• OG URL : l'URL canonique pour Open Graph, généralement la même que votre URL canonique.

Étape 3 : configurez les balises Twitter Card

Faites défiler jusqu'à la section Twitter Cards :

• Twitter Card Type : "Summary" affiche un petit thumbnail carré. "Summary Large Image" affiche une grande image 2:1, le meilleur choix pour la plupart du contenu avec ressources visuelles.
• Twitter Site : le nom d'utilisateur Twitter/X du site (ex. @trailmaster).
• Twitter Creator : le nom d'utilisateur Twitter/X de l'auteur du contenu.

Étape 4 : examinez l'onglet Output

Cliquez sur l'onglet Output. Trois sections affichent les balises générées :

Exemple de balises de base :

<meta name="title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta name="description" content="TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75." />
<meta name="keywords" content="hiking boots, trail running, waterproof boots, vibram outsole" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/products/trailmaster-pro" />

Exemple de balises Open Graph :

<meta property="og:type" content="product" />
<meta property="og:url" content="https://example.com/products/trailmaster-pro" />
<meta property="og:title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta property="og:description" content="TrailMaster Pro boots combine a Vibram outsole..." />
<meta property="og:image" content="https://example.com/images/trailmaster-og.jpg" />
<meta property="og:site_name" content="TrailMaster Outdoor Gear" />
<meta property="og:locale" content="en_US" />

Cliquez sur Copy All pour obtenir le bloc complet de balises prêt à coller dans votre <head>.

Étape 5 : vérifiez dans l'onglet Preview

Passez à l'onglet Preview. Trois aperçus en direct sont rendus :

• Aperçu Google SERP : affiche le title en bleu, l'URL canonique en vert et la description tronquée à deux lignes en gris. Cela correspond au format de résultat de recherche desktop. Si votre title dépasse 60 caractères, il sera visuellement tronqué ici, un signal clair pour le raccourcir.
• Aperçu carte Facebook : affiche l'image OG (si fournie et chargeable), le domaine du site en majuscules, le title en gras et la description.
• Aperçu Twitter Card : affiche le format twitter:card (Small ou Large Image), le domaine URL, title et description. L'image d'aperçu provient de twitterImage si défini, sinon de ogImage.

Exemples pratiques

Exemple 1 : article de blog

Pour un article de blog intitulé "10 Best Hikes in the Scottish Highlands" :

• Title : 10 Best Hikes in the Scottish Highlands - Complete Guide (53 chars, vert)
• Description : The 10 most rewarding hiking routes in the Scottish Highlands, from Ben Nevis to the Isle of Skye. Trail grades, maps, and kit lists included. (143 chars, vert)
• OG Type : article
• Robots : index, follow

L'aperçu SERP confirme que le title tient sans troncature et que la description remplit les deux lignes disponibles.

Exemple 2 : page produit e-commerce

Pour une page produit, l'OG type est défini sur "product" et une URL d'image est fournie. L'aperçu Facebook rend l'image du produit en ratio 1.91:1 avec le nom du site, le title du produit et la description. La Twitter Large Image Card affiche la même image avec un crop 2:1.

Exemple 3 : page de staging privée

Pour une page d'environnement staging non prête pour l'indexation, définissez Robots sur noindex, nofollow. Le output généré inclut <meta name="robots" content="noindex, nofollow" />, indiquant aux crawlers des moteurs de recherche de ne pas indexer ni suivre les liens sur cette page même s'ils la découvrent.

Conseils et bonnes pratiques

• Synchronisez OG URL et URL canonique : utilisez la même URL absolue pour og:url et la balise canonique <link>. Les divergences peuvent faire que le partage social référence la mauvaise URL.
• Longueur du title et troncature : Google tronque les titles qui rendent plus larges qu'environ 600px en résultats desktop. La cible 30–60 caractères est un proxy fiable ; vert signifie que vous êtes dans des limites sûres.
• Dimensions d'image OG : l'outil génère la balise og:image pour toute URL fournie mais ne valide pas les dimensions. Utilisez une image 1200×630 pixels pour Facebook et 1200×600 pour Twitter Large Image Cards.
• twitter:image fait fallback sur og:image : dans l'onglet Preview, la Twitter Card utilise votre twitter:image si défini, sinon og:image. Définissez une twitter:image distincte uniquement si vous voulez des images sociales différentes par plateforme.
• Balise meta keywords : la balise <meta name="keywords"> est générée mais largement ignorée par Google et Bing depuis 2009. Incluez-la par souci d'exhaustivité mais n'investissez pas de temps à l'optimiser.

Problèmes courants et dépannage

Le compteur title est rouge mais la description va bien : le title dépasse 60 caractères. Raccourcissez-le ou déplacez les détails vers la description. Le compteur title affiche actuel/60 (long) en rouge comme indicateur clair.

Le compteur description est jaune : la description est sous 120 caractères. Google peut substituer son propre snippet depuis le contenu de votre page. Ajoutez 20–40 caractères supplémentaires de contenu pertinent.

L'image OG ne s'affiche pas dans l'aperçu Facebook : l'onglet Preview charge l'URL réelle de l'image dans une balise <img>. Si l'URL n'est pas publiquement accessible depuis votre navigateur (ex. URL de développement local), la zone d'image affiche le placeholder "No image". La balise est néanmoins générée correctement dans le output.

L'aperçu Twitter n'affiche qu'une petite carte malgré une grande image : le Twitter Card Type est défini sur "Summary" au lieu de "Summary Large Image". Changez le menu déroulant Twitter Card Type sur "Summary Large Image" pour voir l'aperçu 2:1.

Les balises générées apparaissent vides dans l'onglet Output : remplissez au moins le title et la description dans l'onglet Input. Le output n'inclut que les champs non vides ; un champ title vide ne produit aucune balise title.

Confidentialité et sécurité

Meta Tag Generator s'exécute entièrement dans votre navigateur. La génération des balises utilise le hook useMemo de React pour calculer le output réactivement depuis votre input, sans aller-retour serveur. Si vous fournissez une URL d'image OG, l'onglet Preview charge cette image directement depuis l'URL source sans proxy. Les membres Supporter peuvent enregistrer et restaurer des presets nommés via le stockage IndexedDB local.

Questions fréquentes

Quelles sont les longueurs optimales de caractères pour title et description ?

L'outil utilise 30–60 caractères pour title (plage verte) et 120–160 caractères pour description (plage verte). Ces valeurs correspondent aux limites typiques de largeur en pixels rendus que Google utilise pour les snippets SERP. Les titles sous 30 caractères (jaune) peuvent être considérés comme trop fins ; au-dessus de 60 (rouge) peuvent être tronqués. Les descriptions sous 120 (jaune) peuvent amener Google à utiliser son propre extrait ; au-dessus de 160 (rouge) seront tronquées.

L'outil génère-t-il toutes les propriétés Open Graph ?

L'outil génère les balises OG principales : og:type, og:url, og:title, og:description, og:image, og:site_name et og:locale. Il ne génère pas les balises spécifiques aux articles comme article:published_time ni les balises spécifiques aux produits comme product:price. Pour celles-ci, ajoutez-les manuellement après avoir copié le output généré.

Quelles valeurs OG locale sont disponibles ?

La locale OG par défaut est en_US. Le champ locale est une entrée texte où vous pouvez taper tout code locale valide (ex. fr_FR, de_DE, ja_JP). L'outil ne restreint pas ce champ à un menu déroulant.

Quels types de Twitter Card l'outil supporte-t-il ?

L'outil génère summary (petit thumbnail carré, title, description et nom du site) et summary_large_image (image 2:1 pleine largeur avec title, description et nom du site). Il ne supporte pas les types dépréciés app et player.

Puis-je copier uniquement les balises Open Graph sans les balises SEO de base ?

Oui. L'onglet Output affiche trois sections séparées (Basic, Open Graph, Twitter), chacune avec son propre bouton de copie. Cliquez sur le bouton de copie de la section Open Graph pour copier uniquement ces balises. Utilisez "Copy All" pour tout obtenir combiné.

Comment ajouter les balises générées à mon site ?

Collez les balises copiées dans la section <head> de votre HTML. Si vous utilisez un CMS comme WordPress, Shopify ou Webflow, collez-les dans le champ de code <head> personnalisé dans les paramètres de votre thème ou utilisez un plugin SEO qui accepte les balises meta personnalisées. Pour des frameworks comme Next.js, collez dans le composant <Head> ou utilisez l'API metadata.

Outils associés

• Bientôt disponible: Analyseur SEO de page : auditez les balises meta actuelles, la structure des headings et les signaux SEO on-page d'une page existante pour identifier les lacunes que vos nouvelles balises meta devraient adresser.
• Bientôt disponible: Aperçu SERP : outil dédié d'aperçu SERP pour ajuster l'affichage du title et de la description avant et après la mise à jour de vos balises meta.
• Bientôt disponible: Générateur Schema : ajoutez des balises de données structurées à côté de vos balises meta pour activer les résultats enrichis dans Google Search pour les articles, produits, événements et plus.

Essayez Meta Tag Generator maintenant : Bientôt disponible: Glyph Widgets Meta Tag Generator