<meta> : l'élément de métadonnées du document
L'élément HTML <meta>
représente toute information de métadonnées qui ne peut pas être représentée par un des éléments (<base>
, <link>
, <script>
, <style>
ou <title>
)
Attributs
Comme tous les autres éléments, cet élément inclut les attributs universels.
Note : Il faut préciser que l'attribut name
possède une signification spécifique à l'élément <meta>
et que l'attribut itemprop
ne doit pas être utilisé quand l'un de ces attributs est déjà utilisé : name
, http-equiv
ou charset
.
charset
-
Cet attribut déclare l'encodage utilisé par la page. Il peut être outrepassé de manière locale en utilisant l'attribut
lang
d'un élément. La valeur de cet attribut est une chaîne de caractères et doit être l'un des noms MIME préférés d'un encodage comme spécifié par l'IANA. Bien que le standard ne fixe pas d'encodage particulier, il fournit cependant quelques recommendations :- Les auteurs sont invités à utiliser UTF-8.
- Les auteurs ne devraient pas utiliser d'encodage incompatible avec l'ASCII (c'est à dire ceux dont les codes 8-bits de 0x20 à 0x7E ne correspondent pas, de manière respective, aux codes Unicode 0x0020 à 0x007E) car ceux-ci représentent un risque de sécurité, les navigateurs ne les supportant pas pouvant traduire du contenu bénin en des éléments HTML. Ceci est le cas pour les jeux de caractères suivants :
JIS_C6226-1983
,JIS_X0212-1990
,HZ-GB-2312
,JOHAB
, la famille d'encodageISO-2022
et la famille d'encodageEBCDIC
. -
Attention : Les auteurs ne doivent pas utiliser
CESU-8
,UTF-7
,BOCU-1
etSCSU
. Ceux-ci rejoignent le cas précédents et n'ont pas été conçus pour être utilisés sur le web. Certaines attaques de types XSS (Cross-site scripting) ont pu être recensées avec ces encodages. -
Attention : Les auteurs ne devraient pas utiliser
UTF-32
car certains algorithmes d'encodage HTML5 ne peuvent différiencerUTF-32
deUTF-16
.
Note :
- Le jeux de caractères déclaré doit correspondre à celui utilisé dans la page. Il est inutile de déclarer un jeu de caractères incorrect (cela entraînant également une mauvaise expérience utilisateur).
- L'élément
<meta>
doit appartenir à l'élément<head>
et doit apparaître parmi les 512 premiers octets de la page. En effet, certains navigateurs ne consultent seulement ces premiers octets pour déterminer l'encodage utilisé pour la page. - L'élément
<meta>
ne représente qu'une partie de l'algorithme déterminant le jeu de caractères à appliquer sur la page par le navigateur. Ainsi, l'en-tête HTTP Content-Type et tous les éléments BOM auront une priorité supérieure à cet élément. - Définir le jeu de caractères utilisé grâce à cet attribut représente une bonne pratique et est fortement recommandé. Si aucun encodage n'est défini pour la page, plusieurs techniques XSS peuvent porter atteinte à l'utilisateur (voir l'exemple de la technique XSS de recours à UTF-7). Toujours renseigner cet élément meta protégera contre ces dangers.
- L'élément
<meta>
est un synonyme de<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">
utilisé avant HTML5. IciIANAcharset
correspond à la valeur de l'attributcharset
correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée.
content
-
Cet attribut fournit la valeur associée avec l'attribut
http-equiv
ou l'attributname
suivant le contexte utilisé. http-equiv
-
Cet attribut pouvant prendre des valeurs pré-définies représente un objet pouvant modifier le comportement des serveurs ou des agents utilisateur. Sa valeur est définie grâce à l'attribut
content
et peut être l'une des suivantes :content-language
Obsolète-
Définit la langue par défaut utilisée par une page
Attention : Cette valeur n'est plus recommandée et ne doit donc plus être utilisée. L'attribut
lang
de l'élément<body>
doit être utilisé pour remplir cette fonction. Content-Security-Policy
-
Cette valeur permet aux administrateurs de sites web de définir des règles de gestion de contenu pour les ressources qui sont servies. Cela permet notamment d'indiquer les origines valides et les points d'accès aux scripts afin de protéger contre les attaques XSS.
content-type
Obsolète-
Ce champ d'attribut définit le type MIME du document et peut être suivi par son jeu de caractères. Il respecte la même syntaxe que le champ
content-type
appartenant à l'en-tête HTTP. Cet attribut faisant, lui, partie d'un élément HTML, il n'est pas possible d'utiliser la plupart des valeurs. La syntaxe correcte pour son contenu est donc la chaîne de caractère'text/html
' éventuellement suivie par un jeu de caractères avec la syntaxe suivante : '; charset=
IANAcharset
' oùIANAcharset
est l'appellation MIME du jeu de caractères, présentée par l'IANAAttention :
- Ce champ n'est plus recommandé et ne donc doit pas être utilisé. L'attribut
charset
de l'élément<meta>
doit être utilisé à la place. - Étant donné que l'élément
<meta>
peut ne pas être utilisé pour changer le type d'un document XHTML, ou d'un document HTML5 précédé par une syntaxe XHTML, il ne faut pas utiliser ce champs pour définir un type MIME étant un type MIME XHTML. Cela serait incorrect. - Seuls les documents HTML peuvent utiliser ce champ, cela entraîne donc une certaine redondance. C'est pourquoi il a été rendu obsolète et remplacé par l'attribut
charset
.
- Ce champ n'est plus recommandé et ne donc doit pas être utilisé. L'attribut
refresh
-
Ce champ définit :
- le nombre de secondes qu'il faudrait attendre avant de recharger la page si l'attribut
content
contient seulement un nombre entier positif - le nombre de secondes qu'il faudrait attendre avant que la page soit redirigée vers une autre page, si l'attribut
content
contient un nombre entier positif suivi par la chaîne de caractères ';url=
' ainsi qu'une URL valide.
- le nombre de secondes qu'il faudrait attendre avant de recharger la page si l'attribut
-
Ce champ définit un cookie pour la page. Son contenu doit respecter la syntaxe énoncée par la IETF HTTP Cookie Specification.
Attention : Ce champ est désormais obsolète et ne doit donc pas être utilisé. L'en-tête HTTP Set-Cookie doit être utilisée à la place. Cette valeur a été retirée du standard et n'est plus prise en charge à partir de Firefox 68 et de Chrome 65.
name
-
Cet attribut définit le nom d'un métadonnée au niveau du document. Il ne doit pas être utilisé si l'un des attributs
itemprop
,http-equiv
oucharset
est utilisé. Le nom de la métadonnée document est associé à une valeur contenue dans l'attributcontent
. Les noms possibles et la signification de leurs valeurs (contenues dans l'attributcontent
) sont :application-name
, qui définit le nom de l'application web utilisée dans la pageNote :
- Les navigateurs peuvent l'utiliser pour identifier l'application. Il est à distinguer de l'élément
<title>
qui contient généralement le nom de l'application mais qui contient aussi des informations comme le nom du document ou un statut - Les pages web simples ne devraient pas utiliser cet attribut de métadonnée.
- Les navigateurs peuvent l'utiliser pour identifier l'application. Il est à distinguer de l'élément
author
, définit le nom de l'auteur du document (pas de contrainte de format)description
, contient un résumé concis et pertinent du contenu de la page. Plusieurs navigateurs, dont Firefox et Opera, utilisent cette métadonnée comme description de la page lorsque celle-ci est mise dans les favoris.generator
, contient l'identifiant du logiciel ayant généré la page (pas de contrainte de format)keywords
, contient une liste de mots-clés séparés par des virgules. Ces mots-clés sont pertinents et relatifs au contenu de la page.referrer
qui contrôle l'en-tête HTTPReferer
attachée aux requêtes envoyées à partir du document :Valeurs pour l'attribut content
de<meta name="referrer">
no-referrer
Aucun en-tête HTTP Referer
n'est envoyé.origin
Seule l'origine du document est envoyée. no-referrer-when-downgrade
L'origine est envoyée envers les URL qui sont aussi sécurisée que la page courante (https→https). Aucun référent n'est envoyé lorsque l'URL est moins sécurisée (https→http). Cette valeur est la valeur par défaut. origin-when-crossorigin
L'URL complète (sans les paramètres) est envoyée pour les requêtes provenant de la même origine. Dans les autres cas, seule l'origine est envoyée. same-origin
Un référent est envoyé pour les sites d'origine équivalente, mais les requêtes entre différentes origines ne contiendra pas de référent. strict-origin
Seule l'origine du document est envoyée pour les destinations a priori aussi sécurisées que la page courante (HTTPS->HTTPS) mais cette information n'est pas envoyée vers une destination moins sécurisée (HTTPS->HTTP). strict-origin-when-cross-origin
L'URL complète est envoyée pour une requête provenant de la même origine. Seule l'origine du document est envoyée pour les destinations aussi sécurisées que la page (HTTPS->HTTPS), aucun en-tête n'est envoyé pour les destinations moins sécurisées (HTTPS->HTTP). unsafe-URL
L'URL complète (sans les paramètres) est envoyée pour les requête d'origines équivalents et pour les autres requêtes (cross-origin). Note :
- Certains navigateurs prennent en charge les valeurs dépréciées
always
,default
etnever
. - L'insertion dynamique de
<meta name="referrer">
(grâce àdocument.write
ouappendChild
) rend le comportement imprévisible. - Lorsque plusieurs règles conflictuelles sont définies, c'est la règle
no-referrer
qui est appliquée.
- Certains navigateurs prennent en charge les valeurs dépréciées
theme-color
qui indique une suggestion de couleur que l'agent utilisateur devrait prendre en compte afin de personnaliser l'affichage de la page ou l'interface utilisateur environnante. L'attributcontent
contiendra une couleur valide au sens CSS (cf.<color>
).color-scheme
-
Définit un ou plusieurs modes de couleurs avec lesquels le document est compatible. Le navigateur utilisera cette information ainsi que les réglages du navigateur ou de l'appareil pour déterminer les couleurs à utiliser (que ce soit pour l'arrière-plan, les contrôles, les barres de défilement, etc.).
<meta name="color-scheme">
sert principalement à indiquer la compatibilité et la préférence pour les différents modes de couleur (sombre / clair entre autres).La valeur de
content
pourcolor-scheme
peut être :normal
-
Le document n'est pas affecté par les modes de couleurs et devrait utiliser la palette de couleur par défaut.
[light
|dark]+
-
Un ou plusieurs modes de couleurs sont pris en charge par le document. Si un nom de mode est répété, cela est équivalent à le mentionner une seule fois. Lorsque plusieurs modes sont présents, cela indique une préférence pour le premier et aussi que le second est acceptable si l'utilisateur préfère celui-ci.
only light
-
Indique que le document prend uniquement en charge un mode clair (avec un fond clair et du contenu sombre). La valeur
only dark
n'est pas valide selon la spécification car le mode sombre est généralement mois lisible et que les navigateurs utilisent un mode clair par défaut.
Ainsi, si on préfére utiliser un mode sombre et laisser le mode clair utilisable, on pourra écrire :
<meta name="color-scheme" content="dark light">
Cela fonctionne pour l'ensemble du document. Pour cibler des éléments en particulier, on pourra utiliser la propriété CSS
color-scheme
. La mise en forme pourra tirer parti du mode utilisé par le système grâce à la caractéristiqueprefers-color-scheme
.
Cet attribut peut également avoir une valeur définie dans une liste plus large : WHATWG Wiki MetaExtensions. Bien qu'aucune n'ait encore été acceptée, certaines sont parfois utilisées fréquemment :
creator
, définit le nom du créateur du document (sans contrainte de format). Cela peut être le nom d'une institution. Si plusieurs créateurs sont à recenser, plusieurs éléments<meta>
devront être utilisésgooglebot
, synonyme derobots
, est suivi par Googlebot, le robot de Google qui indexe les pagespublisher
, définit le nom de l'éditeur du document (sans contrainte de format). Cela peut être le nom d'une institution.robots
, définit le comportement que les robots d'indexation devraient respecter. C'est une liste de valeurs séparées par des virgules. La liste qui suit définit les valeurs que l'on peut utiliser :Valeurs pour le contenu de <meta name="robots">
Valeur Description Utilisé par index
Permet au robot d'indexer la page Tous noindex
Interdit au robot d'indexer la page Tous follow
Permet au robot de suivre les liens contenus dans la page Tous nofollow
Interdit au robot de suivre les liens contenus dans la page Tous none
Synonyme de noindex
,nofollow
Google noodp
Empêche que la description Open Directory Project si celle-ci est présente, soit affichée dans les résultats du moteur de recherche noarchive
Empêche le moteur de recherche de mettre en cache le contenu de la page Google, Yahoo nosnippet
Empêche l'affichage de la description de la page dans les résultats du moteur de recherche Google noimageindex
Empêche la page d'apparaître en tant que page de référence ayant permis l'indexation de l'image Google noydir
Empêche l'utilisation et l'affichage de la description Yahoo Directory parmi les résultats du moteur de recherche, si celle-ci est présente Yahoo nocache
Synonyme de noarchive
Bing Note :
- Seuls les robots « respectueux » suivront ces règles. Il ne faut pas considérer cela comme une manière efficace de blocage (robots indexeurs cherchant des adresses e-mails pour le spam notamment)
- Le robot aura besoin d'accéder à la page pour lire la valeur de la métadonnée. Afin d'empêcher des accès intempestifs (par exemple pour réduire le débit utilisé) un fichier robots.txt doit être utilisé en priorité (ou en complément).
- Si vous souhaitez retirer la page du contenu d'un index, la valeur
noindex
fonctionnera mais seulement à partir de la prochaine analyse. Assurez-vous de ne pas bloquer cette analyse (par exemple avec le fichierrobots.txt
). Certains moteurs de recherches ont des outils destinés aux développeurs qui permettent de rapidement désindexer une page. - Certaines valeurs sont contradictoires et incompatibles :
index
etnoindex
, oufollow
etnofollow
. Dans le cas où ces valeurs sont utilisées simultanément, le comportement d'un robot est indéfini et peut varier selon les robots. Il est donc conseillé d'éviter de tels cas de figures. - Certains robots, comme ceux de Google, Yahoo Search ou Bing, supportent ces valeurs quand elles sont utilisées dans une directive HTTP
X-Robots-Tags
: . Cela permet d'utiliser cette information pour des documents non-HTML comme les images.
slurp
, synonyme derobots
, qui est suivi uniquement par Slurp, le robot d'indexation de Yahoo Search.
Enfin, quelques noms sont utilisés fréquemment mais sont pas considérés comme standards :
viewport
, qui donne une indication quant à la taille du viewport (vue virtuelle). Cette information est utilisée pour les terminaux mobiles uniquement :Valeurs pour le contenu de <meta name="viewport"> Valeur Valeurs possibles Description width
un nombre entier positif ou le mot-clé device-width
Définit la largeur, en pixels, de la zone d'affichage (viewport) dans laquelle on veut que le site soit affiché. height
un nombre entier positif ou le mot-clé device-height
Définit la hauteur, en pixels, de la zone d'affichage (viewport) dans laquelle on veut que le site soit affiché. initial-scale
un nombre positif entre 0.0
et10.0
définit le ratio entre la taille de l'écran du terminal ( device-width
en portrait oudevice-height
en paysage) et la taille de la zone d'affichage.maximum-scale
un nombre positif entre 0.0
et10.0
définit la valeur maximale du zoom possible. Doit être supérieur ou égal à minimum-scale
, sinon le comportement est indéterminéminimum-scale
un nombre positif entre 0.0
et10.0
définit la valeur minimale du zoom possible. Doit être inférieur ou égal à maximum-scale
, sinon le comportement est indéterminéuser-scalable
un booléen ( yes
ouno
)Si la valeur est no
, l'utilisateur ne pourra pas zoomer sur le document. Par défaut, la valeur estyes
.Attention :
- Bien qu'il ne fasse pas partie du standard, cet attribut est utilisé par plusieurs navigateurs mobiles comme Safari Mobile, Firefox pour Mobile ou Opera Mobile.
- Les valeurs par défaut peuvent être différentes suivant les appareils et les navigateurs.
- Pour en savoir plus sur l'utilisation faite de cet attribut par Firefox pour Mobile, vous pouvez lire cet article.
scheme
Obsolète-
Cet attribut définit le schéma dans lequel la métadonnée est décrite. Un schéma, de la même manière qu'un format, est un contexte permettant d'interpréter correctement la valeur de l'attribut
content
.Attention : Cet attribut a été déprécié et ne doit donc plus être utilisé. Il n'y pas d'attributs ou d'éléments remplaçant sa fonction car cet attribut n'était pas usité.
Notes
Selon les attributs qui sont renseignés, la métadonnée peut être de différentes sortes :
- si
name
est renseigné, c'est une métadonnée de document s'appliquant à la page entière, - si
http-equiv
est renseigné, c'est une information transmise au serveur web indiquant comment la page doit être servie (pragma directive en anglais), - si
charset
est renseigné, c'est une déclaration sur le jeu de caractères, autrement dit l'ensemble de caractères utilisés pour la version sérialisée de la page web, - si
itemprop
est renseigné, c'est une métadonnée définie par l'utilisateur, gérée de manière transparente par l'agent utilisateur car la signification de cette métadonnée est spécifique à l'utilisateur. Expérimental
Exemples
HTML
<!-- En HTML5 -->
<meta charset="utf-8">
<!-- Rediriger la page après 3 secondes -->
<meta http-equiv="refresh" content="3;url=http://www.mozilla.org">
Accessibilité
Rafraîchir le contenu
Les pages utilisant une valeur de refresh
trop petite peuvent ne pas laisser le temps nécessaire à la compréhension aux personnes qui utilisent un lecteur d'écran. Le changement brutal de contenu peut également être source de confusion pour les personnes à faible vision.
Redimensionner la zone d'affichage (viewport)
Désactiver la possibilité de zoom avec user-scalable: no
empêche les personnes à faible vision de lire et de comprendre le contenu de la page.
Résumé technique
Catégories de contenu |
Contenu de métadonnées. Si l'attribut
itemprop est utilisé : du
contenu de flux
ou du
contenu phrasé.
|
---|---|
Contenu autorisé | Aucun cet élément est un élément vide. |
Omission de balises | Étant un élément vide, la balise de début doit être présente et la balise de fin doit être absente. |
Éléments parents autorisés |
<meta charset> , <meta http-equiv> :
un élément <head> . Si l'attribut
http-equiv n'est pas une
déclaration d'encodage, l'élément peut également être au sein d'un
élément <noscript> lui-même contenu par un
élément <head> .<meta name>
: tout élément acceptant du contenu de métadonnées.<meta itemprop>
: tout élément acceptant du contenu de métadonnées ou du contenu phrasé.
|
Rôles ARIA autorisés | Aucun. |
Interface DOM | HTMLMetaElement (en-US) |
Spécifications
Specification |
---|
HTML Standard # the-meta-element |
Compatibilité des navigateurs
BCD tables only load in the browser