<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'encodage ISO-2022 et la famille d'encodage EBCDIC.

  • Attention : Les auteurs ne doivent pas utiliser CESU-8, UTF-7, BOCU-1 et SCSU. 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ériencer UTF-32 de UTF-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. Ici IANAcharset correspond à la valeur de l'attribut charset 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'attribut name 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

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

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'IANA

Attention :

  • 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.
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.

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 ou charset est utilisé. Le nom de la métadonnée document est associé à une valeur contenue dans l'attribut content. Les noms possibles et la signification de leurs valeurs (contenues dans l'attribut content) sont :

  • application-name, qui définit le nom de l'application web utilisée dans la page

    Note :

    • 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.
  • 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 HTTP Referer 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 et never.
    • L'insertion dynamique de <meta name="referrer"> (grâce à document.write ou appendChild) rend le comportement imprévisible.
    • Lorsque plusieurs règles conflictuelles sont définies, c'est la règle no-referrer qui est appliquée.
  • 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'attribut content 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 pour color-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 :

    html

    <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éristique prefers-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és
  • googlebot, synonyme de robots, est suivi par Googlebot, le robot de Google qui indexe les pages
  • publisher, 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

    Google, Yahoo, Bing

    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 fichier robots.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 et noindex, ou follow et nofollow. 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 de robots, 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 et 10.0 définit le ratio entre la taille de l'écran du terminal (device-width en portrait ou device-height en paysage) et la taille de la zone d'affichage.
    maximum-scale un nombre positif entre 0.0 et 10.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 et 10.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 ou no) Si la valeur est no, l'utilisateur ne pourra pas zoomer sur le document. Par défaut, la valeur est yes.

    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

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.

Exemples

HTML

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

Voir aussi