Points Essentiels à Retenir
- Les balises méta fournissent des informations cruciales sur une page web, destinées aux moteurs de recherche, navigateurs et divers services web.
- Parmi les types essentiels, on trouve la méta description, les balises Open Graph, la configuration de la fenêtre d’affichage (viewport) et les balises équivalentes HTTP.
- Les balises méta personnalisées permettent une grande flexibilité, mais exigent une documentation et une planification rigoureuses.
En plus du titre de votre page, des scripts et des feuilles de style, une section d’en-tête HTML peut contenir des balises méta. Ces dernières sont fondamentales pour le référencement, l’accessibilité et les performances globales d’un site web.
Apprenez à manipuler les balises méta et découvrez les informations précieuses qu’elles peuvent véhiculer.
Les balises méta sont des éléments qui fournissent des détails supplémentaires sur une page web. Bien que les navigateurs ne présentent pas directement ces métadonnées, divers outils peuvent les exploiter à de multiples fins, notamment les moteurs de recherche, navigateurs et autres services web.
Les données que vous intégrez dans les balises méta contribuent à améliorer le positionnement dans les moteurs de recherche, à la réactivité et à l’accessibilité du site web, ainsi qu’à une meilleure présentation de vos pages sur les réseaux sociaux.
Les balises méta sont auto-fermantes, il n’y a pas de balise « car elles n’incluent aucun contenu. Elles stockent toutes leurs données dans des attributs. Vous pouvez ajouter des balises méta dans la section d’en-tête de votre fichier HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Cet exemple basique de HTML contient deux balises méta dans la section head. Elles fournissent respectivement des informations sur l’encodage des caractères (UTF-8) et la configuration de la fenêtre d’affichage.
La plupart des balises méta utilisent une combinaison des attributs suivants pour structurer leurs données.
- `name` et `content` : l’attribut `name` sert d’étiquette, tandis que l’attribut `content` contient les données associées à cette étiquette. Cela fournit une méthode flexible et extensible pour stocker toutes les métadonnées dont vous avez besoin.
- `property` : cet attribut est parfois utilisé à la place de `name` et remplit globalement la même fonction.
- `http-equiv` : signifiant « HTTP équivalent », cet attribut définit un en-tête HTTP pour la valeur spécifiée dans l’attribut `content`.
- `schéma` : utilisé avec `name`, cet attribut définit le type de données contenues dans l’attribut `content`.
Vous constaterez que les balises méta suivantes sont généralement reconnues par divers services web et navigateurs.
Balise méta description
Ce court extrait de 155 caractères au maximum résume le contenu d’une page. Les moteurs de recherche l’affichent souvent sous le titre et l’URL de la page. Il est essentiel de fournir une description concise et pertinente pour inciter les utilisateurs à cliquer sur le lien et à visiter votre page.
<meta name="description" content="Une brève description de votre page">
Balises méta Open Graph
Facebook et d’autres plateformes de médias sociaux utilisent largement ces balises. Elles exploitent les informations contenues dans ces balises pour améliorer la présentation des liens vers votre page lorsque les utilisateurs la partagent. Les balises méta Open Graph comprennent des attributs tels que `og:title`, `og:description` et `og:image`:
<meta property="og:title" content="Le Titre de Votre Page"> <meta property="og:description" content="Une brève description de votre page"> <meta property="og:image" content="URL d'une image associée">
Balises méta SEO
Ces balises fournissent des informations aux moteurs de recherche et contribuent à améliorer le classement de votre page. Elles font également partie des meilleures pratiques SEO. Elles incluent des attributs tels que les robots, l’auteur, etc. Bien que leur importance ait diminué avec le temps, il est toujours pertinent de les inclure dans votre document HTML.
<meta name="robots" content="index, follow"> <meta name="author" content="Votre Nom">
Balise méta viewport
La balise méta viewport est un élément clé de la conception web responsive. Elle indique au navigateur d’ajuster la mise en page de la page web en fonction de la largeur de l’appareil, garantissant ainsi que le contenu s’affiche correctement et est lisible sur les appareils mobiles.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Balises méta équivalentes à HTTP
Ces balises méta sont essentielles pour contrôler des aspects spécifiques du traitement des pages web par les navigateurs et les serveurs. Elles incluent des attributs tels que la redirection (refresh) et la compatibilité X-UA. Bien que leur impact direct sur le référencement puisse varier, elles jouent un rôle crucial en influençant le comportement et la compatibilité des pages.
<meta http-equiv="refresh" content="5;url=https://example.com"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
Vous ne les utiliserez pas toutes simultanément dans vos projets, mais il est important de bien comprendre les différentes balises méta disponibles. De plus, l’utilisation de balises méta présente des avantages en termes d’organisation des documents HTML.
Les balises méta sont flexibles car :
- Vous êtes libre d’utiliser le nom de votre choix pour stocker les données de votre choix.
- Les navigateurs n’afficheront pas leur contenu, même s’il reste visible dans le code source de la page.
Voici un exemple de balise méta personnalisée :
<meta name="target-audience" content="developers">
Dans cet exemple, la balise personnalisée spécifie le public cible du contenu, en indiquant qu’il est destiné aux développeurs.
Les balises méta personnalisées offrent un moyen d’étendre l’ensemble standard de balises reconnues. Il est toutefois essentiel de documenter avec précision les balises personnalisées que vous employez et de bien comprendre comment vous allez les exploiter. Les autres services ne les utiliseront pas ou ne les reconnaîtront pas par défaut, vous devrez donc probablement écrire votre propre code pour les traiter.