Une balise meta, ou meta tag, est un élément placé dans le code HTML d’une page, à l’intérieur du tag parent <head>.
‘meta’ définit les métadonnées d’un site : description, affichage, indexation sur les moteurs de recherches, langue, formatage, etc.
Il en existe de plusieurs types, avec des utilisations très différentes. Certaines sont requises et nécessaires au bon fonctionnement d’un site, alors que d’autres sont optionnelles, obsolètes, voire officiellement déconseillées.
<!doctype html>
<html lang="en">
<head> <meta charset="utf-8">
<meta name="author" content="Maika Corp">
<meta name="description" content="Un site pour vous apprendre à coder des pages web !">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
</head> <body> [...] </body> </html>La balise meta qui est probablement la plus importante : le charset (ou Content-Type, jusqu’à HTML 4).
C’est cette meta qui vient définir le type d’encodage du document HTML – la façon dont sont décodés les caractères (d’où le nom, char – set). Par convention, on utilise aujourd’hui utf-8 :
<meta charset="utf-8">
C’est une donnée importante, car si un autre type d’encodage est utilisé, certains caractères spéciaux (par exemple, les accents) s’afficheront mal sur la page web.
Autre élément important dans les meta data, la description ! C’est généralement cet élément textuel qui est capturé par le moteur de recherche, puis affiché dans le listing des résultats de ce dernier (sous le titre de la page indexée).
Si votre but est de faire du SEO (Search Engine Optimisation), il faudra donc en tenir compte lors de son écriture, en veillant aux points suivants :
En voici un exemple :
<meta name="description" content="Fan du développement web ? Retrouvez ici les meilleures tutos du net">
La meta ‘viewport’. Le viewport est, techniquement, la partie visible de la page web, sur un écran.
Ce qu’il faut savoir ici, c’est que les mobiles font un rendu dans un viewport virtuel, souvent plus grand que l’écran (le viewport) lui même. Par défaut, l’affichage sera donc inadapté sur un smartphone, le résultat apparaîtra comme “dézoomé” et très peu lisible.
Il faut donc indiquer, via ce meta tag, que la taille du viewport affiché dépend de la taille du viewport du device :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sans cela, une page web ne sera pas responsive, une fois affiché sur un mobile.
S’il y a bien une balise utile au SEO, c’est celle-ci !
La balise meta ‘robots‘ est en effet celle qui est lue par les robots d’indexation des moteurs de recherche (ces bots qui viennent parcourir les pages web pour leur donner une note SEO).
Grâce aux valeurs définies dans ce tag, on peut signifier aux moteurs de recherche de :
Voici ces cas en pratique :
<!-- ne pas indexer du tout la page actuelle -->
<meta name="robots" content="noindex" />
<!-- ne pas suivre les liens de la page -->
<meta name="robots" content="nofollow" />
<!-- ne pas indexer les images de la page -->
<meta name="robots" content="noimageindex" />
<!-- ne pas utiliser d'extrait de texte -->
<meta name="robots" content="nosnippet" />
<!-- indexer tous les éléments : comportement par défaut -->
<meta name="robots" content="index" />
À noter qu’il est possible de rassembler tous les meta robots en une seule ligne de cette façon :
<meta name="robots" content="noindex, nofollow, noimageindex, nosnippet" />
Il est également possible de viser certains moteurs de recherche en particulier, en remplaçant le name du meta “robots” par celui spécifique au moteur :
<meta name="Googlebot" content="pour Google" />
<meta name="MSNbot" content="pour Live Search" />
<meta name="Slurp" content="pour Yahoo!" />
Si la balise robots n’est pas définie dans le document HTML, elle sera sur “index” par défaut ; c’est à dire que les robots l’indexeront et la parcourront normalement.
Il existe également des balises meta propres aux robots Google. Elles permettent d’être plus explicites envers ce moteur de recherche en particulier, en nous permettant de lui envoyer certaines informations supplémentaires. En voici quelques exemples :
<!-- Indique à Google de ne pas afficher de champ de recherche interne au site depuis sa page de résultats comme c'est parfois le cas -->
<meta name="google" content="nositelinkssearchbox" />
<!-- Empêche les services de synthèse vocale Google de lire les pages web à haute voix -->
<meta name="google" content="nopagereadaloud" />
Si tous les meta tags que nous avons cités jusque là ont une certaine importance, il en existe qui sont inutiles, obsolètes, voire qui nuisent à un site web.
La balise ‘author‘, comme celle ‘copyright‘, est là pour montrer à ceux qui vont venir explorer le code source de la page qui en est l’auteur. Mais, techniquement, elle n’est pas utile (cette information aura surtout sa place dans les conditions d’utilisation).
Si vous voulez la remplir, voici à quoi elle doit ressembler :
<meta name="author" content="Web Page Author" />
<meta name="copyright" content="© copyright" />
Autrefois utilisée pour aider au SEO, cette balise meta permet de lister un ensemble de mots-clés relatifs au site web. Les valeurs rentrées étant peu fiables (on pouvait y faire du bourrage de mots-clés sans rapport avec le contenu), elle est aujourd’hui devenue obsolète.
En voici un exemple :
<meta name="keywords" content="développement, Web, Internet, VSCode" />
On peut la remplir, elle ne nuira pas au référencement, mais elle ne l’aidera pas non plus.
S’il y a une balise à éviter, c’est bien le tag ‘refresh’. Ici, pas de rapport direct avec le SEO, mais plutôt avec l’expérience utilisateur.
La balise refresh permet, comme son nom l’indique, de rafraîchir la page à intervalle régulier. S’il y a potentiellement de bonnes raisons derrière ce besoin, recharger entièrement une page n’est pas une bonne solution pour garder ses utilisateurs (quel utilisateur aimerait que le site qu’il est en train de visiter se recharge sans raison apparente ?). Pour information, voilà à quoi ressemble cette balise :
<meta http-equiv="refresh" content="10">