Les titres et la structure d'une page

Module 3: Les bases techniques d'une page · Temps de lecture : 11 minutes

Objectif pédagogique : À l'issue de cette leçon, vous saurez structurer une page avec un titre principal clair et des intertitres logiques, expliquer ce que Google et les lecteurs d'écran font des titres, et rédiger de bons textes alternatifs et noms de fichiers pour vos images.

Notions clés : titre (<h1> à <h6>), titre principal, intertitre, saut de niveau, HTML sémantique, lecteur d'écran, texte mis en forme qui n'est pas un titre, texte alternatif, alt="" vide pour la décoration, nom de fichier, texte dans les images

Les titres sont la table des matières de votre page

Personne n'aime lire un long texte sans intertitres. Sur internet, c'est encore plus vrai : les visiteurs parcourent d'abord une page en diagonale et ne la lisent qu'après avoir vu que la réponse s'y trouve. Les titres les y aident. Mais un titre est plus qu'un texte en grandes lettres grasses. En HTML, ce sont des éléments distincts avec un niveau :

<h1>Bruidsboeketten op maat</h1>
  <h2>Zo werken we</h2>
    <h3>De kennismaking</h3>
    <h3>Het proefboeket</h3>
  <h2>Voorbeelden</h2>
  <h2>Veelgestelde vragen</h2>

Le <h1> est le titre principal : de quoi parle cette page ? Les <h2> sont les chapitres, les <h3> les sections à l'intérieur de ces chapitres, et ainsi de suite jusqu'à <h6>. Le retrait ci-dessus sert uniquement à illustrer la hiérarchie ; dans le vrai HTML, il n'a aucune importance. (Dans cet exemple, Bruidsboeketten op maat signifie « bouquets de mariée sur mesure ».)

Deux groupes lisent réellement cette structure :

1. Les personnes qui utilisent un lecteur d'écran. Un visiteur aveugle ou malvoyant demande souvent d'abord à son lecteur d'écran d'énumérer tous les titres, puis passe directement à la partie qui l'intéresse. Sans vrais titres, la page n'est qu'un long bloc de texte.
2. Les moteurs de recherche. Google utilise les titres pour comprendre de quoi parlent les différentes parties d'une page.

Ce que dit Google sur les titres

Beaucoup de légendes circulent au sujet des titres. Voici ce que Google dit lui-même :

• Le guide de démarrage SEO de Google indique que l'ordre des titres n'a pas d'importance pour la recherche Google et qu'il n'existe aucun nombre magique de titres qu'une page devrait avoir. Des titres dans un ordre logique sont en revanche très utiles pour les lecteurs d'écran.
• John Mueller, de Google, a déclaré dans une vidéo (2019) que les systèmes de Google n'ont aucun problème avec plusieurs titres <h1> sur une page. Google s'efforce de travailler avec le HTML tel qu'il est : un seul <h1>, plusieurs, ou seulement du texte mis en forme sans vrais titres.
• Dans sa documentation sur les liens de titre (leçon 3.1), Google mentionne toutefois une situation qui peut poser problème : l'absence de titre principal clair. S'il y a plusieurs grands titres bien visibles en haut de la page et qu'on ne voit pas lequel est le titre principal, Google peut avoir du mal à choisir un bon lien de titre. Google recommande de bien distinguer le titre principal, par exemple en en faisant le premier <h1> visible.

La conclusion de cette formation : un seul <h1> clair par page est une bonne habitude, non pas parce que Google vous pénaliserait sinon, mais parce que la page indique alors clairement à tous de quoi elle parle. Lecteurs, lecteurs d'écran et Google ne peuvent pas passer à côté. Le contrôle de l'exercice A3.2 affiche donc du vert pour exactement un <h1> non vide, de l'orange pour plus d'un et du rouge s'il n'y en a aucun.

Les erreurs fréquentes

Construire une page qui apporte une réponse

Un bon ordre pour presque toutes les pages :

1. Un titre principal (<h1>) qui dit ce que le visiteur trouve ici. Il ressemble souvent au titre de la leçon 3.1, mais il n'a pas besoin d'être identique. Le titre apparaît dans les résultats de recherche, le titre principal sur la page elle-même.
2. Une courte introduction qui donne tout de suite la réponse la plus importante.
3. Des intertitres (<h2>) pour chaque sous-thème, formulés comme ce que le lecteur cherche : « Combien coûte un bouquet de mariée ? » en dit plus que « Tarifs ».
4. Si nécessaire, des <h3> sous un <h2>, jamais isolés.

