# Identifier les liens qui sont cachés et/ou chargés via JavaScript

> URL: https://4eck-media.de/fr/blog/identifier-les-liens-qui-sont-caches-et-ou-charges-via-javascript/  
> Language: fr  
> Description: De nombreux liens sur les pages web sont cachés ou ne sont pas directement visibles dans le rendu initial de la page. Avec un script, vous pouvez les rendre visibles.

---

La visibilité et l’accessibilité de tous les liens d’une page web sont importantes pour la performance SEO. Saviez-vous que de nombreux liens sur les pages web peuvent être cachés ou ne pas être directement visibles dans le rendu initial de la page ? Voici une astuce SEO simple qui vous aide à **identifier de tels liens cachés & liens JavaScript** et à vous assurer que vous ne négligez aucune connexion précieuse. Pourquoi existe-t-il d’ailleurs des liens non reconnaissables ?

Des liens cachés ou non visibles peuvent être présents sur une page web pour différentes raisons :

- Contenus chargés dynamiquement : des contenus qui ne sont chargés que par des actions de l’utilisateur ou par JavaScript.
- Éléments interactifs : des liens intégrés dans des boutons et déclenchés par des événements JavaScript.
- Aspects de design : des liens masqués pour des raisons de design ou difficiles à reconnaître.

De tels liens, qui ne sont pas chargés via un HREF mais déclenchés via un événement JS, ne sont souvent pas immédiatement visibles et peuvent facilement être négligés. Avec le script simple suivant, vous pouvez par exemple, dans le cadre d’un audit SEO, vous assurer que tous les liens et boutons d’une page web sont mis en évidence, y compris ceux qui sont ajoutés dynamiquement.

## Guide étape par étape : mettre en évidence les liens sur les sites web

1. Ouvrir la page et appeler les outils de développement : ouvrez la page web souhaitée dans votre navigateur Chrome. Appuyez sur `F12` ou faites un clic droit sur la page et sélectionnez « Inspecter » pour ouvrir les outils de développement.

2. Sélectionner la zone de console : dans les outils de développement, cliquez sur l’onglet « Console ». Vous pouvez y exécuter du code JavaScript directement sur la page web. Lorsque vous faites une saisie, il se peut, la première fois, que le navigateur vous affiche un message d’avertissement et que vous deviez d’abord confirmer que vous autorisez le collage (allow pasting)

3. Copier et coller le script : copiez le script suivant et collez-le dans la zone de console inférieure. Appuyez ensuite sur la touche Entrée (`Enter`).

```
// Highlight initial links
document.querySelectorAll('a').forEach(link => {
  link.style.backgroundColor = 'yellow';
  link.dataset.initial = 'true'; // Mark these as initially present
});

// Highlight initial buttons
document.querySelectorAll('button').forEach(button => {
  button.style.backgroundColor = 'red';
  button.dataset.initial = 'true'; // Mark these as initially present
});

// Create a MutationObserver to detect changes in the DOM
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) { // Check if it's an element node
          // Find any new <a> tags within the added node
          node.querySelectorAll('a').forEach(link => {
            if (!link.dataset.initial) { // Only highlight if not marked as initial
              link.style.backgroundColor = 'pink';
            }
          });

          // Find any new <button> tags within the added node
          node.querySelectorAll('button').forEach(button => {
            if (!button.dataset.initial) { // Only highlight if not marked as initial
              button.style.backgroundColor = 'red';
            }
          });
        }
      });
    }
  });
});

// Start observing the document body for changes
observer.observe(document.body, {
  childList: true,
  subtree: true
});
```

4. Observer le résultat : après avoir exécuté le script, tous les liens (éléments `<a>`) de la page web sont mis en évidence en jaune et tous les boutons (éléments `<button>`) marqués en rouge. Les nouveaux liens et boutons ajoutés dynamiquement reçoivent une couleur d’arrière-plan rose (pour les liens) ou rouge (pour les boutons).

    
        
            
                
                    

![Verborgene Links hervorheben Skript](https://4eck-media.de/fr/https://4eck-media.de/wp-content/uploads/2025/11/verborgene_links_hervorheben_skript_0b13c6211a-1920x1080.avif)
                
            
        
    

Si votre site web comporte déjà beaucoup d’éléments jaunes ou rouges, vous pouvez simplement adapter les couleurs de la mise en évidence dans le script, par exemple en bleu et brun.

## Que se passe-t-il exactement ?

Le script marque d’abord tous les liens et boutons présents sur la page avec une couleur d’arrière-plan. Il crée ensuite ce que l’on appelle un MutationObserver, qui surveille en continu les modifications dans le DOM (Document Object Model). Lorsque de nouveaux éléments sont ajoutés, l’observer vérifie s’ils contiennent des liens ou des boutons et les marque eux aussi en conséquence.

Grâce à cette méthode, vous pouvez vous assurer qu’aucun lien important n’est négligé, qu’il soit visible dès le départ ou ajouté par des actions de l’utilisateur ou des scripts. Cette technique simple, mais efficace peut vous aider à optimiser la convivialité et la performance SEO de votre page web.

Ce script, nous ne l’avons pas inventé, nous l’avons vu pour la première fois chez [Daniel Foley Carter dans un post LinkedIn](https://4eck-media.de/fr/https://www.linkedin.com/posts/daniel-foley-assertive_seo-seotip-activity-7222524367090446336-X_yl/). L’astuce SEO est vraiment utile, c’est pourquoi nous avons créé cet article de blog à ce sujet. D’autres utilisateurs l’ont jugée tout aussi pertinente et en ont même créé une [extension Chrome pour la mise en évidence des liens](https://4eck-media.de/fr/https://github.com/alinr/Chrome-Snippets/blob/main/highlightLinks.js).

Essayez et voyez par vous-même combien de liens apparaissent sur vos pages web, et lesquels d’entre eux ne sont déclenchés que par JavaScript !