Digimood

audit2

Enjeux SEO d’un lien unique Par rapport à une grappe de liens

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.
Or, 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.

L’objectif est donc d’éviter les liens en doublon dans le cas spécifique des grappes de liens internes.

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 :

  • 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)
  • 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 se concentre sur l’implémentation technique, 3 options s’offrent à vous :

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.

ModificationModification UXImpact SEODifficulté
(A) Supprimer des éléments HTMLOui* / ** / ****
(B) Étendre en CSSNon*****
(C) Étendre en JSNon** / ******
= Faible | ** = Moyen | *** = Fort – 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.

SOLUTION A 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.

Ici nous n’avons pas d’exemple de code à vous présenter. 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 (B et C) : l’apparence pour l’internaute est inchangée malgré le passage de 4 liens à 1 lien unique.

SOLUTION B É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” en type “block”, on lui demandera de prendre 100% de la largeur et de la hauteur de l’élément parent.

Vous pouvez pour chaque exemple ci-dessous obtenir le code source en faisait “CTRL+U” ou “Clic-droit > Afficher le code source de la page” ou bien encore “Clic-droit > Inspecter” avec l’inspecteur DOM de votre navigateur sur l’exemple qui vous intéresse.

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

SOLUTION C É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.

Code Javascript utilisé

  1. Le code récupère tous les items de votre liste (ils ont un className = “items-product”).
  2. Pour chacun, il faut 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.

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

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.

 

Vous souhaitez être accompagné avec des professionnels spécialistes du SEO ? N’hésitez pas à nous contacter pour discuter de votre projet !

Contactez-nous