01
Outil

Générateur de balises Meta gratuit

Générez un extrait HTML `head` complet — SEO de base, Open Graph, Twitter Card et plus. Copiez-collez dans n'importe quelle page.

Configurer

Remplissez les détails de votre page. Laissez les champs Open Graph et Twitter vides pour hériter des champs de base.

SEO de base

0/60
0/160

Open Graph

Carte Twitter

HTML généré

Copiez ces balises dans l'élément head de votre page.

head-meta.html
<!-- Basic SEO -->
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0F172A">

<!-- Open Graph -->
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">

10 lignes

Votre robots.txt est prêt — mais ce n'est qu'un des 99+ signaux SEO.

Lancer un audit gratuit →

Que sont les balises meta et pourquoi sont-elles importantes ?

Les balises meta sont des éléments HTML présents dans le <head> d'une page qui décrivent le document aux machines : moteurs de recherche, plateformes sociales, navigateurs et systèmes d'exploitation. Le body d'une page est ce que les humains voient ; le head est ce que lisent les bots, les crawlers et les intégrations de plateformes. Les balises meta déterminent comment votre page est indexée, comment elle se déploie dans les liens partagés, quelle couleur prend l'interface du navigateur mobile, et si l'appareil interprète les numéros de téléphone et les adresses e-mail comme des liens cliquables.

La plupart des balises meta remplissent l'un de ces quatre rôles. Les balises techniques comme charset et viewport indiquent au navigateur comment parser et mettre en page le document ; sans elles, le rendu se dégrade de manière prévisible. Les balises SEO comme title, description, canonical, robots et hreflang indiquent aux moteurs de recherche ce qu'est la page et comment la traiter dans leur index. Les balises sociales comme la famille og: d'Open Graph et la famille twitter: de Twitter Card contrôlent comment la page s'affiche lorsque son URL est collée dans un chat, un post ou un lien partagé. Les balises de branding et d'UX comme theme-color, apple-touch-icon et format-detection contrôlent comment la page s'intègre au système d'exploitation hôte.

L'histoire est progressive. La spécification HTML 4 originale définissait <meta> pour des paires nom-valeur génériques. Open Graph a été publié par Facebook en 2010 pour donner aux plateformes de partage un moyen standardisé d'extraire un aperçu propre. Twitter Card a suivi en 2012 avec son propre espace de noms car Open Graph seul ne couvrait pas les variations produit de Twitter. Apple, Microsoft et la communauté PWA ont ajouté leurs propres familles de balises pour les icônes, l'interface mobile et l'amélioration progressive. Le résultat est une section head qui peut atteindre quarante lignes sur une page bien balisée, chaque balise servant un consommateur spécifique.

L'impact concret s'accumule. Une canonical manquante dilue le link equity entre des URL dupliquées. Une og:image manquante ou incorrecte transforme les liens partagés en aperçus sans style qui sont ignorés au défilement. Un viewport manquant fait rendre la page à largeur desktop sur un téléphone, déclenchant la pénalité de compatibilité mobile de Google et dégradant les Core Web Vitals. Aucun de ces problèmes n'est catastrophique isolément, mais ensemble ils laissent un trafic et un engagement considérables sur la table.

Comment utiliser ce générateur

Le formulaire est regroupé par famille de balises, vous pouvez donc ne remplir que les sections dont vous avez besoin sans faire défiler des champs non pertinents.

Étape 1 — Remplir le cœur SEO. Entrez le titre de la page, la meta description, l'URL canonical et la langue. Ces quatre champs couvrent les balises qui affectent le classement et le taux de clic ; même une configuration meta minimale devrait les renseigner.

Étape 2 — Ajouter les aperçus sociaux. Définissez le titre, la description et l'URL de l'image Open Graph. Le générateur les copie par défaut dans les balises og: et twitter:, car 90 % des pages souhaitent le même contenu sur les deux. Ne remplacez les champs Twitter que si vous avez une variante spécifique à Twitter.