La leçon 7.3 approfondit la rédaction elle-même. Ici, il s'agit de l'ossature.

Images : texte alternatif et nom de fichier

Un moteur de recherche ne « voit » pas une photo comme vous. Google utilise la vision par ordinateur, mais tire beaucoup d'informations du texte qui l'entoure. La source la plus importante, Google la cite lui-même : le texte alternatif.

<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
     alt="Bruidsboeket met witte pioenrozen en eucalyptus">

Le texte alternatif (attribut alt) a deux rôles :

• Accessibilité : un lecteur d'écran le lit à voix haute pour les personnes qui ne peuvent pas voir l'image. Si l'image ne se charge pas, le navigateur l'affiche à la place de la photo.
• Compréhension : Google utilise le texte alternatif, avec la vision par ordinateur, pour comprendre ce que montre l'image. Cela aide surtout dans Google Images.

Pour rédiger un bon texte alternatif :

• Décrivez ce que l'on voit et pourquoi l'image figure sur cette page, en une courte phrase.
• N'utilisez des mots-clés que s'ils s'intègrent naturellement. Google avertit que les textes alternatifs bourrés de mots-clés offrent une mauvaise expérience et peuvent être considérés comme du spam.
• Une image purement décorative (un trait, un motif de fond) reçoit un alt vide : alt="". Un lecteur d'écran l'ignore alors. Un attribut alt absent, c'est autre chose : le lecteur d'écran lit alors parfois le nom du fichier.
• Si l'image contient un texte important (un horaire d'ouverture, un prix, un dépliant), mettez aussi ce texte tel quel sur la page. Le texte dans une image est difficile à lire pour un lecteur d'écran comme pour un moteur de recherche.

Le nom de fichier aide aussi un peu. Google recommande des noms courts et descriptifs et cite image1.jpg ou pic.gif comme exemples à éviter. bruidsboeket-pioenrozen-wit.jpg en dit plus que IMG_4032.jpg.

La vitesse et les dimensions des images sont abordées dans la leçon 4.3.

En pratique : les titres dans les créateurs de sites

• Dans l'AI Builder de WebOké, le premier titre d'une page devient automatiquement le <h1> et tous les titres suivants deviennent des <h2>. Chaque page a ainsi exactement un titre principal. Pour chaque photo, vous pouvez saisir une description ; elle devient le texte alternatif. Le contrôle SEO vous avertit pour les photos sans description.
• Dans WordPress, vous choisissez le niveau (H1 à H6) dans l'éditeur de blocs, au niveau du bloc Titre. Le thème fait généralement déjà du titre de la page le <h1> ; utilisez alors H2 et inférieurs dans le texte. Vous saisissez le texte alternatif sur l'image dans la Médiathèque ou dans le bloc.

Les autres créateurs de sites fonctionnent de manière similaire. En cas de doute, consultez le code source (Ctrl+U) ou recherchez <h1 avec Ctrl+F.

Résumé

• Les titres (<h1> à <h6>) sont la table des matières de votre page, pour les lecteurs, les lecteurs d'écran et les moteurs de recherche.
• Google n'a aucun problème avec plusieurs <h1> ou un autre ordre, mais recommande un titre principal clair. Un seul <h1> clair est une bonne habitude.
• Choisissez le niveau en fonction de la structure, pas de la taille de police ; évitez de préférence de sauter des niveaux.
• Un bon texte alternatif décrit brièvement ce que l'on voit ; la décoration reçoit alt="" ; pas d'accumulation de mots-clés.
• Un texte important doit figurer sur la page, pas uniquement dans une image.

Quiz

Exercice

Exercice A3.2 : Un seul titre principal et une structure logique. Saisissez l'adresse d'une page de votre propre site. Le programme récupère la page, compte les titres <h1> et affiche la structure des titres sous forme de table des matières. Vous voyez s'il y a exactement un titre principal non vide, si des niveaux sont sautés et combien d'images n'ont pas d'attribut alt. Indiquez au préalable combien de <h1> vous pensez trouver. Pas de site à vous ? Utilisez www.rijksoverheid.nl.

Pour aller plus loin

• Google Search Central, guide de démarrage SEO (titres, texte alternatif) : https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, bonnes pratiques pour les images : https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (titres accessibles) : https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, textes alternatifs : https://www.w3.org/WAI/tutorials/images/