La balise HTML <meta>

La balise <meta> transporte des métadonnées — des informations sur la page plutôt que du contenu affiché dessus. Les navigateurs, les moteurs de recherche et les réseaux sociaux lisent ces métadonnées pour décider comment afficher la page, comment l'indexer et comment la présenter lorsqu'elle est partagée. Rien à l'intérieur d'un élément <meta> n'apparaît sur la page elle-même.

Un document peut contenir plusieurs balises <meta>, et presque toutes les pages modernes en nécessitent au moins deux (l'encodage des caractères et le viewport). Toutes les balises <meta> se trouvent à l'intérieur de l'élément <head>, aux côtés des balises <title> et <link>.

Cette page couvre les balises meta que vous utiliserez réellement au quotidien : l'encodage, le viewport, la description SEO, la simulation d'en-tête http-equiv, et les balises Open Graph / Twitter qui contrôlent l'apparence des liens lors du partage.

Syntaxe

La balise <meta> est un élément void — elle n'a ni contenu ni balise fermante. En XHTML, elle doit être auto-fermante (<meta />).

Une balise <meta> utilise l'un de ces deux formats :

Une paire name/content (ou property/content pour Open Graph) — name indique le type de métadonnée, content en est la valeur.
Un attribut charset autonome, ou une paire http-equiv/content qui simule un en-tête de réponse HTTP.

Vous devez fournir l'attribut content chaque fois que name ou http-equiv est présent. L'attribut content n'est pas utilisé conjointement avec charset.

Encodage des caractères : `<meta charset>`

Cette balise indique au navigateur quel encodage de caractères utiliser pour décoder le document. Elle doit être la première chose dans le <head>, et doit toujours être UTF-8 :

<meta charset="UTF-8">

Pourquoi UTF-8 ? Il peut représenter chaque caractère de chaque langue — accents, emoji, symboles monétaires, scripts CJK — avec un encodage unique et universel. Sans encodage déclaré (ou correctement deviné), des caractères comme é, — ou " peuvent se transformer en "mojibake" illisible. UTF-8 est l'encodage du web moderne ; le standard HTML l'exige pour les nouveaux documents.

Placez-la tôt pour que le navigateur connaisse l'encodage avant de traiter tout texte.

La balise meta viewport

La balise viewport est ce qui rend une page responsive sur les téléphones et les tablettes. Sans elle, les navigateurs mobiles supposent que la page a été conçue pour un bureau et l'affichent à environ 980px de large, puis réduisent le résultat — laissant un texte minuscule et dézoomé. Ajoutez ceci et la page s'adapte à l'appareil :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ce que fait chaque partie :

width=device-width — définit le viewport de mise en page sur la largeur propre de l'appareil (par exemple 390px sur un téléphone) au lieu d'une fausse largeur de bureau de 980px.
initial-scale=1.0 — démarre à un niveau de zoom 1:1, de sorte qu'un pixel CSS corresponde à un pixel indépendant de l'appareil au chargement.

Cette ligne unique est requise pour tout site qui souhaite avoir une bonne apparence sur mobile. Évitez d'ajouter user-scalable=no ou un maximum-scale inférieur à 5 — cela bloque le zoom par pincement et nuit à l'accessibilité pour les utilisateurs malvoyants.

SEO : la balise meta `description`

La description est le résumé que les moteurs de recherche affichent souvent sous le titre de votre page dans les résultats, et vers lequel les plateformes sociales se replient. Visez une phrase concise et percutante d'environ 150–160 caractères — un texte plus long est tronqué avec des points de suspension.

<meta name="description" content="Learn how the HTML meta tag controls encoding, the viewport, SEO, and social sharing — with copy-paste examples.">

La description ne booste pas directement le classement, mais un résumé clair et pertinent améliore les taux de clics depuis la page de résultats.

Autres valeurs `name`/`content`

L'attribut name nomme le type de métadonnée ; content contient sa valeur. Valeurs courantes :

<!-- Author of the page -->
<meta name="author" content="Jane Doe">

<!-- Software that generated the page -->
<meta name="generator" content="Next.js">

<!-- Control how search engines crawl and index this page -->
<meta name="robots" content="index, follow">
<!-- ...or keep a page out of search results -->
<meta name="robots" content="noindex, nofollow">

<!-- Tint the mobile browser UI to match your brand -->
<meta name="theme-color" content="#10b981">

<!-- Limit the referrer information sent to other sites -->
<meta name="referrer" content="strict-origin-when-cross-origin">

Remarque : La balise meta keywords (<meta name="keywords" content="…">) est ignorée par tous les principaux moteurs de recherche aujourd'hui et peut être omise sans problème. L'ancien attribut scheme a été supprimé en HTML5 et ne doit pas être utilisé.

Simuler des en-têtes HTTP : `http-equiv`

L'attribut http-equiv permet à une balise <meta> de remplacer un en-tête de réponse HTTP. Les valeurs les plus courantes :

<!-- Declare the content type and encoding (legacy alternative to charset) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Auto-refresh the page every 60 seconds -->
<meta http-equiv="refresh" content="60">

<!-- ...or redirect to another URL after 3 seconds -->
<meta http-equiv="refresh" content="3; url=https://www.w3docs.com">

Mise en garde d'accessibilité : Évitez http-equiv="refresh". Une page qui se rafraîchit ou se redirige automatiquement peut désorienter les utilisateurs, interrompre les lecteurs d'écran et piéger les personnes qui ont besoin de plus de temps pour lire — elle ne satisfait pas les critères de succès WCAG. Préférez une vraie redirection HTTP côté serveur, ou un lien visible que l'utilisateur clique.

Quand quelqu'un partage votre lien sur Facebook, LinkedIn, Slack ou X, ces plateformes lisent les balises Open Graph pour construire la carte de prévisualisation (titre, résumé, image). Les balises Open Graph utilisent l'attribut property à la place de name :

<meta property="og:title" content="HTML meta Tag — Full Guide">
<meta property="og:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">
<meta property="og:url" content="https://www.w3docs.com/learn-html/html-meta-tag.html">
<meta property="og:type" content="website">

X (Twitter) ajoute ses propres balises par-dessus, en utilisant name :

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML meta Tag — Full Guide">
<meta name="twitter:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta name="twitter:image" content="https://www.w3docs.com/images/meta-preview.png">

Fournissez une URL absolue pour og:image (environ 1200×630px) afin que les prévisualisations affichent une image grande et nette plutôt qu'une miniature ou rien du tout.

Un exemple complet de `<head>`

Voici comment ces balises s'assemblent dans un document réel :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML meta Tag — Full Guide</title>
    <meta name="description" content="Encoding, viewport, SEO, and social meta tags explained with copy-paste examples.">
    <meta name="author" content="Jane Doe">
    <meta name="theme-color" content="#10b981">

    <!-- Open Graph -->
    <meta property="og:title" content="HTML meta Tag — Full Guide">
    <meta property="og:description" content="Everything the meta tag controls, with examples.">
    <meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">

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

    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Page content goes here</h1>
  </body>
</html>

Attributs

Attribut	Valeur	Description
`charset`	character_set	Définit l'encodage des caractères du document (utilisez `UTF-8`).
`content`	text	Définit la valeur des attributs `name`, `property` ou `http-equiv`.
`http-equiv`	content-type, default-style, refresh	Simule un en-tête de réponse HTTP et détermine son traitement.
`name`	application-name, author, description, generator, keywords, robots, theme-color, referrer, viewport	Nomme les métadonnées contenues dans `content`.
`property`	og:title, og:description, og:image, …	Nomme une propriété Open Graph (utilisée par les plateformes sociales).

La balise <meta> prend également en charge les Attributs globaux et les Attributs d'événements.

Balises associées

<head> — le conteneur de toutes les métadonnées.
<title> — le titre de la page affiché dans les onglets et les résultats de recherche.
<link> — lie des ressources externes telles que les feuilles de style et les favicons.
<base> — définit une URL de base pour tous les liens relatifs de la page.
<style> — intègre du CSS directement dans l'en-tête.

Pratique

Quel est le rôle d'une balise meta en HTML ?

Elle fournit des métadonnées sur le document HTML, comme le jeu de caractères, la description et les paramètres du viewport.Elle affiche le contenu de la page web à l'utilisateur.C'est le conteneur principal des éléments visibles de la page.Elle est utilisée pour afficher des images sur la page web.

Syntaxe

Encodage des caractères : <meta charset>

La balise meta viewport

SEO : la balise meta description

Autres valeurs name/content

Simuler des en-têtes HTTP : http-equiv

Partage social : Open Graph et cartes Twitter

Un exemple complet de <head>