Les balises meta en HTML sont des balises spéciales qui permettent de fournir des informations supplémentaires à propos d’une page web. Ces informations ne sont pas affichées directement sur la page elle-même, mais elles sont utilisées par les moteurs de recherche, les navigateurs et les développeurs pour mieux comprendre le contenu de la page. Elles sont généralement placées dans l’en-tête de la page, c’est à dire entre les balises <head> et </head> .
L’une des principales utilisations des balises meta est d’améliorer le référencement. Les moteurs de recherche utilisent les informations contenues dans les balises meta pour comprendre le contenu de la page et pour l’afficher dans les résultats de recherche pertinents. Par exemple, les balises comme la « meta description » et les « meta keywords » peuvent aider les moteurs de recherche à comprendre le contenu de la page.
Les balises meta peuvent également fournir des informations supplémentaires aux navigateurs sur la page, telles que la description de la page ou les informations de l’auteur. Cela peut améliorer l’expérience utilisateur en donnant une meilleure idée de ce que contient la page.
Certaines balises meta permettent également de contrôler l’affichage de la page sur les différents types d’écrans. Par exemple, la balise « meta viewport » permet de contrôler l’affichage de la page pour s’adapter aux différents tailles d’écran.
Enfin, la balise « meta refresh » permet de rediriger automatiquement les utilisateurs vers une autre page après un certain délai. Cela peut être utile pour rediriger les utilisateurs vers une page de maintenance ou pour rediriger les utilisateurs vers une nouvelle version de la page.
Il est important de noter que les balises meta ne sont pas utilisées uniquement pour les moteurs de recherche, ils ont aussi des utilisations pour les navigateurs, les utilisateurs et les développeurs. Il est donc important de les utiliser correctement et de les maintenir à jour pour améliorer l’expérience utilisateur et la visibilité de la page.
Anatomie des balises meta
Une balise meta est composée d’un nom ou d’un équivalent HTTP, qui définit la nature de l’information, et d’un contenu qui fournit la valeur associée à ce nom ou équivalent HTTP.
Une balise META est donc une paire mot-clé / valeur, transcrite en HTML de la manière suivante :
<meta name|http-equiv="Mot-clé" content="Valeur" />Il est important de noter que chaque balise meta utilise soit l’attribut « name » soit l’attribut « http-equiv », mais pas les deux de manière simultanée ou arbitraire. Il est important de choisir le bon attribut en fonction de la nature de l’information à transmettre.
De façon plus concrète, nous écrirons une balise meta pour décrire le contenu d’une page de la façon suivante :
<meta name="description" content="Description du contenu informatif de la page…" />Les balises meta d’interprétation
Meta charset
La balise Meta Charset est utilisée pour spécifier le jeu de caractères utilisé pour la page web. Elle permet de définir comment les données textuelles seront transmises et stockées en les convertissant en binaire. La valeur couramment utilisée pour cette balise est UTF-8, qui est un jeu de caractères universel qui permet de couvrir un grand nombre de langues et de caractères spéciaux. En utilisant UTF-8, vous indiquez au navigateur d’utiliser ce jeu de caractères pour afficher correctement le contenu de la page.
<meta charset="utf-8">Il est recommandé de la placer au tout début de la section <head>, surtout avant <title>, car ce dernier peut déjà être concerné par l’encodage des caractères.
Meta viewport
La balise meta viewport est utilisée pour indiquer aux navigateurs comment adapter la taille d’une page web aux différents écrans des appareils utilisés pour la consulter. Elle permet de définir les dimensions de l’affichage de la page web et de gérer les éléments de la page web de manière à s’adapter aux différents formats d’écrans et résolutions.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Par exemple, si un site web est conçu pour être affiché sur un écran d’ordinateur de bureau, il pourrait ne pas s’afficher correctement sur un écran de smartphone. En utilisant la balise Meta viewport, on peut spécifier les dimensions de l’affichage de la page web pour s’adapter à l’écran de smartphone.
Meta generator
La balise meta generator est utilisée pour indiquer aux navigateurs quel logiciel ou quelle plateforme a été utilisée pour générer la page web. Elle permet aux utilisateurs de savoir quel outil a été utilisé pour créer un site web et éventuellement de consulter une documentation ou un support technique spécifique à l’outil utilisé.
Elle permet également aux éditeurs de logiciel de pouvoir obtenir des informations sur l’utilisation de leur outil. Ils peuvent savoir combien de pages ont été créées avec leur logiciel, combien de sites utilisent leur CMS, s’il y a une adoption rapide des dernières versions majeures, etc. Cela permet aux éditeurs de logiciel de mieux comprendre l’utilisation de leur outil et de prendre des décisions éclairées pour améliorer leur produit.
<meta name="generator" content="WordPress 5.6">Dans cet exemple, le code indique que le site a été créé à l’aide de WordPress version 5.6. Il est important de noter que l’utilisation de cette balise n’a pas d’impact sur le SEO.
Les balises meta SEO (Search Engin Optimisation)
Meta description
Cette balise permet de fournir une description courte de la page qui peut être utilisée dans les résultats de recherche. Elle doit être concise, descriptive et contenir des mots-clés pertinents pour la page.
<meta name="description" content="Découvrez notre sélection de pâtisseries françaises faites maison. Commandez en ligne et faites-vous livrer à domicile. Nous avons des options végétariennes et sans gluten disponibles.">Il est important de noté que c’est le contenu de la description sera affiché dans la liste des résultats de recherche sous le titre des la page présentées par le moteur. Le titre lui, sera issu de la balise <title>.
Meta robots
Cette balise permet d’indiquer aux moteurs de recherche s’ils doivent ou non indexer la page ou suivre les liens contenus dans la page. La valeur « index, follow » permet aux moteurs de recherche d’indexer la page et de suivre les liens, tandis que la valeur « noindex, nofollow » empêche les moteurs de recherche de les indexer et de suivre les liens.
<meta name="robots" content="index, follow">Dans cet exemple, la balise meta robots contient la valeur « index, follow« . Cela signifie que les moteurs de recherche sont autorisés à indexer la page et à suivre les liens contenus dans la page. Cela permet aux moteurs de recherche de comprendre le contenu de la page et de l’inclure dans leurs résultats de recherche pour les utilisateurs.
Il est également possible de cibler les instructions pour un moteur de recherche spécifique en remplaçant le mot-clé « robots » par le nom du robot d’indexation du moteur visé.
<meta name="Googlebot" content="index, follow" />
<meta name="Slurp" content="nofollow" />
<meta name="MSNbot" content="noindex, nofollow" />La première ligne indique aux robots d’indexation de Google de référencer cette page (index) et de suivre les liens (follow) sur cette page lors de l’indexation. La seconde ligne indique aux robots d’indexation de Yahoo de ne pas suivre les liens (nofollow) sur cette page lors de l’indexation. Enfin, la troisième ligne indique aux robots d’indexation de Live Search de ne pas indexer (nofoindex) la page et ne pas suivre les liens (nofollow) sur cette page lors de l’indexation
Meta content-Language
Cette balise permet de préciser la langue principale de la page Web.
<meta http-equiv="Content-Language" content="fr-FR">Ce code indique que la langue française est la langue principale de la page Web courante.
Auteur et droit d’auteur
La balise méta « Author » et « Copyright » permet aux propriétaires de sites web de spécifier l’auteur et le propriétaire légal du contenu d’une page HTML dans le code source. Certaines plateformes de gestion de contenu (CMS) peuvent automatiquement insérer ces informations, permettant aux administrateurs de voir qui a créé et géré une page spécifique. Ces balises méta sont optionnelles en droit français.
<meta name="author" content="nom de l’auteur" />
<meta name="copyright" content="propriétaire du copyright" />Les balises meta pour les réseux sociaux
Il existe des balises meta spécifiques qui permettent de faciliter la partage de pages sur les réseaux sociaux. Ces balises permettent de contrôler les informations qui sont affichées lorsque quelqu’un partage une page sur un réseau social, comme le titre, la description, l’image ou encore la page qui est affichée.
Les balises meta Open Graph (Facebook, linkedin, …)
La balise meta « og:title » permet de définir le titre de la page qui sera affiché lorsque la page est partagée sur les réseaux sociaux. Par exemple, cela permet de définir un titre plus accrocheur pour les médias sociaux que le titre standard de la page.
<meta property="og:title" content="Titre accrocheur pour les médias sociaux" />La balise meta « og:description » permet de définir la description de la page qui sera affichée lorsque la page est partagée sur les réseaux sociaux. Cela permet de définir une description plus spécifique pour les réseaux sociaux que la description standard de la page.
<meta property="og:description" content="Description spécifique pour les réseaux sociaux" />
La balise meta « og:image » permet de définir l’image qui sera affichée lorsque la page est partagée sur les réseaux sociaux. Cela permet de définir une image qui sera plus attrayante pour les réseaux sociaux que l’image standard de la page.
<meta property="og:image" content="http://www.example.com/image-attrayante-pour-les-réseaux-sociaux.jpg" />
La balise meta « og:url » permet de définir l’URL qui sera affichée lorsque la page est partagée sur les réseaux sociaux. Cela permet de définir une URL qui sera plus courte pour les réseaux sociaux que l’URL standard de la page.
<meta property="og:url" content="http://www.example.com/URL-courte-pour-les-réseaux-sociaux" />
Il est important de noter que ces balises ne sont utilisées que pour les réseaux sociaux, et n’ont pas d’impact sur le SEO. Il est donc important de les utiliser en conjonction avec les balises Meta standard pour assurer une bonne visibilité de la page sur les moteurs de recherche.
Les balises meta spécifiques à Twitter
Il existe également des balises meta spécifiques qui permettent de faciliter la partage de pages sur Twitter. Ces balises permettent de contrôler les informations qui sont affichées lorsque quelqu’un partage une page sur Twitter, comme le titre, la description, l’image ou encore le compte à mentionner.
La balise meta « twitter:card » permet de définir le type de carte qui sera utilisé pour afficher les informations de la page lorsqu’elle est partagée sur Twitter. Il existe différents types de cartes, comme « summary », « summary_large_image », « app » ou « player », chacun d’entre eux ayant des propriétés spécifiques et des tailles d’images différentes.
<meta name="twitter:card" content="summary_large_image">
La balise meta « twitter:title » permet de définir le titre de la page qui sera affiché lorsque la page est partagée sur Twitter. Cela permet de définir un titre plus accrocheur pour Twitter que le titre standard de la page.
<meta name="twitter:title" content="Titre accrocheur pour Twitter">
La balise meta « twitter:description » permet de définir la description de la page qui sera affichée lorsque la page est partagée sur Twitter. Cela permet de définir une description plus spécifique pour Twitter que la description standard de la page.
<meta name="twitter:description" content="Description spécifique pour Twitter">
La balise meta « twitter:image » permet de définir l’image qui sera affichée lorsque la page est partagée sur Twitter. Cela permet de définir une image qui sera plus attrayante pour Twitter que l’image standard de la page.
<meta name="twitter:image" content="http://www.example.com/image-attrayante-pour-twitter.jpg">
La balise meta « twitter:creator » permet de définir le compte Twitter qui sera mentionné lorsque la page est partagée sur Twitter. Cela permet de créditer l’auteur de la page ou de mettre en avant un compte lié à la page.
<meta name="twitter:creator" content="@username">
Comme pour les balises Open Graph, les balises spécifiques à Twitter et n’ont pas d’impact sur le SEO.