Utiles à la fois au SEO et au bon affichage d’un site web, les balises meta, présentes dans le code HTML, sont pourtant mal connues, voire ignorées.
Certaines étant devenues obsolètes, beaucoup de développeurs freelances ou d’intégrateurs les omettent tout simplement. Mais les meta tags, notamment responsables d’une partie du SEO, méritent pourtant qu’on y accorde du temps !
Voyons dans cet article à quoi elles servent en détail, et comment bien les utiliser.
Le point sur les balises HTML meta
Qu’est-ce qu’une balise meta ?
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>.
Ces balises s’appellent ‘meta’ car elles définissent les métadonnées d’un site : description, affichage, indexation sur les moteurs de recherches, etc.
Comme nous le verrons, 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 obsolètes, voire officiellement déconseillées.
À quoi ressemble une balise meta ?
Si vous êtes développeur, vous savez déjà à quoi ressemblent ces tags. Nous allons tout de même donner un exemple complet de code HTML, pour pouvoir détailler par la suite ces différentes balises :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Maika Corp">
<meta name="description"
content="Are you looking for a café nearby to work from? Maika is there for you! With Maika, find and rate all remote-friendly coffee shops around!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
</head>
<body>
[...]
</body>
</html>Ce n’est qu’un exemple parmi tant d’autres : toutes les balises existantes n’y sont pas présentes, et celles qui y sont ne sont pas toutes obligatoires.
Les différentes balises meta
Le charset
Commençons par 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.
La meta description
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 :
- doit contenir les mots-clés sur lesquels on veut référencer la page ;
- ne doit pas être trop longue (environ 150 caractères maximum) ;
- tout en donnant envie de cliquer sur le lien (c’est un humain qui clique, pas le robot Google !).
En voici un exemple :
<meta name="description" content="Vous vous intéressez à la cuisine végane ? Retrouvez ici les meilleures recettes sans produit animal">la meta viewport
Autre balise très importante, 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.
La balise meta robots
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 :
- ne pas indexer la page courante – utile en cas de page nécessitant un login, type page d’administration ;
- ne pas suivre les liens présents sur la page – peu utile, on l’appliquera plutôt au cas par cas, lien par lien ;
- empêcher que les images présentes sur la page soient indexées sur Google Images ;
- ne pas utiliser de description ou d’extrait dans la liste des résultats.
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.
Les balises propres à Google
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" />Pour toutes les retrouver, rendez-vous sur la documentation officielle du moteur de recherche.
Les balises meta inutiles, obsolètes ou à éviter
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
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" />Le tag keywords
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="nourriture, vegan, vege, sain" />On peut la remplir, elle ne nuira pas au référencement, mais elle ne l’aidera pas non plus.
La balise refresh
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">Conclusion
Comme nous l’avons vu dans cet article, les balises meta vont bien plus loin que donner un titre et une description à un site ! Ce sont elles qui définissent ce qu’est une page web, la façon dont elle doit être analysées, à la fois par le navigateur et les robots des différents moteurs de recherche.
On peut se contenter d’utiliser les métadonnées générées par défaut, mais si on veut vraiment optimiser la visibilité d’un site web, il est bon de se pencher sur ces petites balises souvent oubliées.
