Les métadonnées en HTML

Qu’est-ce que les métadonnées en HTML ?

Les métadonnées sont des informations invisibles pour l’utilisateur, mais essentielles pour les navigateurs et les moteurs de recherche. Elles sont placées dans la section <head> d’une page HTML et permettent de décrire le contenu, l’auteur, le jeu de caractères, le viewport, etc. Ces données influencent le référencement (SEO), l’affichage sur les réseaux sociaux, et l’accessibilité.

Exemple de base :

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Description de la page pour les moteurs de recherche">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
</head>

Les balises `<meta>` essentielles en 2025

Balises de base

Jeu de caractères : <meta charset="UTF-8"> (indispensable pour éviter les problèmes d’encodage).
Description : <meta name="description" content="..."> (influence le taux de clics dans les résultats de recherche).
Viewport : <meta name="viewport" content="width=device-width, initial-scale=1.0"> (pour le responsive design).

Balises pour le référencement (SEO)

Title : <title>Titre de la page</title> (apparaît dans les résultats de recherche et les onglets du navigateur).
Robots : <meta name="robots" content="index, follow"> (contrôle l’indexation par les moteurs de recherche).
Open Graph (pour les réseaux sociaux¹) : <meta property="og:title" content="Titre pour les réseaux sociaux"> <meta property="og:description" content="Description pour les réseaux sociaux"> <meta property="og:image" content="URL_de_l_image">

Autres balises utiles

Auteur : <meta name="author" content="Nom de l’auteur">
Copyright : <meta name="copyright" content="© Nom du site 2025">
Langue : <html lang="fr"> (pour l’accessibilité et le référencement).

Bonnes pratiques et erreurs à éviter

Description : Rédigez une meta description claire, concise (moins de 160 caractères), et incitative pour améliorer le taux de clics.
Title : Limitez le titre à 60 caractères pour éviter la troncature dans les résultats de recherche.
Open Graph : Utilisez des images de haute qualité et des descriptions adaptées pour les partages sur les réseaux sociaux.
Évitez : Les mots-clés répétitifs ou non pertinents, les descriptions génériques, et les balises vides.

Exemple de bonne pratique :

<meta name="description" content="Découvrez nos conseils pour optimiser vos métadonnées HTML en 2025 et améliorer votre référencement naturel.">

Exercice

Créez une page HTML avec les balises meta de base (charset, description, viewport, title)

Open Graph est un protocole créé par Facebook en 2010, désormais adopté par la plupart des réseaux sociaux (Twitter, LinkedIn, Pinterest, etc.). Il permet de contrôler l’apparence d’un lien lorsqu’il est partagé sur ces plateformes, en spécifiant quelles informations (titre, description, image, type de contenu, etc.) doivent être affichées. Ces balises sont insérées dans la section <head> du code HTML d’une page web et sont essentielles pour optimiser la visibilité et l’engagement sur les réseaux sociaux. ↩︎