Générateur de balises meta
Générez un bloc prêt à coller de balises meta SEO, Open Graph et Twitter Card — instantanément, dans votre navigateur.
Cette page a été traduite de l'anglais avec l'aide de l'IA, puis vérifiée par rapport à l'original. Lire la version anglaise
- Gratuit — Aucune inscription requise
- Instantané — Les résultats s'affichent au fur et à mesure
- Privé — Traité dans votre navigateur
Le <head> d’une page porte trois jeux de métadonnées qui se recoupent — les balises de base que lisent les moteurs de recherche, Open Graph pour le partage sur les réseaux sociaux, et les Twitter Cards — et ces trois jeux répètent pour l’essentiel les mêmes informations, sous trois graphies légèrement différentes. Le générateur ci-dessus remplit les trois à partir d’un seul ensemble de champs.
Comment ça marche
Renseignez les champs dont vous disposez : tous sont facultatifs, et un champ vide est simplement omis au lieu de produire une balise vide. Vous obtenez un bloc prêt à coller, organisé en quatre sections :
Base — <title>, <meta name="description">, une directive robots construite à partir des options d’indexation et de suivi des liens, et <link rel="canonical"> tiré de l’URL de la page.
Open Graph — og:type (toujours website), plus og:title, og:description, og:url, og:site_name et og:image pour chaque champ renseigné.
Twitter — twitter:card, qui passe automatiquement à summary_large_image quand vous fournissez une image et reste à summary sinon, plus twitter:site, twitter:title, twitter:description et twitter:image. Un compte saisi sans @ initial en reçoit un.
Divers — theme-color, qui colore l’interface du navigateur sur mobile.
Toutes les valeurs d’attribut sont échappées pour le HTML : une esperluette ou un guillemet dans votre titre donne donc un balisage valide, et non une balise cassée. Rien n’est envoyé nulle part ; la génération se fait entièrement dans votre navigateur.
Soigner le contenu
Titre : environ 50 à 60 caractères. Au-delà, les résultats de recherche le tronquent, et la troncature dépend de la largeur en pixels plutôt que du nombre de caractères : un titre en majuscules est donc coupé plus tôt. Placez les mots qui distinguent la page en tête, et le nom du site à la fin.
Description : environ 150 à 160 caractères. Ce n’est pas un facteur de classement, mais c’est l’argumentaire affiché dans le résultat : rédigez-la pour un humain qui se demande s’il va cliquer. Google l’ignore souvent et génère son propre extrait à partir de la page ; c’est normal, pas un défaut.
URL canonique : absolue, et pointant vers la page elle-même. Une page doit se déclarer canonique, sauf si elle est réellement le doublon d’une autre URL. Les URL canoniques relatives sont autorisées, mais restent une source d’erreurs classique ; utilisez la forme complète en https://.
Image : URL absolue, et assez grande. Les images Open Graph doivent mesurer au moins 1200×630 pour s’afficher en grande carte. Un chemin relatif ne se résoudra pas quand un robot distant récupère la page, et une image protégée par une authentification ne s’affichera pas du tout.
Robots : noindex est une consigne forte. Les options produisent index, follow ou noindex, nofollow. Placer un noindex sur une page déjà bien classée la fait disparaître des résultats, et la balise doit rester accessible au robot pour que la consigne soit lue : bloquer en même temps la page dans robots.txt empêche le robot de lire un jour le noindex.
Où les placer
Ces balises vont dans le <head> du HTML rendu, avant tout contenu. Si vos pages sont générées par un framework, utilisez son API de métadonnées plutôt que de coller des balises brutes dans un template : les balises suivent alors la route, reçoivent les bonnes valeurs pour chaque page et ne peuvent pas se désynchroniser du contenu. Cet outil sert surtout pour une page statique, une landing page hors de votre application, ou pour vérifier que le bloc produit par votre framework contient bien tout ce qu’il faut.
Les règles structurelles du head du document — ce qui peut y figurer et pourquoi <title> est obligatoire — sont traitées dans l’essentiel de HTML5. Si la page est servie par une couche de vues rendue côté serveur, Spring MVC montre où se situe, dans le parcours de la requête, le template responsable du head.
Outils associés
Pour voir à quoi ressemblera réellement le lien une fois partagé, collez le bloc généré dans l’aperçu Open Graph, qui relit les balises et affiche une maquette de la carte. Pour mettre en forme le balisage qui l’entoure, utilisez le formateur HTML.
FAQ
- Quelles balises cet outil génère-t-il ?
- Une balise title, une meta description, une directive robots et un lien canonique, ainsi que des balises Open Graph (og:title, og:description, og:image, og:url, og:site_name, og:type) et des balises Twitter Card.
- Comment vérifier à quoi ressemblera le résultat une fois partagé ?
- Collez les champs dans l'outil d'aperçu Open Graph pour voir les cartes de résultat Facebook, X et recherche Google.
- Mes données sont-elles envoyées quelque part ?
- Non. Les balises sont générées entièrement dans votre navigateur.