Générateur de balises meta

Ce que fait l’outil

Le générateur de balises meta écrit les balises placées dans le <head> d’une page HTML : le <title>, la meta description, les mots-clés et l’auteur, une directive robots, le lien canonique, une couleur de thème, les déclarations viewport et charset, l’ensemble des balises Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) et les balises de carte X / Twitter.

Pendant la saisie, il montre à quoi la page pourrait ressembler dans un résultat de recherche et sur une carte sociale, et vérifie les erreurs fréquentes : titre de plus de 60 caractères environ, description absente, trop courte ou de plus de 160 caractères environ, URL canonique relative, image sans URL absolue, langue ou couleur mal formées. Tout se passe dans votre navigateur, et l’aperçu ne charge volontairement pas votre image : la page n’effectue aucune requête réseau.

Mode d’emploi

1. Remplissez les informations de la page. Le titre et la description sont essentiels ; les compteurs indiquent leur longueur par rapport aux limites d’affichage habituelles. Cliquez sur Exemple pour voir un cas complet.
2. Saisissez l’URL canonique de la page et une image de partage. Un chemin relatif comme /images/cover.jpg est résolu à partir de l’URL canonique.
3. Dans les options, choisissez le type Open Graph (website pour la plupart des pages, article pour un billet de blog), la taille de la carte, si les moteurs peuvent indexer la page et suivre ses liens, et les groupes de balises à inclure.
4. Lisez les avertissements sous le HTML, vérifiez les aperçus, puis copiez le HTML dans le gabarit de votre page.

Les options sont enregistrées dans l’adresse de la page et le formulaire dans votre navigateur : vous pouvez y revenir ou partager un lien avec les mêmes réglages.

Exemple

La page d’exemple produit des balises comme celles-ci (abrégé) :

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">

Les valeurs sont échappées en HTML, donc les guillemets et les esperluettes d’un titre ne cassent pas le balisage, et la langue en-US est normalisée au format en_US attendu par Open Graph.

Conseils

• Écrivez un titre et une description uniques pour chaque page ; les doublons rendent les résultats difficiles à distinguer.
• Placez les mots les plus importants au début du titre, car les titres longs sont coupés à la fin.
• L’URL canonique doit être l’adresse exacte à indexer, avec le protocole et votre variante préférée avec ou sans www.
• Mettre robots à noindex retire la page des résultats, à condition que les robots puissent encore la lire : ne la bloquez pas aussi dans robots.txt.