Je vous ai déjà décrit l’importance des liens internes dans le site web de votre petite entreprise.

Aujourd’hui, je vais vous décrire comment insérer un lien qui pointe vers un point précis de la page que votre lecteur est en train de visionner.

Le besoin s’est fait sentir lorsque Mathieu a relu mon guide complet sur l’extension Yoast SEO pour WordPress destiné aux PMEs.

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.

Evidemment, c’est possible comme dirait la SNCF !

Mais ce n’est pas totalement évident car il va falloir modifier un peu 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]

Lien d'Ancrage : Insérer un Lien vers un Endroit Précis d'une Page - Marketing de Contenu

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

Il est fort à parier que :

  • Le contenu de cette page soit assez long,
  • Cette page contienne une table des matières,
  • Vous vouliez 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 procéder si, comme moi, vous utilisiez WordPress comme CMS.

1 – Déterminer là où vous voulez insérer votre lien d’ancrage

En haut de votre page, vous aurez mis 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 surement inséré un sous-titre, en utilisant le format “titre 2” par exemple.

Lien d'Ancrage : Insérer un Lien vers un Endroit Précis d'une Page - Marketing de Contenu

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ù le lien va pointer

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

Lien d'Ancrage : Insérer un Lien vers un Endroit Précis d'une Page - Marketing de Contenu

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

  • “Visuel”,
  • “Texte”.

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

Il est en effet 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 des balises HTML que l’on identifie car elles se trouvent entre des crochets comme “<” et “>”.

Lien d'Ancrage : Insérer un Lien vers un Endroit Précis d'une Page - Marketing de Contenu

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.

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 les faire pointer vers une citation, une image, une vidéo, …

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 : Insérer un Lien vers un Endroit Précis d'une Page - Marketing de Contenu

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, 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 utilisiez 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

Lien d'Ancrage : Insérer un Lien vers un Endroit Précis d'une Page - Marketing de Contenu

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”.

A votre tour de jouer avec les liens d’ancrage

Vous pouvez maintenant facilement créer des tables des matières, des notes de bas de page voire aussi des liens d’ancrage entre des pages différentes.

Connaissiez-vous les liens d’ancrage et toutes leurs possibilités ? Ce tutoriel est-il assez explicatif ? Nous sommes là pour vous aider si besoin, dites-le nous dans les commentaires ci-dessous.


[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.


Also published on Medium.