Les panneaux indicateurs

Balises cruciales <title>, <meta>, et attributs alt.

Imagine : tu entres dans une nouvelle zone de jeu. Il y a des panneaux partout le nom du village, la direction de la forge, la description de la quête locale. Sans ces panneaux, tu tournerais en rond. Les balises SEO, c'est exactement ça les panneaux indicateurs qui guident Google dans ton site.

2.1La balise <title>, le nom de ta quête

La balise <title> est la plus importante pour le SEO. C'est ce qui s'affiche dans l'onglet de ton navigateur ET dans les résultats Google. C'est le nom de ta quête sur le tableau des scores.

<head>
    <title>Apprendre le CSS Flexbox – Guide complet | BaliseTonSite</title>
</head>

Les bonnes pratiques pour un title efficace :

50-60 caractères max au-delà, Google coupe ton titre (game over visuel)
Le mot-clé principal en premier dis tout de suite de quoi il s'agit
Un titre unique par page chaque quête a son propre nom
Ajoute le nom du site pour la reconnaissance (comme le logo de ta guilde)

Mauvais <title>Page 1</title>
Bon <title>Apprendre Flexbox facilement – BaliseTonSite</title>

2.2La balise <meta description>, le résumé sur la carte

La meta description est le petit texte sous le titre dans les résultats Google. Ce n'est pas un facteur de classement direct, mais c'est ce qui donne envie aux gens de cliquer. C'est l'aperçu de ta zone sur la carte du monde.

<head>
    <meta name="description" 
         content="Apprends le CSS Flexbox pas à pas avec des exemples concrets. 
         Un guide simple et visuel pour aligner et distribuer tes éléments." />
</head>

150-160 caractères c'est la limite avant que Google ne coupe
Résume le contenu sois honnête et précis
Donne envie de cliquer c'est ton pitch de quête
Unique par page pas de copier-coller entre pages

La meta description, c'est la description de ta quête dans le journal si elle est ennuyeuse, personne ne la lance. Si elle est intrigante, tout le monde veut l'essayer.

2.3Les titres h1 à h6, la hiérarchie de ton donjon

Les balises <h1> à <h6> structurent le contenu de ta page. Pense à elles comme les niveaux d'un donjon le h1 est l'entrée principale, les h2 sont les salles, les h3 les recoins…

<h1>Guide complet du CSS Flexbox</h1>          <!-- L'entrée du donjon -->
    <h2>Les bases de Flexbox</h2>                 <!-- Salle 1 -->
     <h3>La propriété display: flex</h3>          <!-- Recoin -->
     <h3>L'axe principal et l'axe croisé</h3>     <!-- Recoin -->
    <h2>Aligner les éléments</h2>                  <!-- Salle 2 -->
     <h3>justify-content</h3>                     <!-- Recoin -->
     <h3>align-items</h3>                         <!-- Recoin -->

Un seul h1 par page c'est le boss de la page, il résume tout
Hiérarchie logique pas de h3 sans h2 avant (on ne saute pas d'étage)
Mots-clés naturels utilise les termes que les gens cherchent
Pas de h1 pour le design un titre gros ≠ un h1 (utilise le CSS pour ça)

2.4L'attribut alt sur les images, décrire le décor

Google ne « voit » pas les images comme nous. L'attribut alt lui décrit ce qu'il y a sur l'image. C'est aussi essentiel pour l'accessibilité les lecteurs d'écran lisent ce texte aux personnes malvoyantes.

<!-- Mauvais  Google ne comprend rien -->
<img src="screenshot.png" />

<!-- Pas top  décrit le fichier, pas le contenu -->
<img src="screenshot.png" alt="image" />

<!-- Bon  décrit précisément ce qu'on voit -->
<img src="screenshot.png" alt="Résultat Google montrant le titre et la meta description d'un site" />

Sois descriptif décris ce que l'image montre vraiment
Pas de « image de » le navigateur sait déjà que c'est une image
Place des mots-clés naturellement sans forcer
Images décoratives alt="" (alt vide) pour les ignorer

L'attribut alt, c'est comme la description d'un objet quand tu passes ta souris dessus dans un jeu. Sans elle, tu ne sais pas ce que c'est.

2.5Les liens et le texte d'ancrage, les portails entre zones

Les liens sont les portails de téléportation de ton site. Le texte d'ancrage (le texte cliquable), c'est le panneau au-dessus du portail qui dit où il mène.

<!-- Mauvais  Google ne sait pas où ça mène -->
<a href="/flexbox">Cliquez ici</a>

<!-- Bon  le texte décrit la destination -->
<a href="/flexbox">Guide complet du CSS Flexbox</a>

Texte d'ancrage descriptif dis clairement où mène le lien
Évite « cliquez ici » c'est un portail sans panneau
Liens internes connecte tes pages entre elles (maillage interne)
Liens externes pointe vers des sources fiables (ça renforce ta crédibilité)

Chaque lien est un vote de confiance. Quand tu lies vers une autre page, tu dis à Google « Cette zone vaut le détour ». Et quand d'autres sites lient vers toi, c'est eux qui recommandent ton monde.