4 façons d'ajouter des liens d'ancrage WordPress pour améliorer l'expérience utilisateur et le référencement

lien d'ancragesont très utiles dans la conception de sites web. Non seulement ils aident les utilisateurs à naviguer rapidement vers des parties spécifiques d'une page, mais ils peuvent également améliorer l'expérience globale de l'utilisateur et même avoir un impact positif sur le référencement. Grâce aux liens d'ancrage, les visiteurs peuvent être guidés pour passer d'une partie d'une page à une autre, ou d'une page à un endroit spécifique d'une autre page. Dans cet article, nous allons voir en détail comment, dans WordPress, les liens d'ancrage peuvent être utilisés.Quatre façons d'ajouter des ancrespour vous aider à mieux optimiser votre site web.

Qu'est-ce qu'un lien d'ancrage ? Pourquoi sont-ils utilisés ?

Les liens d'ancrage, également appelés ancres, sont des liens spéciaux qui permettent à l'utilisateur de passer d'une partie de la même page à une autre, ou bienSauter d'une page à un endroit précis d'une autre page. Ces liens sont généralement utilisés sur les sites web à page longue ou à page unique pour aider les utilisateurs à naviguer rapidement vers le contenu souhaité. Les avantages de l'utilisation des liens d'ancrage sont les suivants

• Améliorez l'expérience de l'utilisateur : Les utilisateurs peuvent facilement trouver les informations qu'ils recherchent sans avoir à parcourir manuellement les pages.
• Améliorer le référencement: : Les liens d'ancrage peuvent avoir un impact positif sur le référencement en augmentant le nombre de pages visitées et le temps d'attente.
• Augmentez les taux de conversion : Les utilisateurs sont en mesure de trouver rapidement un contenu pertinent, ce qui réduit la probabilité de quitter la page.

Quatre façons d'ajouter des ancres à WordPress

Il y a plusieurs façons d'ajouter des ancres dans WordPress, et nous allons détailler quatre méthodes courantes ci-dessous :Éditeur Gutenberg, Divi Builder,Elementor Page Builderet le constructeur de pages WPBakery.

1) Ajouter des ancres avec l'éditeur Gutenberg

Gutenberg est l'éditeur par défaut de WordPress et propose une interface simple et intuitive. Voici les étapes pour ajouter des ancres dans WordPress en utilisant Gutenberg :

Étape 1 : Créer des titres et définir des ancres

• Ouvrez l'éditeur Gutenberg dans la fenêtrePoste ou pageCréez un nouveau titre dans le
• Dans la colonne de droite des paramètres du titre, cliquez sur "niveau élevé"Options.

• Dans "Ancre HTML"Entrez le texte d'ancrage dans le champ, par exempleh-test-heading.

Étape 2 : Lien vers une ancre

• Pour écrire du texte dans un paragraphe de la même page, sélectionnez un mot ou une phrase et cliquez sur l'icône de lien.
• Dans la boîte de lien, tapez "#-h-test-heading"qui est l'ID du point d'ancrage.

Étape 3 : Modifier le code HTML

• Il peut également être sélectionné en cliquant sur les trois points du bloc "Modifier en HTML", puis ajoutez manuellement les identifiants d'ancrage

Exemple : code htmlCopy

<code><p id="h-test-heading2">

Ainsi, lorsque l'utilisateur clique sur le lien textuel, il passe à la position de l'ancre correspondante.

2) Utiliser Divi Builder pour ajouter des ancres

Divi Builder est un puissant constructeur de pages qui offre une multitude d'options de conception et de mise en page. Voici comment ajouter des ancres dans Divi Builder :

Étape 1 : Créer des points d'ancrage

• Ouvrez Divi Builder et dans les paramètres de la section, de la ligne ou du module, allez à "niveau élevé"Onglet.
• Dans "ID CSS"Saisissez votre identifiant d'ancrage dans le champ, par exempleh-test-heading.

Étape 2 : Lien vers une ancre

• Cet identifiant d'ancrage peut être utilisé dans n'importe quelle position, y compris dans les menus, les boutons ou les liens de texte. Le format du lien est le suivant#h-test-heading.

