Comment créer des liens d’ancrage dans WordPress (4 méthodes simples)

Les liens d’ancrage ne sont pas un sujet qui est beaucoup discuté, mais nous avons eu d’excellents résultats avec eux ! Aujourd’hui, nous allons nous plonger dans la façon de créer des liens d’ancrage dans WordPress et d’explorer pourquoi vous pourriez vouloir commencer à les utiliser. D’après notre expérience, les liens d’ancrage peuvent aider à améliorer l’expérience de l’utilisateur, rendre la navigation dans du long contenu beaucoup plus facile, et même vous donner un léger avantage dans Google. Qui ne veut pas d’un avantage gratuit sur Google ? 😉

Exemple de lien d’ancrage

Si vous êtes encore un peu perplexe sur ce que sont les liens d’ancrage, ne vous inquiétez pas. Regardez l’image d’exemple ci-dessous. Nous utilisons des liens d’ancrage sur chacun de ces éléments de liste à puces. Lorsque vous cliquez dessus, vous arrivez directement à l’intertitre H2 qui contient ce contenu. Vous pouvez les vérifier par vous-même plus bas dans l’article. Les liens d’ancrage peuvent être utilisés sur n’importe quoi, comme du texte, des images et des intertitres H1-H6.

Sur de nombreux sites, les liens d’ancrage sont simplement utilisés pour créer une table des matières au début des longs articles. Si vous connaissez un peu de CSS, vous pouvez être créatif et les rendre un peu plus élégants, comme nous l’avons fait sur nos pages d’atterrissage.

Sur d’autres sites, vous pouvez ne pas voir le lien d’ancrage, au lieu de cela, ils sont utilisés sur les en-têtes simplement pour qu’ils puissent partager des liens directement vers les sections spécifiques.

Avantages et inconvénients des liens d’ancrage

Ce n’est pas parce que nous faisons quelque chose que vous devriez toujours le faire. Voici quelques avantages et inconvénients à prendre en compte lorsque vous utilisez des liens d’ancrage sur votre site WordPress.

Avantages

• L’un des plus grands avantages des liens d’ancrage est de créer une meilleure expérience utilisateur lors de la navigation sur votre site. C’est particulièrement vrai lorsqu’il s’agit d’articles longs. Nous publions beaucoup de contenu en profondeur (plus de 4 000 mots) et le défilement peut devenir pénible. L’utilisation de liens d’ancrage permet à l’utilisateur d’aller instantanément à la section qui l’intéresse. Permettez à vos utilisateurs de trouver plus rapidement ce dont ils ont besoin.
• L’utilisation de liens d’ancrage sur les en-têtes vous permet de partager des liens directs vers différentes sections d’un article. C’est super pour les réseaux sociaux et même pour les équipes de support. Par exemple, notre équipe de support chez Kinsta s’appuie fortement sur des liens d’ancrage dans nos articles de base de connaissances afin que nous puissions envoyer l’utilisateur à l’étape de dépannage exacte qu’il doit suivre. Notre équipe commerciale les utilise également pour répondre plus rapidement aux questions relatives à Kinsta.
• Lorsqu’il s’agit de pages de résultats de moteurs de recherche (SERPs), les résultats peuvent toujours varier en fonction de ce qui apparaît. Cependant, nous avons vu à maintes reprises les liens d’ancrage (menus de saut) apparaître sur notre liste SERP parce que nous les avons utilisés dans nos articles. Ils sont impressionnants parce qu’ils vous donnent essentiellement une autre ligne de texte pour votre liste organique. Ils peuvent également aider à augmenter le CTR car l’utilisateur peut voir quelque chose en rapport avec sa requête que vous n’avez pas indiqué dans la méta description ou le titre.

• Les liens d’ancrage peuvent également être utilisés pour d’autres choses comme le lien de « Retour en haut de page » que Wikipedia utilise avec ses citations ^ ou notes en bas de page. [1]

Inconvénients

