Le guide complet des balises méta et SEO

Balises SEO principales

• <title>
  Le titre principal de la page, affiché dans l'onglet du navigateur et comme titre cliquable dans les résultats de recherche des moteurs de recherche. Essentiel pour le SEO.
  <title>Mon Super Titre SEO (50-60 caractères)</title>
• <meta name="description">
  La description de la page affichée sous le titre dans les résultats de recherche (snippet). Influence le taux de clic (CTR), pas le classement direct.
  <meta name="description" content="Une description pertinente de 120 à 150 caractères.">
• <meta name="robots">
  Indique aux robots des moteurs de recherche comment indexer ou suivre les liens sur la page.
  <meta name="robots" content="index, follow"> (Indexer la page et suivre ses liens)
  <meta name="robots" content="noindex, nofollow"> (Ne pas indexer et ne pas suivre)
• <link rel="canonical">
  Spécifie l'URL préférée (canonique) d'une page, évitant les problèmes de contenu dupliqué lorsque plusieurs URL pointent vers le même contenu.
  <link rel="canonical" href="https://www.exemple.com">
• <link rel="alternate" hreflang="...">
  Utilisé pour les sites multilingues. Indique aux moteurs de recherche les versions linguistiques alternatives de la page.
  <link rel="alternate" href="https://www.exemple.com" hreflang="en">
  <link rel="alternate" href="https://www.exemple.com" hreflang="de">
• Attribut `rel="nofollow" / rel="sponsored" / rel="ugc"`
  Attributs ajoutés aux liens (`<a>`) pour indiquer la nature de la relation avec la cible : `nofollow` (indication générale de ne pas suivre), `sponsored` (liens payants/publicitaires), `ugc` (liens générés par les utilisateurs, ex: commentaires).
  <a href="..." rel="nofollow sponsored">Lien publicitaire</a>
• <meta http-equiv="Content-Type" ...> ou <meta charset="...">
  Définit l'encodage des caractères de la page (le plus souvent UTF-8), indispensable pour que le navigateur et les robots lisent correctement les accents.
  <meta charset="UTF-8"> (Forme moderne recommandée)
• <link rel="icon"> (Favicon)
  Bien que n'influençant pas directement le classement, le favicon améliore l'expérience utilisateur et la visibilité dans les onglets du navigateur et les résultats mobiles.
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
• <meta name="viewport">
  Essentiel pour le mobile-first indexing. Indique au navigateur comment adapter la mise en page aux différentes tailles d'écran (smartphones, tablettes).
  <meta name="viewport" content="width=device-width, initial-scale=1">
• <meta name="rating" content="General"> ou "RTA"
  Indique la classification de l'âge du contenu. Rarement utilisée, mais peut être pertinente pour certains moteurs de recherche ou filtres de navigation.
  <meta name="rating" content="General">
• <meta name="referrer">
  Contrôle les informations (URL de la page précédente) envoyées au site cible lorsqu'un utilisateur clique sur un lien sortant. Utilisé pour la confidentialité et l'analyse.
  <meta name="referrer" content="no-referrer-when-downgrade">
• Attribut `loading="lazy"` (Chargement différé)
  Un attribut ajouté aux balises `<img>` ou `<iframe>` pour améliorer la vitesse de chargement (Core Web Vitals). Il retarde le chargement des médias jusqu'à ce qu'ils apparaissent à l'écran.
  <img src="image.jpg" alt="Description" loading="lazy">
• Microdonnées / `<script type="application/ld+json">`
  C'est le balisage structuré (Schema.org) le plus important pour le SEO. Il aide les moteurs de recherche à comprendre le contenu (recettes, produits, avis) et à afficher des "Rich Snippets" (résultats enrichis).
  <script type="application/ld+json">
  { "@context": "https://schema.org", "@type": "Article", ... }
  </script>
• <meta name="googlebot">
  Identique à la balise `robots`, mais cible spécifiquement le robot d'exploration de Google (Googlebot) si vous souhaitez lui donner des instructions différentes des autres moteurs.
  <meta name="googlebot" content="noindex">
• <link rel="shortlink">
  Définit une URL courte et permanente pour la page. Souvent utilisée automatiquement par des CMS comme WordPress.
  <link rel="shortlink" href="https://exemple.com">
• <meta name="format-detection">
  Indique aux navigateurs mobiles s'ils doivent automatiquement transformer les numéros de téléphone en liens cliquables.
  <meta name="format-detection" content="telephone=no">
• Attribut `itemscope` et `itemtype`
  Ces attributs HTML (Microdata) sont utilisés conjointement avec Schema.org pour définir le type de contenu sur la page, complémentaire à la méthode JSON-LD.
  <div itemscope itemtype="https://schema.org">...</div>
• <base href="...">
  Spécifie une URL de base pour tous les liens relatifs de la page. Peut simplifier le code, mais doit être utilisée avec prudence car elle peut créer des problèmes de crawling si mal configurée.
  <head><base href="https://www.exemple.com"></head>
• <meta http-equiv="refresh">
  Une méthode de redirection côté client. Déconseillée car elle ralentit l'expérience utilisateur.
  <meta http-equiv="refresh" content="5; url=https://nouvelle-url.com"> (Redirection après 5 secondes)
• <meta name="robots" content="noimageindex">
  Une instruction spécifique pour empêcher Google d'indexer les images présentes sur la page actuelle.
  <meta name="robots" content="noimageindex">
• <link rel="manifest">
  Lien vers un fichier manifeste JSON qui permet aux navigateurs d'installer votre site web en tant qu'application web progressive (PWA).
  <link rel="manifest" href="/manifest.json">
• <meta name="geo.placename"> / <meta name="geo.position">
  Métadonnées géographiques pour ciblage local. Peu utilisées au profit de Schema.org (`LocalBusiness`).
  <meta name="geo.placename" content="Paris, France">
• <meta name="keywords">
  Ancienne balise pour les mots-clés. Google l'ignore officiellement depuis 2009. Peut être ignorée.
  <meta name="keywords" content="seo, meta, balise, google">

Balises de structure de contenu

• <h1> à <h6>
  Balises de titres de section. La balise `<h1>` est le titre principal du contenu de la page (un seul par page recommandé). Les `<h2>`, `<h3>`, etc. structurent le reste du contenu de manière hiérarchique.
  <h1>Titre principal de l'article</h1>
  <h2>Introduction</h2>
  <h3>Détail de la section</h3>
• <img alt="...">
  L'attribut `alt` (texte alternatif) pour les images est crucial pour l'accessibilité (utilisateurs malvoyants) et pour le référencement des images.
  <img src="image.jpg" alt="Description précise de l'image">

Balises pour les réseaux sociaux (Open Graph et Twitter)

• Open Graph (Facebook, LinkedIn, etc.)
  Un ensemble de balises qui contrôlent l'apparence de votre lien lorsqu'il est partagé sur Facebook, LinkedIn, etc.
  <meta property="og:title" content="...">
  <meta property="og:description" content="...">
  <meta property="og:image" content="URL de l'image de prévisualisation">
  <meta property="og:url" content="URL canonique de la page">
• Twitter Cards
  L'équivalent d'Open Graph pour Twitter, permettant d'afficher des "cartes" enrichies lors du partage d'un lien.
  <meta name="twitter:card" content="summary_large_image"> (Type de carte)
  <meta name="twitter:site" content="@votrenom">
  <meta name="twitter:title" content="...">
  <meta name="twitter:description" content="...">
  <meta name="twitter:image" content="URL de l'image">