Les ancres dans un site web : intérêt et mise en œuvre

Une ancre (ou lien d’ancrage) permet de créer un lien qui pointe vers un endroit précis d’une page, plutôt que vers le haut de la page par défaut. Quand on clique dessus, le navigateur fait défiler la page jusqu’à la section ciblée.

L’intérêt des ancres

Pour l’expérience utilisateur (UX)
Les ancres facilitent la navigation dans les pages longues. Un visiteur accède directement à l’information cherchée sans avoir à faire défiler tout le contenu. C’est particulièrement utile pour les FAQ, les articles de fond, les guides ou les pages de documentation.

Pour le SEO
Google peut afficher des « liens de site » (sitelinks) ou des ancres directement dans les résultats de recherche, ce qui renvoie l’internaute vers la bonne section. Cela améliore le taux de clic et le temps passé sur la page, deux signaux appréciés.

Pour le maillage interne
Depuis une autre page ou un autre article, on peut renvoyer précisément vers une section utile, ce qui renforce la structure du site.

Pour les sommaires cliquables
C’est la base d’une table des matières interactive en haut d’un article long.

La méthode, étape par étape

Le principe repose toujours sur deux éléments : un point d’arrivée (l’ancre elle-même, identifiée par un id) et un point de départ (le lien qui pointe vers cet id).

Étape 1 — Identifier la section cible

Repérez le titre ou l’élément vers lequel vous voulez renvoyer. Par exemple, un titre de section :

<h2>Nos tarifs de formation</h2>

Étape 2 — Attribuer un identifiant (id) à cette cible

Ajoutez un attribut id à l’élément. Choisissez un identifiant court, en minuscules, sans espaces ni accents (utilisez des tirets) :

<h2 id="tarifs">Nos tarifs de formation</h2>

Étape 3 — Créer le lien qui pointe vers l’ancre

Le lien reprend l’id précédé du symbole # (dièse) :

<a href="#tarifs">Voir nos tarifs</a>

Au clic, la page défile jusqu’au titre « Nos tarifs de formation ».

Étape 4 — Pointer vers une ancre située sur une autre page

Il suffit d’ajouter l’URL de la page avant le dièse :

<a href="/formations/wordpress#tarifs">Voir les tarifs WordPress</a>

Étape 5 — Améliorer le confort de lecture (défilement fluide et décalage)

Deux ajustements CSS rendent le résultat plus professionnel :

html {
  scroll-behavior: smooth; /* défilement animé au lieu d'un saut brut */
}

h2[id] {
  scroll-margin-top: 80px; /* évite que le titre passe sous un menu fixe */
}

Le scroll-margin-top est important si votre site a un menu fixe en haut : sans lui, l’ancre viendrait se placer sous le menu et le titre serait masqué.

Le cas particulier de WordPress

Puisque vous travaillez sous WordPress, voici les méthodes propres à cet environnement :

Avec l’éditeur Gutenberg (blocs)
Sélectionnez un bloc de titre, ouvrez ses réglages à droite, section « Avancé », et renseignez le champ « Ancre HTML ». WordPress crée alors l’id automatiquement. Vous pouvez ensuite lier n’importe quel texte vers #votre-ancre.

Table des matières automatique
Le bloc natif « Table des matières » (WordPress 6.x) ou des extensions comme Easy Table of Contents ou Rank Math (que vous utilisez probablement pour le SEO) génèrent automatiquement les ancres à partir de vos titres H2/H3.

Avec un constructeur de page (Elementor, Divi…)
Chaque section dispose d’un champ « ID CSS » dans ses réglages avancés. On y saisit l’identifiant, puis on crée le lien vers #identifiant.