HTML - La balise meta
Article écrit par : sandy
Catégorie(s) de cet article : - La conception de site web
Mot(s)-clef(s) de cet article : - HTML
Introduction
La balise meta permet principalement un meilleur référencement de votre site auprès des robots d'indexation. Elle possède plusieurs attributs. Certaines sont cependant obligatoires car elle permettent une meilleure intégration de notre langue ou un meilleur affichage sur les mobiles.
L'attribut charset
Les explorateurs internet ont besoin de savoir comment est encodé votre page. Depuis HTML5, on va utiliser l'encodage `utf-8`. Cet encodage va prendre en compte toutes les lettres de la langue française par exemple, comme le « ç » ou les accents (et presque toutes les autres langues).
En code, cela donne :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
</head>
</html>
L'attribut name
L'attribut « name » regroupe plusieurs choses ayant trait au contenu de votre page. Certaines sont plus utiles que d'autres et certaines sont spécifiques à Google.
Le viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Cette instruction va permettre aux navigateurs de savoir comment contrôler les dimensions et la mise à l'échelle de la page.
Dans cet exemple, on va indiquer au navigateur que la page doit prendre toute la largeur de l'écran. La deuxième partie définit le niveau de zoom lorsque la page est chargée pour la première fois par le navigateur.
Un autre exemple :
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0" />
La description
Cette balise va donner une description courte du contenu de votre page, de l'article.
C'est ce qui sera souvent utilisé par les moteurs de recherche pour indiquer un résumé sous le lien vers votre site (SERP = Search Engine Results Page).
Cette balise est très importante et vous devez rédiger, avec attention, un texte d'une ou deux phrases (environ 150 caractères).
<meta name="description" content=" Votre description" />
Le robots
Cette balise permet de contrôler l'exploration et l'indexation de notre document par les moteurs de recherche. Normalement, tous les robots devraient respecter cette balise, mais il faut bien l'avouer, ce n'est pas le cas. Donc, vous ne pouvez pas compter sur elle pour empêcher des bots d'aller sur des pages d'administration par exemple.
<meta name="robots" content="..." />
Si vous voulez autoriser les robots :
<meta name="robots" content="index" />
Si par contre vous ne voulez pas autoriser les robots :
<meta name="robots" content="noindex" />
Si vous voulez que les robots suivent les liens de votre pages :
<meta name="robots" content="follow" />
Bon, en fait, le content follow ne sert pas à grand chose, puisque les robots vont de toute façon suivre les liens ...
On peut mettre ces balises sur une même ligne :
<meta name="robots" content="index,nofollow" />
Je conseille de mettre en « noindex » des pages qui ne servent pas pour votre référencement, comme la page des catégories, des mots-clefs, des archives, etc. Ce sont des pages où il n'y a que peu de texte et beaucoup de liens qui peuvent être redondants et ainsi nuire à votre référencement.
L'auteur
Pour indiquer qui est l'auteur de la page, on va aussi utiliser une balise « meta ». C'est surtout utilisé par les robots de recherche comme Google. Vous pouvez bien sûr indiquer plusieurs auteurs, il suffira de séparer les noms avec une virgule.
<meta name="author" content="nom de l’auteur" />
Le copyright
Les droits d'auteur peuvent aussi être mis dans une balise meta :
<meta name="copyright" content="propriétaire du droit d'auteur" />
les mots-clefs
La balise des mots-clefs (keywords) permettait d'avoir un meilleur référencement en plaçant dans cette balise des mots sensés représenter votre article. Certains ont abusé de cette balise en plaçant des mots-clefs n'ayant parfois rien à voir avec l'article.
Google et Bing et probablement d'autres ont déclassé cette balise, au point que certains disent qu'elle ne sert plus à rien. D'autres préconisent de la laisser, car elle sert quand même encore un peu.
<meta name="keywords" content="mot-clef, mot-clef, mot-clef" />
L'attribut property
Écrire des articles de blog est une très bonne chose, mais ce qui est encore mieux, c'est que des personnes bien réelles, et non pas seulement des robots (bots) ou des explorateurs internet, lisent vos articles.
Pour obtenir des lecteurs (visiteurs), vous devez obtenir de la visibilité, et quoi de mieux que d'avoir un lien qui pointe vers votre site ? Pour vous mettre en avant, il existe la possibilité de faire des liens avec en plus des descriptions et une image de mise en avant. C'est tout à fait possible grâce à la balise « meta » avec l'attribut property.
Il s'agit d'une balise « meta » open graph de The Open Graph protocol . Cette balise a une vocation sociale, c'est à dire qu'elle sera utilisé par Meta, Discord, Pinterest, etc.
Dans la balise `<head>`, nous allons spécifier que nous utilisons ce protocole. Ensuite, nous allons indiquer le titre de l'article ou de la page, le type de site, l'URL de la page, l'URL de l'image et d'autres données comme la taille de l'image, son alt (Nous verrons ce que c'est dans un autre article) et la description de la page qui reprend tout simplement celle de la balise name avec l'attribut «description». Cela donne par exemple :
<head prefix="og: https://ogp.me/ns#">
<meta property="og:title" content="Le titre de la page" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://eridiane.fr" />
<meta property="og:image" content="https://eridiane.fr/logo.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="C'est le logo de mon site" />
<meta property="og:description" content="Là, je place la description de ma page ou de mon article." />
</head>
Pour Twitter (X), c'est un peu particulier :
<head>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@mon nom d'utilisateur sur Twitter" />
<meta name="twitter:title" content="Les balises meta avec attributs name" />
<meta name="twitter:description" content="Pour tout savoir sur les balises meta" />
<meta name="twitter:image" content="https://Mon_image.jpg" />
</head>
Pour connaître le fonctionnement et d'autres balises Twitter : Optimiser les Tweets avec cartes Twitter.
Par contre, attention, pour les images, il vous faut des tailles particulières selon le média-social. Au jour de l'écriture de cet article, pour Twitter, il faut une dimension minimum de 300x157 ou au maximum de 4096x4096 pixels.
Rafraîchir une page
Cette balise permet de rafraîchir une page avec comme valeur un nombre représentant des secondes. Elle peut aussi permettre de rediriger vers une autre page au bout d'un certain temps.
<meta http-equiv="refresh" content="30" />
Comme vous pouvez le constater, je mets des indentations. Le code fonctionne sans, mais c'est bien plus lisible ainsi, et cela aura beaucoup d'importance quand votre code dépassera les 50 lignes. Prenez les bonnes habitudes dès maintenant.
Il existe de nombreuses autres balises que nous verrons par la suite.
Dans le prochain article, nous allons pouvoir commencer à écrire du code qui se voit par vos lecteurs.
PHPStorm : Astuces !
Dans PHPStorm, à la date de création de cet article, les balises auto-fermantes ne sont pas tout à fait correctes. En effet, il manque le « / » à la fin.
Pour y remédier, il suffit de faire :
- ctrl alt S
- editor -> live template
- changer la façon dont la balise est générée par PHPStorm
Vous verrez au fur et à mesure d'autres balises auto-fermantes qu'il faudra modifier.
Ajouter un commentaire :
Publicité
Thèmes abordés:
Publicité
Les commentaires
Il n'y a pas encore de commentaire, mais cela ne serait tarder ...