Il existe plusieurs types de balises <meta>. Certaines servent à définir le comportement d'une page, tandis que d'autres permettent de bonifier la page avec certaines informations.

Voyons quelques-unes des balises <meta> les plus communes.

Charset

Cette balise définit l'encodage des caractères du document. Autrement dit, les caractères supportés sur une page. De nos jours, la valeur UTF-8 est pratiquement toujours attribuée à cet élément puisqu'elle offre un jeu de caractères universels, incluant la majorité des caractères spéciaux des différentes langues (accents, cédille, etc.).

Par exemple:

<meta charset="utf-8">

Si un plus ancien encodage ne supportant pas les accents était utilisé, comme le ASCII, les mots accentués, tel que: "Québec", afficheraient alors ainsi:

Québec

Viewport

Cette balise spécifie la dimension de référence de la fenêtre (viewport) sur les appareils mobiles 📱. Par défaut, cette balise est généralement initialisée avec les valeurs suivantes:

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

Width

Dans ce code, la partie width=device-width indique que la largeur de la fenêtre doit correspondre à la largeur de la fenêtre de l'appareil lui-même.

Sans cette valeur, l'appareil mobile tentera de déterminer la largeur du site par lui-même afin de le rendre entièrement visible dans la page, quite à effectuer un zoom arrière ou avant.

Par exemple, voici site contenant une image de 450px de large et un max-width: 100% suivis d'un texte sans largeur de défini. Ce même site est affiché sur desktop à gauche, sur mobile sans viewport au centre et avec un viewport à droite.

L'image étant plus large que le cadre des appareils mobiles (375px) et le texte n'ayant pas de largeur spécifiée, l'affichage variera en fonction de l'absence ou la présence du meta viewport.

Au centre, le navigateur tente de déterminer par lui-même la largeur de fenêtre (viewport) optimale et donc effectue un zoom arrière. Tandis qu'à gauche, la largeur de la fenêtre (viewport) est configurée afin de correspondre à la largeur du cadre de l'appareil. L'image respecte donc sa propriété max-width: 100% afin de prendre une largeur de 375px.

Initial-scale

La partie initial-scale=1 contenu dans la valeur de cette balise indique que la page ne doit pas être agrandie ou réduite au chargement initial de la page. Si désiré, il serait possible d'effectuer un zoom avant grâce à initial-scale=2 ou encore un zoom arrière à l'aide de initial-scale=0.5.

Minimum-scale & maximum-scale

Ces parties permettent de définir le zoom minimal ou maximal permis sur une page.

User-scalable

Lorsque cette partie est présente et qu'elle est définie à no, par exemple user-scalable: no, il est impossible pour l'usager d'agrandir ou de rapetisser la page en utilisant les fonctionnalités de zoom.

Description

La balise <meta name="description"> permet de fournir une brève description d'approximativement 155 caractères qui sera affichée sur les moteurs de recherche et qui sera utilisée par les navigateurs au moment de la création d'un favoris.

Par exemple:

<meta name="description" content="Programme de Techniques d'intégration multimédia du Collège Montmorency situé à Laval, Québec.">

Génèrera l'aperçu suivant sur Google:

Keywords

La balise <meta name="keywords"> permet de définir des mots-clés associés à la page courante.

Par exemple:

<meta property="keywords" content="Audio, Vidéo, Animation, Programmation, 3D">

Langage

la balise <meta name="langage"> permet de spécifier la langue de la page affichée sous un format ISO 639-1 (2 caractères).

Par exemple pour un site en français:

<meta name="langage" content="FR">

Comme son nom l'indique, la balise <meta name="copyright"> permet de spécifier que les médias et textes contenus sur une page appartiennent à une personne ou une entité.

Par exemple:

<meta name="copyright" content="Collège Montmorency">

Author

La balise <meta name="author"> permet de donner le crédit à la personne ou la compagnie aillant réaliser une page web.

Par exemple:

<meta name="author" content="Simon Arnold">

Robots

La balise <meta name="robots"> permet d'indiquer aux robots d'exploration des moteurs de recherche (Google, Bing, Yahoo) comment une page devrait être indexée.

Voici quelques-unes des valeurs possibles:

  • index indexer la page (par défaut, autrement dit, même si ce meta est omis, la page sera indexée).

  • noindex ne pas indexer la page.

  • nofollow na pas indexer aucun lien.

  • noimageindex ne pas indexer les images.

Par exemple:

<meta name="robots" content="noindex">