Étape 3 — Copiez le résultat et collez-le dans votre <head>. Le générateur produit du HTML5 valide, ordonné avec charset et viewport en premier, puis les balises SEO, puis les balises sociales, puis le branding. Collez le bloc avant toute feuille de style ou tout script externe pour éviter que les ressources bloquant le rendu ne retardent les informations meta.

La taxonomie complète des balises meta

Une page moderne bénéficie de bien plus de balises que le title et la description que montrent la plupart des tutoriels. Voici l'ordre de priorité pour un head propre et complet.

Technique (doit venir en premier)

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

charset doit apparaître dans les 1024 premiers octets du document. S'il apparaît plus tard, le navigateur a peut-être déjà commencé le parsing dans un encodage par défaut et doit recommencer, ce qui coûte du temps et risque des bugs d'affichage avec les caractères non-ASCII. viewport contrôle comment les navigateurs mobiles calculent la mise en page initiale. Sans lui, les appareils mobiles rendent la page à largeur desktop et dézooment pour l'adapter, brisant les zones de toucher et déclenchant la pénalité de compatibilité mobile que Google applique depuis la mise à jour mobile de 2015.

Cœur SEO

<title>Mot-clé principal — Marque</title>
<meta name="description" content="Un résumé de 150-160 caractères qui inclut le mot-clé et un appel à l'action.">
<link rel="canonical" href="https://example.com/chemin-de-page">
<meta name="robots" content="index, follow">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">

La balise title est le signal SEO on-page le plus pondéré et le titre du snippet SERP. La description n'affecte pas directement le classement mais stimule le taux de clic. La canonical désambiguïse les URL dupliquées créées par les paramètres de tracking, les ordres de tri ou la pagination. La balise meta robots remplace robots.txt pour la page spécifique lorsque vous souhaitez autoriser le crawl mais bloquer l'indexation. Hreflang indique à Google quelle variante de langue et de région servir aux utilisateurs selon les recherches, et est indispensable pour que le SEO international fonctionne correctement.

La cascade de titres

Trois champs de titre différents contrôlent trois surfaces différentes. La balise <title> remplit le snippet SERP et l'onglet du navigateur. <meta property="og:title"> remplit les cartes de prévisualisation Facebook, LinkedIn et Slack. <meta name="twitter:title"> remplit la Twitter Card. Par défaut, définissez tous les trois avec la même chaîne. Remplacez og:title lorsque vous souhaitez une version plus longue et optimisée pour le partage (Facebook permet environ 88 caractères avant troncature, bien plus que les 60 de Google). Remplacez twitter:title lorsque vous souhaitez un texte spécifique à la plateforme pour les audiences natives de Twitter.

Open Graph (partage)

<meta property="og:type" content="website">
<meta property="og:title" content="Titre de la page pour les partages sociaux">
<meta property="og:description" content="Description pour les partages sociaux.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Exemple">
<meta property="og:locale" content="fr_FR">

Les dimensions de l'image importent. Facebook, LinkedIn et la plupart des consommateurs Open Graph attendent une image de 1200 par 630 avec un rapport d'aspect de 1,91:1. Soumettre une image plus petite pousse la plateforme à revenir à une mise en page en petite vignette plutôt qu'en carte hero. Soumettre une image avec le mauvais rapport d'aspect entraîne un recadrage qui coupe souvent le texte ou les visages. Les indications de largeur et de hauteur permettent aux crawlers de réserver l'espace et de charger de manière asynchrone, évitant un décalage de mise en page dans l'aperçu.

Twitter Card (partage)

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Titre de la page pour Twitter">
<meta name="twitter:description" content="Description pour Twitter.">
<meta name="twitter:image" content="https://example.com/twitter.png">
<meta name="twitter:site" content="@votrecompte">

Choisissez summary_large_image pour une mise en page hero (la plupart des pages marketing et des articles) et summary pour une carte compacte (contenu léger). Twitter préfère une image de 1200 par 675, légèrement plus large que le 1200 par 630 d'Open Graph. Si vous réutilisez votre image Open Graph, le résultat fonctionne quand même, mais une image spécifique à Twitter remplit la carte sans letterboxing.