Bien que nous pensons que les avantages l’emportent définitivement sur les inconvénients, voici quelques inconvénients que vous voudrez peut-être considérer.

• Des liens d’ancrage ou une table des matières pourraient diminuer la durée moyenne de présence sur le site par visiteur. Pourquoi ? Parce qu’ils sautent directement au contenu qu’ils veulent au lieu de lire votre article en entier. Cependant, si vous faites plaisir à vos visiteurs dès le départ, ils pourraient s’abonner à votre bulletin d’information ou faire des recherches plus poussées sur ce que vous vendez. Donc ça pourrait être vu comme un avantage ou un inconvénient.
• Directement liés à la question ci-dessus, les liens d’ancrage pourrait éventuellement avoir un impact sur vos revenus publicitaires. Les visiteurs qui sautent directement à une certaine section peuvent diminuer le nombre d’impressions et de clics. Les sites qui dépendent fortement de la publicité pourraient vouloir faire des tests A/B en utilisant des liens d’ancrage et la table des matières.
• Si vous changez de domaine ou devez ajouter des redirections 301, il est important de noter que l’identifiant de fragment (#) n’est jamais envoyé au serveur. Cela peut compliquer les choses si vous changez les choses avec vos liens d’ancrage en cours de route. Il existe des moyens de contourner ce problème avec JavaScript, mais ce n’est en aucun cas une tâche facile.

Transition du lien d’ancrage

Vous voudrez peut-être aussi penser à changer la transition du lien d’ancrage. Par défaut, les liens d’ancrage sauteront soudainement à l’ID plus bas dans la page. Pour certains, c’est un choc. Vous pouvez modifier cette option pour que le défilement se fasse en douceur. C’est en fait ce que nous faisons sur le blog de Kinsta. Vous pouvez utiliser une extension gratuite comme Page scroll to id ou ajouter du CSS à votre site, tel que scroll-behavior: smooth;. Ce particle de Stack Overflow contient quelques conseils supplémentaires pour les développeurs.

Comme pour la plupart des astuces WordPress, il existe plusieurs façons d’ajouter des liens d’ancrage dans WordPress. Jetez un coup d’œil à ces quatre différentes méthodes faciles. Et oui, les liens ci-dessous utilisent du texte d’ancrage. 😁

• Comment créer manuellement des liens d’ancrage dans WordPress
• Comment créer des liens d’ancrage dans WordPress avec une extension
• Comment créer des liens d’ancrage dans WordPress avec Gutenberg
• Comment créer des liens d’ancrage dans WordPress avec une extension Chrome

Comment créer manuellement des liens d’ancrage dans WordPress

La première façon de créer des liens d’ancrage dans WordPress est simplement de le faire manuellement avec HTML dans chacun de vos articles. Créons-en un pour que vous puissiez voir comment ils fonctionnent.

Étape 1

Créez le texte de votre lien et ajoutez-y un hyperlien comme vous le feriez normalement pour tout autre lien.

Étape 2

Au lieu de le lier à une URL, un article ou une page, vous lui attribuerez un nom d’ancre. Les URIs qui désignent les ancres contiennent un caractère « # » suivi du nom de l’ancre. Vous pouvez le nommer comme vous voulez, bien que nous vous conseillons généralement de le garder court et en rapport avec le nom réel de l’en-tête.

Si vous regardez la vue texte (HTML), elle ressemble à ceci :

<a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a>

Voici un exemple de tous les liens d’ancrage que nous utilisons dans cet article :

<ul>
<li><a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a></li>
<li><a href="#anchor-links-wordpress-plugin">How to Create Anchor Links in WordPress with a Plugin</a></li>
<li><a href="#anchor-links-wordpress-gutenberg">How to Create Anchor Links in WordPress with Gutenberg</a></li>
</ul>

Étape 3

Ensuite, vous devez ajouter un ID sur l’en-tête vers lequel vous voulez que votre lien d’ancre saute. Pour ce faire, vous devez passer à la vue texte (HTML) dans l’éditeur WordPress. Sur l’en-tête, dans ce cas, un en-tête H2, ajoutez l’ID ainsi que le nom de l’ancre que vous avez choisi à l’étape 2. Le nom de l’ancre et l’attribut ID doivent être exactement les mêmes pour que le lien fonctionne.

<h2 id="manually-create-anchor-links-wordpress">How to Manually Create Anchors Link in WordPress</h2>

Comment créer des liens d’ancrage dans WordPress avec une extension

Vous ne voulez pas vous embêter avec du code HTML à chaque fois ? Pas de souci, il existe d’excellentes extensions WordPress gratuites que vous pouvez utiliser pour ajouter facilement des liens d’ancrage et même une table des matières à chaque article.

Ajouter un lien d’ancrage avec une extension

L’un des moyens les plus simples d’ajouter un lien d’ancrage est d’utiliser l’extension gratuite TinyMCE Advanced. Cette extension ajoute des fonctionnalités supplémentaires à l’éditeur avec des boutons de raccourcis rapides. Au moment d’écrire ces lignes, l’extension a plus de 2 millions d’installations actives avec une note de 4,5 sur 5 étoiles.

Étape 1

Après avoir installé et activé l’extension, allez dans votre article et créez un lien hypertexte sur votre texte d’ancre. Au lieu de le lier à une URL, un article ou une page, vous lui attribuerez un nom d’ancre avec un # devant lui.

Étape 2

Mettez en surbrillance l’en-tête auquel vous voulez le lier. Cliquez ensuite sur « Insérer » à partir du bouton en haut et sélectionnez « Ancre ». Ce bouton apparaît dans l’éditeur à cause de l’extension TinyMCE Advanced.

Étape 3

Saisissez le nom de l’ancre que vous lui avez donné à l’étape 1 et cliquez sur « OK ». Cette extension vous fait gagner du temps car vous n’avez jamais à quitter la vue de l’éditeur visuel. Si vous le faites manuellement avec HTML, vous devez permuter entre l’éditeur visuel et l’éditeur de texte (HTML).

Ajouter une table des matières avec une extension

Peut-être voulez-vous accélérer encore plus le processus. 😄 Si vous écrivez beaucoup de contenu en profondeur et que vous voulez toujours inclure une table des matières (listes de liens d’ancrage/menu de saut) dans vos articles, alors vous devriez profiter d’une extension de table des matières.

L’une des meilleures extensions gratuites est Easy Table of Contents. Cette extension génère automatiquement des liens d’ancrage pour vos en-têtes et vous permet d’insérer votre table des matières n’importe où dans votre article avec un simple code court. Au moment d’écrire ces lignes, l’extension a plus de 30 000 installations actives avec une note de 4,5 sur 5 étoiles.

Étape 1

Après avoir installé et activé l’extension, il y a quelques réglages que vous voudrez probablement changer. Vous les trouverez sous « Réglages → Table des matières ».

• L’option « Activer le support » vous permet de choisir sur quels types d’articles vous souhaitez utiliser la table des matières. Il s’agit probablement de votre type « Articles ».
• Vous pouvez ensuite choisir si vous voulez ou non qu’une table des matières soit insérée automatiquement ou si vous voulez l’insérer manuellement. Nous vous recommandons de faire manuellement si vos articles changent un peu.
• L’option « Afficher quand » vous permet de définir le nombre de titres que l’article doit avoir avant qu’une table des matières n’apparaisse. Par exemple, vous ne voulez probablement pas qu’une table des matières apparaisse sur un court article de blog, donc il est probablement préférable de faire au moins quatre en-têtes ou plus.

Étape 2

Pour insérer la table des matières manuellement, il suffit d’insérer le code court [ez-toc] à l’endroit où vous voulez qu’il apparaisse dans l’article.

La table des matières est alors générée automatiquement pour tous les en-têtes de l’article. C’est pas génial, ça ?

Vous pouvez également apporter d’autres changements aux réglages concernant ce qui doit apparaître, les exclusions, l’apparence, etc. Par exemple, vous avez peut-être toujours un titre « Résumé » à la fin de vos articles. Vous pouvez saisir ce titre dans la liste des exclusions dans les réglages pour qu’il ne soit pas inclus dans la table des matières.

Un autre extension de table des matières que vous voudrez peut-être consulter est Shortcode Table of Contents. C’est une extension plus récente sur le marché, mais elle a été développée par James Kemp, que nous avons eu le plaisir d’interviewer.

Ajout automatique de liens d’ancrage sur les en-têtes avec une extension

Vous voulez simplement ajouter automatiquement des liens d’ancrage sur tous vos en-têtes ? Alors vous devriez consulter l’extension gratuite WP Anchor Header. Ceci ajoutera des liens d’ancrage à tous vos en-têtes H1-H6.

C’est un extension très basique et il n’y a pas de réglages. Il suffit de l’installer, de l’activer et c’est parti. Chaque en-tête aura automatiquement un nom d’ancre (dérivé du nom de l’en-tête), et ils obtiendront même une petite icône d’ancre cool qui apparaît lorsque vous passez au-dessus de l’en-tête. Cela permet aux visiteurs de voir facilement qu’il y a un lien qu’ils peuvent copier s’ils le souhaitent.

Comment créer des liens d’ancrage dans WordPress avec Gutenberg

Le nouvel éditeur Gutenberg est sur le point d’arriver et devrait être livré avec WordPress 5.0. Avec lui, le support intégré pour l’ajout d’ID d’ancres aux en-têtes est amélioré .

Étape 1

Mettez en surbrillance l’en-tête dans le bloc Gutenberg et cliquez sur « Avancé » sur le côté droit. Vous verrez alors une option pour ajouter une ancre HTML.

Étape 2

Si vous voulez créer un lien vers ce site, créez simplement un hyperlien sur votre texte d’ancre. Au lieu de le lier à une URL, un article ou une page, vous lui attribuerez un nom d’ancre avec un # devant.

Comment créer des liens d’ancrage dans WordPress avec une extension Chrome

Vous ne voulez pas créer de liens d’ancrage avec HTML ou installer une extension ? Alors vous devriez vérifier l’extension gratuite Anchor Links Chrome. Elle est entièrement compatible avec WordPress, WordPress.com et Medium.

Étape 1

Après avoir installé l’extension Chrome, mettez simplement en surbrillance l’en-tête sur lequel vous voulez ajouter le lien d’ancrage. Cliquez ensuite sur l’icône de l’extension Anchor Link Chrome dans la barre d’outils de votre navigateur.

Dans les coulisses, cela crée l’ID de l’ancre (dérivé du nom de l’en-tête). Dans cet exemple : #Header_1. Lorsque vous cliquez sur l’icône, il la copie automatiquement dans votre presse-papiers.

Étape 2

Allez ensuite dans le texte auquel vous voulez ajouter le lien d’ancre, créez un hyperlien comme vous le feriez normalement, et cliquez sur « Coller ».

Et c’est tout ! L’extension Chrome permet de rendre ceci rapide et facile sans avoir recours à des extensions tierces.

Résumé

Comme vous pouvez le constater, il existe de nombreuses façons créatives d’ajouter des liens d’ancrage dans WordPress. Certaines sont plus faciles que d’autres. Si vous publiez beaucoup de long contenu, cela aide vos visiteurs à accéder immédiatement au contenu qu’ils veulent. Nous avons également vu que les liens d’ancrage aident à obtenir des « sauts aux menus » dans les SERPs, ce qui aide à augmenter le CTR sur votre liste organique.

Utilisez-vous déjà des liens d’ancrage sur votre site WordPress ? Si oui, nous aimerions connaître votre expérience ou vos idées.

Brian Jackson

Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.

• LinkedIn
• Twitter