L'attribut content en HTML
L'attribut HTML content définit la valeur associée au name ou http-equiv d'une balise meta. Apprenez ses valeurs courantes pour le SEO, le viewport et plus.
L'attribut content contient la valeur d'une déclaration de métadonnées. Il n'a aucun sens seul — il forme toujours la seconde moitié d'une paire clé-valeur, fournissant les données correspondant à ce que l'attribut name ou http-equiv de la balise meta désigne.
Vous ne pouvez utiliser content que sur l'élément <meta>, qui se place à l'intérieur du <head> du document. Considérez name/http-equiv comme la clé et content comme la valeur :
name+content— métadonnées au niveau du document destinées aux navigateurs, aux moteurs de recherche et aux plateformes sociales (description, mots-clés, viewport, etc.).http-equiv+content— une directive pragma qui simule un en-tête de réponse HTTP (par exemple, un rechargement de page ou un type de contenu).
Si vous écrivez une balise <meta> avec un name ou un http-equiv mais sans content, la déclaration ne produit aucun effet.
Syntaxe
<meta name="description" content="A description of the document">Valeurs name courantes et leur content
La valeur de content est interprétée en fonction du name auquel elle est associée. Voici les plus fréquemment utilisées :
name | Ce que contient content |
|---|---|
viewport | La façon dont la page s'adapte à l'écran de l'appareil. La valeur standard est width=device-width, initial-scale=1, qui permet un rendu responsive sur mobile. |
description | Un court résumé de la page. Les moteurs de recherche l'affichent souvent comme extrait sous votre résultat ; gardez-le sous ~160 caractères. |
keywords | Une liste de mots-clés séparés par des virgules. Largement ignorée par les moteurs de recherche modernes, mais encore courante dans le balisage legacy. |
robots | Instructions à l'intention des robots d'indexation (voir le détail ci-dessous). |
author | Le nom de l'auteur de la page. |
La balise meta viewport est de loin la plus importante à retenir — sans elle, les navigateurs mobiles supposent une mise en page à largeur bureau et dézooment :
<meta name="viewport" content="width=device-width, initial-scale=1">Les valeurs de la directive robots
Le content d'une balise meta robots est une liste de directives séparées par des virgules indiquant aux robots ce qu'ils sont autorisés à faire avec la page. Les deux plus souvent mal comprises — noindex et nofollow — contrôlent des choses différentes :
| Valeur | Ce qu'elle indique au robot |
|---|---|
index | La page peut apparaître dans les résultats de recherche. C'est la valeur par défaut, il est donc rarement nécessaire de l'écrire. |
follow | Le robot peut suivre les liens de la page pour découvrir d'autres pages. Également la valeur par défaut. |
noindex | Ne pas afficher cette page dans les résultats de recherche — même si le robot peut toujours la lire et suivre ses liens. |
nofollow | Ne pas suivre les liens de cette page. La page elle-même peut toujours être indexée. |
Étant indépendantes, ces directives se combinent souvent. Par exemple, pour masquer une page des résultats de recherche et empêcher les robots de suivre ses liens :
<meta name="robots" content="noindex, nofollow">Open Graph et métadonnées pour le partage social
Lorsqu'une page est partagée sur des plateformes sociales (Facebook, LinkedIn, Slack, etc.), la plateforme lit les balises meta Open Graph pour construire la carte de prévisualisation. Open Graph utilise l'attribut property (au lieu de name) conjointement avec content :
<meta property="og:title" content="HTML content Attribute - W3docs" />
<meta property="og:description" content="Learn how the HTML content attribute pairs with a meta tag's name or http-equiv to set page metadata." />
<meta property="og:image" content="https://www.w3docs.com/assets/preview.png" />og:title— le titre affiché sur la carte de partage (remplacé par le titre de la page s'il est absent).og:description— le texte de résumé sous le titre.og:image— une URL absolue vers l'image miniature. Utilisez toujours une URL complète enhttps://ici ; les chemins relatifs ne se résoudront pas sur d'autres sites.
Il s'agit là de quelques-unes des utilisations les plus courantes de content dans la pratique, aussi vaut-il la peine de les ajouter aux côtés de votre balise meta description.
Valeurs http-equiv courantes et leur content
L'attribut http-equiv permet à une balise <meta> de remplacer un en-tête HTTP. L'attribut content porte alors la valeur de cet en-tête :
http-equiv | Ce que contient content |
|---|---|
refresh | Un nombre de secondes avant le rechargement de la page. Ajoutez ;url=... pour effectuer une redirection — par ex. content="5;url=https://www.w3docs.com". Voir l'avertissement d'accessibilité ci-dessous. |
content-type | Le type MIME et le jeu de caractères du document, par ex. text/html; charset=UTF-8. En HTML5, la forme abrégée <meta charset="UTF-8"> est préférable. |
La valeur X-UA-Compatible (par ex. IE=edge) n'a jamais affecté que le mode de rendu d'Internet Explorer. Internet Explorer étant en fin de vie, cette directive est obsolète et peut être omise des nouvelles pages en toute sécurité.
Utiliser <meta http-equiv="refresh"> pour rediriger vers une autre page est déconseillé pour des raisons d'accessibilité. Il s'agit d'un échec documenté des WCAG 2.2 (Critères de succès 2.2.1 et 3.2.5) : cela ne laisse aucun contrôle à l'utilisateur sur la temporisation et peut désorienter les personnes utilisant des lecteurs d'écran ou ayant besoin de plus de temps pour lire. Préférez une vraie redirection HTTP côté serveur (une réponse 301/302). Si vous devez rediriger depuis le client, réglez le délai à 0 pour que la redirection soit immédiate, ou fournissez un lien visible que l'utilisateur peut activer lui-même.
Exemple de l'attribut HTML content
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git, with runnable examples to learn web development step by step." />
<meta name="keywords" content="HTML,CSS,JavaScript,PHP, Git" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
<h1>Example of the HTML "content" attribute</h1>
<p>Lorem ipsum, or lorem ipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Voici ce que fait chaque valeur content dans l'exemple ci-dessus :
width=device-width, initial-scale=1indique au navigateur d'adapter la mise en page à la largeur de l'écran de l'appareil et de démarrer à 100 % de zoom.- La valeur
description("Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git…") est le résumé de la page qu'un moteur de recherche peut afficher comme extrait de résultat. "HTML,CSS,JavaScript,PHP, Git"est la liste de mots-clés séparés par des virgules."30"sur la directiverefreshrecharge la page toutes les 30 secondes. Utilisez le rechargement automatique avec parcimonie — consultez la note d'accessibilité ci-dessus avant d'en dépendre.