Comment remplacer les grappes de liens par un lien unique ?

Guide SEO – Référencement naturel – eCommerce

audit seo

Objectif : éviter les liens en doublons dans le cas spécifique des “grappes de liens internes”.

Contexte : certains sites présentent des pages qui listent des items (exemple : page catégorie listant des produits pour un e-commerce ou des articles pour un site d’actualités), ces items sont présentés à l’internaute avec différentes informations qui sont bien souvent toutes cliquables : une image, un titre, une description, un lien “lire la suite”, etc. Différents composants intéressants d’un point de vue UX, mais pénalisants pour le SEO.

Problématique : cette “grappe de liens internes” va diluer le maillage interne et Google ne prendra en compte que le premier de la liste. Idéalement, il faut réduire ce chiffre à un.

Pour parvenir à ce résultat, il existe différentes solutions que nous allons vous présenter dans ce tutoriel.

Comment passer réduire le nombre de liens d’une grappe ?

  1. Les options qui s’offrent à vous
  2. Quel est l’impact des modifications
  3. Supprimer les éléments en HTML
  4. Étendre la zone cliquable d’un seul lien en CSS
  5. Étendre la zone cliquable d’un seul lien en Javascript

Avant-propos : notons que les implémentations techniques données ci-après, ne le sont qu’à titre d’exemple. Il y a autant de possibilités que de développeurs créatifs en France. Veillez également à suivre les évolutions techniques des navigateurs pour mettre en place une solution qui fonctionnera chez le plus grand nombre d’internautes.

Les options qui s’offrent à vous

Si on focus sur la vision SEO de la problématique – sans tenir compte de la technique – on peut envisager plusieurs options. Voici une liste non exhaustive des solutions qui auront notre préférence :

  1. Ne conserver le lien que sur le titre de votre item et l’étendre en CSS (ou en Javascript) sur les autres éléments de la grappe (selon ce qui est + simple pour votre agence de développement)
  2. Laisser le lien sur l’image (avec un ALT pertinent renseigné) ET le lien sur le titre. Puis en fonction des autres éléments présents dans la grappe, étendre l’un ou l’autre en CSS (ou en Javascript).

Si vous faites le choix de garder 2 liens ; notez que seul le premier lien sera pris en compte au niveau de l’ancrage textuel.

Si on focus sur l’implémentation technique, 3 options d’offrent à vous :

  1. Supprimer des éléments HTML : si elles ne sont pas indispensables pour l’UX, on peut parfois supprimer certaines balises (A).
  2. Étendre la zone cliquable d’un lien en CSS : selon le nombre et la complexité du bloc HTML comprenant la grappe de lien, cette modification sera plus ou moins aisée.
  3. Étendre la zone cliquable d’un seul lien en Javascript : idem que précédemment, mais en utilisant du JS au lieu du CSS.

Attention : il y a une option qu’il faut éviter à tout prix ! Celle qui consiste à ne pas modifier le code HTML et englober l’ensemble des éléments d’une seule base (A). Pourquoi ? Parce que votre ancre sera surchargée d’éléments textuels et non textuels et cela dévaluera l’intérêt du lien – parfois jusqu’à 0 – au sein du maillage interne.

Quel est l’impact des modifications

* = Faible | ** = Moyen | *** = Fort

  • Modification
  • Supprimer des éléments HTML
  • Etendre en CSS
  • Etendre en JS
  • Modification UX
  • Oui
  • Non
  • Non
  • Impact SEO
  • * / ** / ***
  • ***
  • ** / ***
  • Difficulté
  • *
  • **
  • ***

Ces critères et notations ne sont donnés qu’à titre indicatif. Pour plus de détails, contactez votre agence de développement, et pour un accompagnement SEO sur ce type de modification n’hésitez pas à contacter nos équipes.

Supprimer les éléments en HTML

Prérequis : pouvoir modifier les éléments HTML de la page

C’est certainement ce qui vous demandera le moins d’efforts pour réduire le nombre de liens au sein de votre grappe.

Cette opération n’est à mener que si la suppression des éléments visés ne pénalise pas l’UX de votre site.

