Découvre les parties invisibles mais critiques d'un document HTML : les balises meta qui contrôlent comment les navigateurs affichent ta page et comment les moteurs de recherche et plateformes sociales la présentent.
Tout ce qui se trouve dans <head> est constitué de métadonnées — des informations sur la page plutôt que du contenu affiché dessus. Les navigateurs, moteurs de recherche et plateformes sociales s'appuient tous sur ces métadonnées.
<meta charset="UTF-8"> — Déclare l'encodage des caractères. UTF-8 supporte pratiquement toutes les langues écrites et symboles. Inclus-la toujours comme tout premier élément dans <head>.<meta name="viewport" content="width=device-width, initial-scale=1.0"> — Indique aux navigateurs mobiles de définir la largeur du viewport à la largeur de l'appareil et de commencer avec un zoom de 1x. Sans cela, ta page sera rendue à une largeur de bureau et rétrécie sur les téléphones.<meta name="description" content="..."> — Un résumé concis (120-160 caractères) de la page. Les moteurs de recherche affichent souvent ceci comme l'extrait sous ton lien dans les résultats.<title> — Pas techniquement une balise meta, mais se trouve dans <head>. C'est le texte affiché dans l'onglet du navigateur et comme titre cliquable dans les résultats de recherche.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML meta tags and SEO best practices for modern web development.">
<meta name="robots" content="index, follow">
<title>Meta Tags & SEO — Code Lessons</title>
<!-- Canonical URL: tells search engines the preferred version -->
<link rel="canonical" href="https://example.com/lessons/html-meta-seo">
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Page content -->
</body>
</html>Quand quelqu'un partage un lien sur Facebook, LinkedIn, Slack, Discord ou des plateformes similaires, ces services recherchent les balises meta Open Graph (OG) pour construire la carte de prévisualisation enrichie.
og:title — Le titre affiché dans la carte de prévisualisation.og:description — Une courte description affichée sous le titre.og:image — URL vers l'image de prévisualisation (recommandé : 1200x630 px).og:url — L'URL canonique de la page.og:type — Généralement website ou article.Twitter (X) possède son propre ensemble de balises qui utilisent Open Graph comme solution de repli quand elles sont absentes :
twitter:card — Type de carte : summary, summary_large_image, player, ou app.twitter:title, twitter:description, twitter:image — Remplacent les valeurs OG spécifiquement pour Twitter.En pratique, beaucoup de développeurs définissent les balises Open Graph et ajoutent uniquement twitter:card pour le type de carte, puisque Twitter lit les balises OG comme solution de repli.
Au-delà des balises meta, les moteurs de recherche comprennent les données structurées — des annotations lisibles par machine qui décrivent ce que ton contenu est (une recette, un produit, un événement, une FAQ, etc.).
Le format le plus courant est JSON-LD (JSON for Linked Data), placé dans une balise <script type="application/ld+json"> :
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Meta Tags & SEO",
"author": { "@type": "Person", "name": "Jane Doe" },
"datePublished": "2025-01-15"
}
</script>Google utilise les données structurées pour générer des résultats enrichis — notes avec étoiles, accordéons FAQ, cartes de recettes, dates d'événements, et plus encore. Tu peux tester les tiennes avec l'outil Rich Results Test de Google.
robots — index, follow (par défaut) ou noindex, nofollow pour contrôler l'exploration.theme-color — Définit la couleur de la barre d'outils du navigateur sur mobile : <meta name="theme-color" content="#1a1a2e">.author — <meta name="author" content="Jane Doe">.Que se passe-t-il si tu omets la balise meta viewport d'une page mobile ?