Branding et UX (souvent oublié)

<meta name="theme-color" content="#0F172A">
<meta name="color-scheme" content="light dark">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

theme-color colore le chrome du navigateur sur Android et la barre de statut dans les PWA. color-scheme indique au navigateur d'afficher les barres de défilement et les contrôles de formulaire en mode sombre ou clair correspondant. format-detection avec telephone=no empêche iOS Safari de transformer automatiquement les chaînes de chiffres ressemblant à des numéros de téléphone en liens tel:, ce qui est indispensable pour les numéros de facture, les identifiants de commande et tout nombre de sept à onze chiffres qui n'est pas réellement un téléphone. Les liens d'icônes couvrent les favicons d'onglet desktop, les icônes d'écran d'accueil iOS et les icônes adaptatives Android.

Erreurs courantes qui nuisent au SEO et au partage

Canonical incorrecte pointant vers une autre page. Une balise canonical pointant vers une URL différente indique à Google que l'URL actuelle est un doublon et consolide les signaux vers la cible. Les pages qui devraient se classer disparaissent de la recherche parce que leur canonical pointe ailleurs par erreur. Faites toujours une autoréférence sauf si la page est réellement un doublon.

og:image manquante ou trop petite. Une og:image manquante laisse la plateforme choisir quelque chose d'arbitraire dans le body, souvent un logo ou une icône. Une image trop petite (moins de 600 pixels de large) rétrograde l'aperçu en mise en page de petite vignette. Les deux nuisent à l'engagement sur les liens partagés et sont faciles à corriger.

Descriptions identiques sur toutes les pages. Les descriptions générées par template qui ne varient que par le titre de la page signalent un contenu peu soigné. Google les remplace régulièrement par du texte extrait du body, ce qui signifie que la description que vous avez pris le temps d'écrire n'apparaît jamais. Chaque page a besoin d'une description unique liée à l'intention de cette page.

Charset déclaré tardivement. Une balise charset après les 1024 premiers octets déclenche un redémarrage de l'encodage dans certains navigateurs. Le résultat est un bref flash de caractères mal encodés avant que la page ne se repeigne. Mettez toujours <meta charset="utf-8"> comme premier enfant du head.

Balise meta robots et en-tête X-Robots-Tag non synchronisés. Lorsque l'en-tête HTTP définit noindex et que la balise meta définit index, la directive la plus restrictive l'emporte et la page n'est pas indexée. Auditez les deux couches en une seule passe lorsqu'une page n'apparaît mystérieusement pas dans la recherche.

Theme-color défini en blanc sur un site à branding sombre. Le comportement par défaut du navigateur peint la barre d'adresse en blanc sur la plupart des appareils Android. Un site avec un en-tête bleu marine foncé et une barre d'adresse blanche paraît cassé sur mobile. Définir theme-color avec la couleur de la marque est une modification d'une ligne qui améliore sensiblement la qualité perçue.

Twitter Card sans site ni creator. Omettre twitter:site et twitter:creator supprime la ligne d'attribution de la carte et empêche Twitter d'associer les partages à votre compte. Les deux champs prennent un identifiant Twitter incluant le @ et doivent être définis sur chaque page.

Cas particuliers que personne ne mentionne

Les balises meta interagissent avec les en-têtes de réponse HTTP, et les en-têtes l'emportent généralement. X-Robots-Tag: noindex dans la réponse remplace tout <meta name="robots" content="index"> dans la page. Les en-têtes Content-Security-Policy peuvent bloquer le chargement de l'og:image dans le crawler d'aperçu, surtout lorsque l'image réside sur un domaine différent. Referrer-Policy défini à no-referrer supprime le référent que les crawlers Open Graph utilisent parfois pour vérifier la requête, amenant certaines plateformes à refuser de rendre l'aperçu. Lorsque les balises meta semblent correctes dans le source mais que la page ne se comporte pas comme prévu, auditez ensuite les en-têtes de réponse.

Outils connexes