Les liens d'ancrage sont un outil simple mais puissant pour améliorer la navigation sur les longues pages ou articles de WordPress. Ils permettent aux utilisateurs de passer rapidement à des sections spécifiques de la même page en cliquant sur un lien, sans avoir à faire défiler de grandes quantités de contenu. Les liens d'ancrage peuvent améliorer l'expérience de l'utilisateur et le référencement, ce qui en fait une fonctionnalité indispensable pour les contenus longs ou les sites web à page unique.
This guide will walk you through creating anchor links in WordPress using the Classic Editor, Gutenberg Editor, and WPBakery Page Builder. We’ll also discuss the structure of anchor links, best practices, and common use cases.
Qu'est-ce qu'un lien d'ancrage ?
Un lien d'ancrage est un lien hypertexte qui dirige l'utilisateur vers une section spécifique de la même page au lieu de l'amener sur une autre page. Par exemple, dans un long article de blog, vous pouvez créer un tableau de le contenu en haut de la page, et chaque lien renverra à la section correspondante de l'article.
Exemple :
<h2 id="section1">Section 1 : Qu'est-ce qu'un lien d'ancrage ?</h2><a href="#section1">Aller à la section 1</a>In this example, when users click on “Go to Section 1,” they are taken directly to the part of the page where the heading “Section 1: Qu'est-ce qu'un lien d'ancrage ?” is located.
Avantages de l'utilisation des liens d'ancrage :
- Amélioration de la lisibilité : Dans les articles longs, le lecteur peut rapidement passer à la partie qui l'intéresse sans avoir à faire défiler la page à l'infini.
- Meilleure navigation : Anchor links can be used to create easy-to-navigate sections on single-page websites, such as “A propos de..,” “Services,” and “Contact."
- Amélioration de l'engagement des utilisateurs : Les utilisateurs sont plus susceptibles de rester plus longtemps sur votre page s'ils peuvent trouver rapidement les informations qu'ils recherchent.
- Boost SEO : Search engines like Google use anchor links to understand your page’s structure better, potentially improving your SEO rankings.
La structure des liens d'ancrage
Un lien d'ancrage se compose de deux parties essentielles : le ID (identifiant) et le lien.
- ID (Identifiant)
L'ID est un identifiant unique que vous ajoutez à l'élément HTML vers lequel vous souhaitez établir un lien (comme un rubrique ou paragraphe). Par exemple :
<h2 <mark class="has-inline-color has-vivid-cyan-blue-color amp-wp-cefb454" data-amp-original-style="background-color:rgba(0, 0, 0, 0)">id="section1"</mark>>Section 1 : Référencement technique</h2>L'id= “section1” permet d'identifier cette rubrique comme un point d'ancrage.
- Lien
The clickable part that directs the user to the ID. It’s created using the hashtag # suivi par le ID. Par exemple :
Aller à la section 1Les href=” #section1″ indique au navigateur de faire défiler vers le bas jusqu'à l'élément portant l'ID section1.
Un exemple en action :
If you’re writing a detailed article about RÉFÉRENCEMENTVous pouvez également ajouter des liens d'ancrage à chaque section principale :
<h2 id="on-page-seo">On-Page SEO</h2>
<h2 id="off-page-seo">Référencement hors page</h2>
<h2 id="technical-seo">Référencement technique</h2>En haut de votre article, vous pouvez ensuite ajouter une table des matières qui renvoie à ces sections :
<ul>
<li><a href="#on-page-seo">On-Page SEO</a></li>
<li><a href="#off-page-seo">Référencement hors page</a></li>
<li><a href="#technical-seo">Référencement technique</a></li>
</ul>
Users who click “On-Page SEO” will be taken straight to that section.
Pourquoi utiliser des liens d'ancrage ?
- Une expérience utilisateur améliorée
Les lecteurs peuvent facilement naviguer vers le contenu qui les intéresse, ce qui est particulièrement utile pour les contenus longs. Cela réduit la frustration et rend votre site web plus convivial.
- Une meilleure navigation sur les sites web à page unique
Pour les sites web à page unique, les liens d'ancrage peuvent être utilisés pour simuler des menus de navigation. En cliquant sur un élément du menu, l'utilisateur accède en douceur à la section correspondante, ce qui crée une expérience de navigation transparente.
- Amélioration du référencement
Les liens d'ancrage contribuent à la création de liens internes, ce qui aide les moteurs de recherche comme Google à mieux comprendre la structure de votre page. Cela peut améliorer l'indexation de votre contenu et conduire à un meilleur classement.
- Augmentation de l'engagement des utilisateurs
Enabling users to find the content they’re looking for quickly can increase their time on your site and reduce bounce rates, which is beneficial for user engagement metrics.
- Accessibilité
Les liens d'ancrage rendent également votre site plus accessible, permettant aux utilisateurs handicapés ou à ceux qui utilisent des lecteurs d'écran de naviguer plus efficacement dans votre contenu.
Comment créer des liens d'ancrage dans WordPress
Here’s how to create anchor links using different WordPress editors.
Création de liens d'ancrage dans l'éditeur classique
If you’re using the Éditeur classique， vous devez modifier manuellement le HTML to add anchor links. Here’s how:
Étape 1 : Ajouter un identifiant unique à votre élément cible
- Ouvrez le message ou la page que vous souhaitez modifier dans l'éditeur classique.
- Switch to the “Texte” mode to edit the HTML.
- Trouvez l'élément (comme un titre ou un paragraphe) vers lequel vous souhaitez établir un lien et ajoutez un identifiant unique. Par exemple :
<h2 id="section1">Section 1 : Qu'est-ce qu'un lien d'ancrage ? 
Étape 2 : Créer le lien d'ancrage
- Switch back to the “Visuel” mode.
- En haut de votre article (ou à l'endroit où vous souhaitez placer le lien), mettez en surbrillance le texte que vous souhaitez rendre cliquable.
- Cliquez sur le bouton "Insérer/modifier un lien” button in the toolbar.
- Dans le champ URL, entrez #section1 (l'identifiant que vous avez défini précédemment).
<a href="#section1">Aller à la section 1</a>Étape 3 : Sauvegarde et prévisualisation
Once you’ve saved the changes, you can preview your page to ensure the link works as expected. Clicking the link should scroll the page to the section with the matching ID.
Créer des liens d'ancrage dans l'éditeur Gutenberg
Gutenberg is WordPress’s block editor, offering a more streamlined way to create anchor links.
Étape 1 : Ajouter un identifiant à un bloc
- Ouvrez l'article ou la page que vous souhaitez modifier dans Gutenberg.
- Sélectionnez le bloc auquel vous souhaitez ajouter l'ancre (par exemple, un bloc d'en-tête).
- In the right-hand sidebar, under “Avancé,” find the “ANCRE HTMLLe champ ".
- Saisissez votre identifiant unique (par exemple, section2).
Étape 2 : Ajouter le lien d'ancrage
- Retournez en haut de votre message ou à l'endroit où vous souhaitez ajouter le lien.
- Mettez en surbrillance le texte que vous souhaitez rendre cliquable et cliquez sur l'icône de lien dans la barre d'outils.
- Dans le champ URL, tapez #section2.
- Press “Enter” to create the link.
Étape 3 : Sauvegarder et tester
Enregistrez votre message et prévisualisez-le. Lorsque vous cliquez sur le lien, celui-ci doit renvoyer à la section contenant l'identifiant de l'ancre.
Créer des liens d'ancrage dans WPBakery Page Builder
WPBakery est un célèbre constructeur de pages par glisser-déposer pour WordPress. Vous pouvez facilement créer des liens d'ancrage à l'aide de cet outil.
Étape 1 : Ajouter un identifiant unique à l'élément
- Ouvrez la page ou l'article dans WPBakery Page Builder.
- Cliquez sur l'élément vers lequel vous souhaitez établir un lien et accédez à ses paramètres.
- In the settings, find the “ID de l'élément” field and enter a unique ID (e.g., section1).
Étape 2 : Créer le lien d'ancrage
- Sélectionnez le texte ou le bouton à partir duquel vous souhaitez créer un lien.
- Ouvrez les paramètres du lien et entrez #section1 comme URL.
- Enregistrez les modifications.
Étape 3 : Sauvegarde et prévisualisation
Après avoir enregistré votre travail, prévisualisez la page pour tester le lien.
Bonnes pratiques pour l'utilisation des liens d'ancrage
Pour tirer le meilleur parti des liens d'ancrage, suivez ces bonnes pratiques :
- Garantir des identifiants uniques
Each ID must be unique within a page. If two elements have the same ID, the browser won’t know where to scroll, and the link may not work properly.
- Évitez les caractères spéciaux
Les identifiants ne doivent pas contenir d'espaces, de signes de ponctuation ou de caractères spéciaux. Limitez-vous aux lettres, aux chiffres et aux traits d'union. Par exemple, section-1 est correct, mais section 1 ou section#1 peut poser des problèmes.
- Utilisez un texte d'ancrage clair
Avoid vague anchor text like “Click here” or “Learn more.” Instead, use descriptive text that tells users exactly where the link will take them. For example, “Go to the On-Page SEO section” is much more informative.
- Testez vos liens
Always test your anchor links before publishing. Make sure that each link scrolls to the correct section. Your browser’s developer tools can help diagnose any issues.
- Évitez les URL nus
Évitez d'afficher des URL d'ancrage bruts dans votre texte (comme https://example.com/#section1). Utilisez plutôt un texte de lien clair et descriptif qui fournit un contexte à l'utilisateur.
Cas d'utilisation des liens d'ancrage
Les liens d'ancrage sont utiles dans de nombreux cas. Voici quelques exemples courants :
- Table des matières
Pour les longs articles de blog, l'ajout d'une table des matières au début permet aux utilisateurs d'accéder à des sections spécifiques sans avoir à faire défiler le texte. Cela améliore la navigation et rend le contenu plus digeste.
- Sites web à page unique
Anchor links are a great way to create navigation menus on single-page websites. Clicking on menu items like “About Us” or “Services” will scroll the user to those sections on the same page.
- Boutons d'appel à l'action (CTA)
Use anchor links to direct users to specific actions, such as filling out a form or viewing a product. For example, a “Learn More” button can link to a detailed section further down the page.
- Boutons de défilement vers le haut
Adding a “Scroll to Top” button allows users to quickly return to the top of a long page without manually scrolling.
Questions fréquemment posées
- En quoi les liens d'ancrage diffèrent-ils des liens ordinaires ?
Les liens d'ancrage permettent de naviguer à l'intérieur d'une même page, alors que les liens ordinaires renvoient généralement à une autre page. Les liens d'ancrage améliorent souvent la navigation dans les contenus longs ou les sites web à page unique.
- Les liens d'ancrage contribuent-ils au référencement ?
Yes, anchor links can be part of a good internal linking strategy, helping search engines understand your page’s structure and improving your page’s accessibility and user experience.
- Comment tester les liens d'ancrage ?
Le plus simple est de cliquer sur le lien et de voir s'il vous amène à la bonne section. Vous pouvez également utiliser les outils de développement du navigateur pour inspecter et résoudre les problèmes liés à vos liens d'ancrage.
- Existe-t-il des plugins pour créer des liens d'ancrage ?
Oui, de nombreux constructeurs de pages comme WPBakery et Elementor vous permettent de créer facilement des liens d'ancrage. Vous pouvez également utiliser des plugins dédiés à la table des matières qui génèrent automatiquement des liens d'ancrage pour les titres.
Conclusion
Les liens d'ancrage sont essentiels pour améliorer la navigation des utilisateurs, en particulier pour les contenus longs et les sites web à page unique. Permettre aux utilisateurs de sauter directement à des sections spécifiques améliore la lisibilité, stimule l'engagement et contribue positivement au référencement. Que vous utilisiez l'éditeur classique, Gutenberg ou WPBakery Page Builder, l'ajout de liens d'ancrage est un processus simple qui peut améliorer considérablement l'expérience utilisateur sur votre site. En suivant les meilleures pratiques - telles que l'utilisation d'identifiants uniques, un texte d'ancrage clair et le test de vos liens - vous pouvez assurer une navigation fluide et une meilleure convivialité pour vos visiteurs.