La balise <meta> joue un rôle clé dans la transmission des métadonnées d'une page HTML.
Toujours placée dans la section <head> d'un document HTML, elle fournit des informations sur la page, comme :
- son encodage ;
- sa description ;
- ses mots-clés ;
- ou des instructions spécifiques pour les moteurs de recherche (comme
noindexque nous verrons plus bas).
Bien que la balise <meta> n’affecte pas directement le contenu visible de la page, elle est essentielle pour le référencement (SEO), l'accessibilité et la performance des pages web.
Structure et syntaxe de la balise <meta>
Structure et syntaxe de base
La balise <meta> est une balise auto-fermante (elle se ferme sur elle-même) qui suit une syntaxe simple. Elle utilise des attributs pour spécifier les métadonnées.
Voici sa structure générale :
<meta [attribut="valeur"] />
Exemple d'utilisation
Prenons un exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="description" content="Une description concise de la page.">
<meta name="keywords" content="HTML, meta, SEO, balises">
<meta name="author" content="Louis-Nicolas">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de balise meta</title>
</head>
<body>
<h1>Bienvenue</h1>
<p>Explorez la balise <strong><meta></strong>.</p>
</body>
</html>Comme nous pouvons le voir, il existe plusieurs types de noms (name) pour une balise <meta> :
| Valeur | Description |
|---|---|
author | Indique l'auteur de la page. |
description | Fournit une description de la page, utile pour le SEO. |
keywords | Liste de mots-clés associés à la page, toujours pour le SEO. |
viewport | Spécifie comment la page doit s'adapter aux différents écrans et appareils, pour le responsive design donc. |
robots | Donne des instructions aux moteurs de recherche (index, noindex, follow, nofollow). |
refresh | Permet de recharger automatiquement la page après un certain délai. |
generator | Indique le logiciel ou la plateforme ayant généré le contenu. |
rating | Spécifie une classification pour le contenu (general, mature). |
theme-color | Définit la couleur de thème utilisée par les navigateurs. |
Attributs
La balise <meta> peut utiliser de nombreux attributs pour définir les métadonnées.
Attributs de la balise <meta>
| Attribut | Description | Exemple |
|---|---|---|
charset | Définit l'encodage des caractères. | <meta charset="UTF-8"> |
name | Spécifie le nom de la métadonnée. | <meta name="author" content="Louis-Nicolas"> |
content | Fournit la valeur associée à l'attribut name ou http-equiv. | <meta name="description" content="Description de la page"> |
http-equiv | Fournit des informations spécifiques au navigateur (ex. : cache, type de contenu). | <meta http-equiv="refresh" content="30"> |
property | Utilisé pour des métadonnées spécifiques comme Open Graph. | <meta property="og:title" content="Titre pour les réseaux sociaux"> |
Compatibilité
| Navigateur | Compatibilité avec <meta> |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Oui |