S’il s’avère que la ou les suppressions pénalisent l’UX, vous pouvez vous tourner vers une des solutions ci-après.

Vous constaterez que pour les 2 prochaines solutions : l’apparence pour l’internaute est inchangée malgré le passage de 4 liens à 1 lien unique.

Étendre la zone cliquable d’un seul lien en CSS

Prérequis : pouvoir modifier les éléments HTML de la page et le CSS

Le CSS peut venir combler le retrait de certains liens. Pour cela il faudra étendre la zone cliquable du ou des liens restants en jouant sur leur style. Bien souvent on transformera une balise de type “inline” (A) en type “block”, on lui demandera de prendre 100% de la largeur et de la hauteur de l’élément parent.

Exemple avec grappe de 4 liens internes (image, titre, description, villes) :

Exemple avec extension d’un seul lien en CSS (sur l’image) :

Digimood : une agence SEO à votre service

Digimood : une agence SEO à votre service

Digimood c’est 4 agences en France dont une à Marseille. Nous proposons des services en marketing digital : SEO, SEA et Social Ads.
Paris – Marseille – Montpellier – Annecy

Étendre la zone cliquable d’un seul lien en Javascript

Prérequis : pouvoir modifier les éléments HTML de la page et intégrer du Javascript

Cette implémentation est souvent plus complexe à réaliser. Ajoutons à cela qu’un traitement Javascript alourdira le chargement de la page et que s’il est mal implémenté, il sera moins efficient qu’une modification purement CSS.

On reprend l’exemple précédent avec extension d’un seul lien en Javascript (sur l’image) :

Digimood : une agence SEO à votre service

Digimood : une agence SEO à votre service

Digimood c’est 4 agences en France dont une à Marseille. Nous proposons des services en marketing digital : SEO, SEA et Social Ads.
Paris – Marseille – Montpellier – Annecy

Code Javascript utilisé

Le code présenté ci-dessous :

  1. Récupère tous les items de votre liste (ils ont un className = “items-product”), p
  2. Pour chacun, il va ajouter 2 événements : au clic et au survol de la souris.
  3. Lors du survol on affiche un “pointer”, autrement dit on change le curseur de la souris pour afficher le curseur signalant la présence d’un lien.
  4. Lors du clic, on va récupérer le lien cible de la balise (A) contenue dans notre bloc item.
  5. On charge la fonction lorsque l’ensemble de la page est chargé : “window.onload”.

A noter : ce code peut-être chargé dans un fichier tiers, il doit être placé au bon endroit dans votre code HTML pour ne pas freiner le chargement des éléments importants. Contrairement à l’implémentation CSS, cette implémentation peut induire un moment de latence. C’est pour cette raison qu’il est souvent plus simple techniquement parlant d’implémenter la solution CSS.

<script type="text/javascript">
// Fonction qui englobe tous les traitements à effectuer
function altGrappe() {
    // on va chercher tous les items de notre liste
    var els = document.getElementsByClassName("items-product");
    // on parcourt tous les items récupérés
    Array.prototype.forEach.call(els, function(el) {
        // on ajoute un évènement au clic
        el.addEventListener("click", function( event ) {
            // on récupère le href du lien unique
            window.location.href=this.querySelector('.lienrestant').href;}
        );
        // on ajoute un évènement au survol de la souris
        el.addEventListener("mouseover", function( event ) {
            this.style.cursor="pointer";
        });
    });
}

// on exécute la fonction
window.onload=function(){altGrappe();}
</script>

En résumé, 3 solutions :

  1. Présenter 2 liens : si le bloc présente un “titre” et une image et que l’attribut ALT sur l’image est bien renseigné,
  2. Présenter 1 seul lien sur le “titre” (ex. nom du produit), qui sera étendu en CSS,
  3. Présenter 1 seul lien sur le “titre” (ex. nom du produit), qui sera étendu en Javascript.


Ce site web utilise des cookies afin d'optimiser l'expérience utilisateur. En naviguant sur le site, vous acceptez l'usage de ces cookies.

Accepter
En savoir plus
X