Comment intégrer correctement un lien pour le SEO ?

Chaque lien est un signal fort pour Google : il indique ce qui est important, ce qui est lié, ce qui doit être exploré. Encore faut-il bien les coder…

Malheureusement, la plupart des développeurs font les mêmes erreurs : mauvaise structure HTML, ancre polluée, mauvaise utilisation des attributs… S'ils obtiennent un résultat conforme à l'expérience souhaitée, la sémantique reste néanmoins difficile à interpréter pour les robots.

Cet article vous explique comment créer des liens propres, accessibles, et SEO-friendly !

L'ancre du lien : le signal SEO n°1

Le texte visible d'un lien, l'ancre, est la première chose que Google lit pour comprendre le lien. C'est ce qui lui permet de savoir ce qui se cache derrière le lien, sans devoir explorer la page cible.

Une bonne ancre est :

• Descriptive : elle décrit ce que l'utilisateur va trouver
• Naturelle : pas de sur-optimisation avec des mots-clés collés
• Pertinente : elle correspond au contenu de la page de destination
  

Exemples :
✅ Liste des recettes à base de chocolat
❌ Cliquez ici

Dans son article "Bonnes pratiques concernant les liens pour Google", Google décrit d'avantage l'importance du texte d'ancrage.

Arrêtez de polluer l'ancre avec des balises inutiles !

Une erreur fréquente consiste à insérer des balises inutiles dans le lien, comme des <div>, des <span>, ou encore des <img> mal gérées. Le meilleur exemple — que l'on croise sur quasiment tous les sites internets — est un grand basique, la card, que l'on va souvent (mal) implémenter de cette façon :

<a href="...">
  <article class="card">
    <picture class="card--thumbnail">
      <!-- ... -->
    </picture>
    <h3 class="card--title">Les bienfaits du chocolat pour la santé</h3>
    <p class="card--resume">
      Le chocolat est une source de bonheur, réduit le stress,
      l'anxiété et même la dépression.
    </p>
  </article>
</a>

Problème n°1 : mélange d'éléments block et inline

Historiquement, l'élément <a> est un élément inline par défaut, et les éléments <article>, <h3> et <p> sont des éléments block.

Même si HTML5 autorise certaines souplesses, mélanger les deux peut poser des problèmes :

• Rendus CSS inattendus
• Comportement cassé sur certains appareils
• Problèmes d'accessibilité et rendu compliqué pour les lecteurs d'écrans

Pour garder une structure HTML correcte dans vos pages, veillez à ne jamais mettre de block dans un inline.

Par exemple, imaginons que vous souhaitez mettre un lien sur un <h3>, on écrira naturellement ce premier exemple plutôt que second, puisque <h3> est de type block, <a> est de type inline, donc <a> ne peut pas contenir de <h3> :

<!-- ✅ Bon -->
<h3><a href="...">Pourquoi le chocolat est aussi bon ?</a></h3>

<!-- ❌ Mauvais -->
<a href="..."><h3>Pourquoi le chocolat est aussi bon ?</h3></a>

Avec ce <a> dans le <h3>, vous pourriez me dire qu'on pollue aussi les mots clés du <h3>… Dans ce cas, le choix se fait sur la sémantique. Un <h3> est un block, un <a> est un inline, on peut donc mettre un <a> dans un <h3> mais pas l'inverse.

À l'époque de l'XHTML 1.0, bien avant l'HTML5, il était de coutume de valider son intégration dans le Markup Validation Service du W3C. À ce moment-là, un block dans un inline aurait généré cette erreur :

Problème n°2 : l'ancre est polluée

Google analyse le texte brut contenu dans la balise <a>. Si ce texte est fragmenté par des balises ou entouré d'éléments décoratifs, Google peut mal interpréter le lien, ou lui donner moins d'importance.

Une ancre claire, propre, sans bruit, envoie un signal plus fort.

<!-- ✅ Bon -->
<a href="...">Les bienfaits du chocolat pour la santé</a>

<!-- ❌ Mauvais -->
<a href="...">
  <div>
    <span><img src="icon.svg"> Les bienfaits du chocolat pour la santé</span>
   </div>
