Je vous ai déjà décrit l’importance des liens entre les pages du site web de votre entreprise.

Aujourd’hui, découvrez comment insérer un lien qui pointe vers un endroit précis de la page que votre lecteur est en train de visionner.

Le besoin s’est fait sentir lorsque Laurent a relu mon guide complet sur l’extension Yoast SEO pour WordPress.

Ton Guide est si complet que le texte est très long. Tu devrais rajouter une table des matières et insérer des liens d’ancrage pour faciliter la navigation dans ton guide. Qu’en penses-tu ?

En effet, c’est une bonne idée. Commençons par définir ce que sont les liens d’ancrage.

Les liens d’ancrage sont des liens qui vous amènent à une partie spécifique d’une page.

Par contre, la boîte de dialogue pour insérer un lien de WordPress ne contient pas de moyen simple pour ajouter ce type de lien.

Alors, comment faire si vous souhaitez ajouter un lien qui ne pointe pas vers le haut d’une autre page.

Évidemment, c’est possible comme dirait la SNCF !

Mais ce n’est pas totalement évident. En effet, il est nécessaire de modifier légèrement le code HTML de votre page.

Tout d’abord, pourquoi utiliser des liens d’ancrage ?

Voici quelques cas d’utilisation de liens d’ancrage :

  • Un article ou une page avec une table des matières. Chaque entrée de la table des matières est reliée à un sous-titre situé en bas de la page,
  • Le lien « retour au début » en bas d’une page,
  • Une note de bas de page, comme ici. [1]

Supposons, par exemple, que, pour vous démarquer de la concurrence, vous décidez de publier sur votre site web un livre blanc sur le futur de votre secteur d’activité.

Il est fort à parier que :

  • Le contenu de cette page va être plutôt long,
  • Cette page va contenir une table des matières,
  • Vous voulez donner la possibilité à vos lecteurs d’aller directement à la partie 1, à la partie 2 ou à la partie 3 de la page à partir de cette table des matières.

Ce tutoriel vous explique comment créer un lien interne vers un endroit précis d’une page sur le CMS WordPress.

1. Déterminer l’endroit où insérer votre lien d’ancrage

En haut de votre page, vous avez inséré un texte que vous souhaitez transformer en un lien cliquable vers des sections de votre page.

Peut-être une liste sous la forme d’une table des matières, comme ceci :

  • Introduction,
  • Aujourd’hui,
  • Demain,
  • Notre futur.

Dans le corps de votre contenu, pour chaque entrée de la table des matières, vous avez sûrement inséré un sous-titre, en utilisant le format “titre 2” par exemple.

Déterminer l’endroit où insérer votre lien d’ancrage

Pour illustrer cet article, nous allons relier l’entrée de la Table des matières “Introduction” avec son sous-titre dans le corps du texte.

Pour ce faire, nous allons tout d’abord repérer le sous-titre dans le corps du texte.

2. Localiser l’endroit où faire pointer le lien

C’est un peu délicat, mais l’objectif de ce tutoriel est bien de vous faire gagner du temps sur ces aspects techniques.

Localiser l’endroit où faire pointer le lien

En haut de votre éditeur WordPress et sur la droite, il y a 2 onglets :

  • “Visuel”,
  • “Texte”.

J’imagine que, comme moi, vous rédigez vos contenus en utilisant le mode par défaut “Visuel”.

En effet, il est très pratique parce que très proche de Microsoft Word. Rédiger un contenu, c’est aussi prendre du plaisir au travail. Alors autant utiliser des outils que vous connaissez déjà.

Personnellement, j’utilise très peu le mode “Texte”. Depuis presque un an que je publie du contenu sur le Marketing Digital, c’est même la première fois que je vous en parle.

Lorsque vous cliquez sur l’onglet Texte, le texte de votre contenu est toujours présent, mais vous verrez en plus les balises HTML. Vous les identifiez facilement puisqu’elles sont entourées de crochets comme “<” et “>”.

Localiser l’endroit où faire pointer le lien

Maintenant, il faut repérer le sous-titre vers lequel va pointer votre lien d’ancrage.

Si vous avez utilisé l’éditeur en mode visuel de WordPress pour attribuer à ce sous-titre un style “Titre 2”, il sera entouré par les balises HTML <h2> :

  • h veut dire header (soit en-tête soit un titre),
  • 2 le niveau de ce header.

Vous allez donc repérer quelque chose comme :

<h2> Introduction </ h2>

3. Ajouter un attribut id à votre HTML

Maintenant que vous avez localisé les balises HTML qui entourent votre sous-titre, il suffit simplement d’ajouter un petit morceau de code dans la première balise, de sorte que :

<h2> Introduction </ h2>

Se transforme en :

<h2 id=”intro”> Introduction </ h2>

Le texte entre les guillemets (dans mon exemple “intro”) sert d’identifiant à votre lien d’ancrage. Je vais choisir de l’appeler “nomlien” comme nom générique.

Mes quelques recommandations :

  • Faites attention aux espaces. Laissez bien un espace avant le «id», et assurez-vous par contre qu’il n’y a aucun espace entre le guillemet de fin et le symbole > qui indique la fin de la balise.
  • Ne supprimez aucun caractère.
  • Pour l’id, n’utilisez que des lettres et/ou des nombres avec aucun espace entre les guillemets.

Vous pouvez ajouter l’attribut id= »nomlien » dans tout type de balise HTML, pas seulement les balises de type <h2>.