De cette manière, l'utilisateur accède directement à la page spécifiée après avoir cliqué sur le lien.

3. utiliser Elementor pour ajouter des ancres

Elementor est l'un des constructeurs de pages les plus populaires de WordPress, avec une interface intuitive de type "glisser-déposer". L'ajout d'ancres avec Elementor est très simple :

Étape 1 : Ajouter des widgets d'ancrage de menu

• Ouvrez l'éditeur Elementorpage webRecherchez dans la colonne de gauche "ancre".

• volonté"ancre de menu"est déplacé à l'endroit de la page où vous souhaitez ajouter l'ancre.

Étape 2 : Définir l'identifiant d'ancrage

• Sur le côté gauche de l'écran "Menu Anchor ID"Entrez le texte d'ancrage dans le champ, par exempleh-test-heading.

Étape 3 : Création de liens

• Utilisez cette ancre ID dans n'importe quelle position (par exemple, menu, bouton ou texte) avec un format de lien de#h-test-heading.

Avec Elementor, il est facile d'ajouter plusieurs ancres à une page pour améliorer la navigation.

4) Utiliser WP-Bakery Pagebuilder pour ajouter des ancres

WP-Bakery Pagebuilder est un autre constructeur de pages populaire pour les utilisateurs qui ont besoin de plus d'options de personnalisation. Voici comment ajouter des ancres dans WP-Bakery Pagebuilder :

Étape 1 : Définir l'ID de la ligne/de l'élément

• Ouvrez WP-Bakery Pagebuilder et cliquez sur l'icône du crayon pour modifier les lignes, les colonnes ou les éléments.

• Dans "conventionnel (armes)Dans l'onglet "ID de ligne" ou "ID d'élément", recherchez le champ "ID de ligne" ou "ID d'élément" et saisissez l'ID de l'ancre, par ex.h-test-heading.

Étape 2 : Créer un lien

• Comme pour les autres méthodes, cet identifiant d'ancrage peut être utilisé n'importe où sur la page, avec un format de lien de#h-test-heading.

Cette méthode convient aux utilisateurs qui ont besoin d'un contrôle précis de la mise en page et des fonctionnalités.

Problèmes courants liés aux liens d'ancrage et solutions

Il arrive que les liens d'ancrage ne fonctionnent pas correctement. Voici quelques erreurs courantes et leurs solutions :

1. Utilisez des ID CSS, et non des classes CSS : Le point d'ancrage doit êtreID unique CSSet non des classes CSS.
2. Assurez-vous que le lien est précédé de # : Lorsque vous reliez des ancres, veillez à faire précéder le texte de l'ancre de la mention#.
3. Assurez-vous que l'identifiant de l'ancre ne comporte pas # : Lorsque vous définissez l'ID de l'ancre, n'entrez pas dans le champ ID de la fenêtre#.
4. Chaque identifiant d'ancrage doit être unique : Les identifiants d'ancrage ne peuvent pas être dupliqués sur la même page.

Conseil : ajouter un effet de défilement fluide aux liens d'ancrage

Pour améliorer l'expérience de l'utilisateur, un effet de défilement fluide peut être ajouté aux liens d'ancrage. Pour ce faire, vous pouvez utiliser l'option "Défilement de la page jusqu'à l'ID"implémentation du plugin, qui remplace le navigateur par défaut "lié"Ce comportement permet d'obtenir un défilement plus fluide pour les sites web à page unique.

résumés

L'expérience de navigation de l'utilisateur sur votre site peut être grandement améliorée grâce aux liens d'ancrage. Que vous utilisiezGutenberg, Divi Builder, Elementor ou WP-Bakery Pagebuilder ?Toutes ces méthodes peuvent vous aider à atteindre facilement la fonctionnalité de l'ancre. La maîtrise de ces techniques améliorera non seulement l'expérience utilisateur de votre site web, mais aussi les performances SEO, ce qui se traduira par une augmentation du trafic et des conversions sur votre site.