</a>

En clair : une ancre propre, c'est aussi une structure HTML propre.

Le hack ultime pour des liens sur des blocks

Dans beaucoup de cas, on veut rendre une card entière cliquable. Mais au lieu de tout mettre dans la balise <a>, il existe une meilleure solution.

Reprenons notre example de card précédent, cette fois-ci avec une bonne implémentation :

<article class="card">
  <picture class="card--thumbnail">
    <!-- ... -->
  </picture>
  <h3 class="card--title">
    <a href="...">Les bienfaits du chocolat pour la santé</a>
  </h3>
  <p class="card--resume">
    Le chocolat est une source de bonheur, réduit le stress,
    l'anxiété et même la dépression.
  </p>
</article>

Pour rendre la card entièrement cliquable, nous allons passer par un pseudo-élément CSS. L'idée est de créer un élément sur le lien qui sera positionné par dessus le card, la rendant entièrement cliquable.

Nous avons donc besoin créer un pseudo-élément sur notre lien et de le positionner relativement à la card :

.card {
  position: relative;
}
.card a:after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

TA DAA ! Notre card est entièrement cliquable, tout en gardant un HTML propre pour un bon SEO et une bonne accessibilité.

Et si je veux rajouter un deuxième lien sur ma carte ?

Il arrive qu'on souhaite ajouter un lien supplémentaire sur une card, comme un lien vers un tag ou une catégorie.
Dans ce cas, il suffit de placer ce lien secondaire en position: relative et d'ajuster les z-index si nécessaire, pour qu'il ne soit pas masqué par le lien principal.

Comment faire un lien sur une image ?

Quand un lien contient seulement une image, on perd l'ancre textuelle. Google ne peut pas voir l'image. Il se base alors sur l'attribut alt de l'image, qui est de toute manière indispensable pour décrire l'image pour Google et les lecteurs d'écran.

On possède donc déjà une ancre; la description de l'image.
L'image est un élément inline, donc on peut effectivement l'insérer dans un lien.

<a href="...">
  <img src="..." alt="Chocolat chaud fumant" />
</a>

Ainsi, nous pourrions aussi écrire :

<a href="..." title="Recette de chocolat chaud maison">
  <img src="..." alt="Chocolat chaud fumant" />
</a>

et avoir un attribut title sur le lien qui sert d'ancre, ainsi qu'un attribut alt sur l'image qui sert à la décrire pour les lecteurs d'écrans et Google.

Si l'ancre et la description de l'image sont identiques, alors l'attribut title devient inutile
Si le contenu de la balise <a> ne contient ni texte ni image, alors l'attribut title est utilisé comme texte d'ancrage.

Pour aller plus loin : faire disparaitre les ancres inutiles

Il arrive parfois que l'on ait des boutons ou des liens "Voir plus", "Lire l'article", … S'ils n'apportent aucune richesse sémantique, ils peuvent être utile à l'expérience utilisateur ou la clarté de l'interface.

Lorsque l'on intègre une page, il faut toujours se demander si un élément est utile à la compréhension des robots ou à l'expérience utilisateur ? S'il n'est pas utile aux robots, alors il pollue les robots.

En reprenant la même idée que le hack CSS précédent, nous pouvons faire disparaitre ces ancres de la structure HTML de la page :

a:after {
  content: 'Voir plus';
}

<a href="..." title="Tous les articles sur le chocolat"></a>

TA DAA !² Nous n'avons pas polluer notre ancre avec des mots de pauvres valeurs, tout en gardant affiché notre texte "Voir plus" pour les utilisateurs.

En bref : les règles d'or pour des liens SEO-friendly

• Ancre claire et textuelle : pas de contenu pollué
• Pas de <div> ou de structure complexe dans une balise <a>
• Utilisez le CSS pour styliser des zones cliquables étendues
• Sur une image avec un lien, l'attribut alt est utilisé comme ancre
• Si vous n'avez pas d'ancre, vous pouvez utiliser l'attribut title de l'élément <a>

P.S. : J'aime le chocolat.