Même s’il est assez logique d’utiliser les sous-titres pour des liens d’ancrage, vous pouvez aussi les faire pointer vers une citation, une image, une vidéo…

Sur le même sujet : 5 conseils d’expert pour réussir votre maillage inter-contenus

4. Revenir en mode Visuel et s’assurer que tout est correct

Cliquez de nouveau sur l’onglet Visuel.

Assurez-vous que le sous-titre – et tout ce qui suit – semble correct. C’est-à-dire que rien ne semble avoir été changé depuis que vous avez ajouté l’attribut id = »nomlien ». Même votre sous-titre devrait ressembler exactement à ce que vous aviez avant.

Si quelque chose a changé en mode “Visuel”, retournez en mode “Texte” pour vérifier les modifications du code HTML que vous venez de faire.

5. Ajouter un lien au point d’origine

Maintenant que vous avez défini là où votre lien va pointer, vous allez utiliser la boîte de dialogue de lien de WordPress pour ajouter votre lien comme d’habitude.

  • Sélectionnez le texte que vous souhaitez transformer en un lien cliquable (dans mon exemple, l’entrée de la table des matières “Introduction”).
  • Cliquez sur l’icône de lien dans votre barre d’outils d’édition ou appuyez simultanément sur les touches Ctrl + K.

Maintenant, au lieu de saisir une URL complète, il suffit de saisir le signe dièse (#) suivi par le mot “nomlien” que vous avez placé entre guillemets dans votre attribut :

Lien d’Ancrage : ajouter un lien au point d’origine

Cliquez sur le bouton bleu pour enregistrer le lien.

Votre entrée de la table des matières va s’afficher comme un lien en bleu souligné dans l’éditeur de WordPress.

6. Tester le lien

Une fois que vous avez ajouté le lien hypertexte, je vous conseille de prévisualiser la page pour vous assurer que votre lien d’ancrage fonctionne comme prévu.

Dans la page qui s’affiche, cliquez sur le lien et vérifiez s’il pointe bien vers l’endroit souhaité.

Si cela fonctionne, vous pouvez passer à autre chose. Cela veut aussi dire que mon tutoriel est efficace.

Si lorsque vous cliquez sur le lien, rien ne se passe, ou si vous êtes dirigé vers votre page d’accueil, vérifiez d’abord le changement que vous avez fait dans le code HTML.

Il se peut aussi que votre thème ou l’une des extensions que vous utilisez modifie les URL de vos liens. La solution consiste alors à saisir l’URL complète du lien d’ancrage.

Pour cela, au lieu de saisir simplement dans la boîte de lien de WordPress :

« #nomlien »

il faudra mettre :

http://www.monsite.com/titredemapage/#nomlien

Tester le lien d’ancrage

Comme vous êtes en train d’insérer un lien dans la même page que vous éditez actuellement et qui n’est pas forcément encore publiée, vous allez devoir saisir manuellement toute l’URL.

Alors, faites bien attention à ce qu’elle se termine bien par une barre oblique “/” puis ajoutez à la fin votre texte “#nomlien”.

Astuce : pour faire un lien qui pointe vers le haut de la page, pas besoin de définir un identifiant. Ajoutez juste le caractère #.

FAQ – 3 questions fréquentes sur sur les liens d’ancrage

Pourquoi faire un lien d’ancrage ?

Un lien d’ancrage est un moyen pour naviguer instantanément d’une partie de votre contenu à une autre. Par exemple, vous avez inséré une table de matières en haut de votre article dans laquelle chaque item comprend un lien qui renvoie au chapitre en question.

Comment faire une ancre en HTML ?

Créer une ancre est plutôt facile. Cela se fait en 2 étapes. Tout d’abord, donnez un identifiant à l’élément vers lequel vous voulez faire pointer votre lien. Cela se fait avec l’attribut HTML id. Ensuite, dans le lien, finissez par le caractère dièse # suivi du nom de l’identifiant.

Comment créer un lien vers le haut de page en HTML ?

Pour créer un lien de retour haut de page, aucune ancre n’est nécessaire. Vous devez juste ajouter le caractère dièse # à la lin de l’URL de votre page.

À votre tour de jouer avec les liens d’ancrage

Vous savez maintenant facilement faire un lien vers un endroit précis d’une page web.

Autrement dit, vous savez créer des tables des matières, des notes de bas de page, voire des liens d’ancrage entre des pages différentes ce qui est une bonne astuce à connaître pour optimiser votre maillage inter-contenus.

Par contre, insérer un lien d’ancrage est un peu chronophage.

Alors, si vous souhaitez des tables de matières dans la plupart de vos articles, je vous conseille plutôt de passer par l’extension gratuite TOC+.

TOC+ est une extension WordPress puissante et conviviale.

Elle se charge de créer automatiquement la table des matières de vos articles.

Conçu sur le même principe de ce que vous voyez sur Wikipédia, la table des matières apparaît par défaut avant le premier sous-titre de la page.

Connaissiez-vous les liens d’ancrage et toutes leurs possibilités ? Ce tutoriel est-il assez explicatif ?

[1] ↑ Vous avez vu comment la référence [1] en haut de cet article pointe directement ici ? C’est plutôt cool, non ? Mais vous allez vouloir aussi fournir à vos lecteurs un moyen facile de revenir exactement là où ils étaient. C’est l’objectif du lien d’ancrage derrière le petit symbole « ↑ » au début de cette note. J’ai copié Wikipedia, mais ne le dites à personne.