Les vrais balises d'ancrage contre les liens JavaScript uniquement : pourquoi Google a besoin de

Un propriétaire de boutique Shopify a installé une application de mega-menu premium l’année dernière. L’application avait d’excellentes critiques, de belles animations, et une interface épurée. Les ventes sont restées stables. Trois mois plus tard, Google Search Console a montré une chute de 40 % des pages explorées. Le problème n’était pas la conception du menu — c’est que les liens du menu n’existaient que en JavaScript. L’explorateur de Google a vu une page d’accueil sans liens vers les pages de catégories. Les catégories étaient orphelines.

C’est l’erreur SEO de navigation la plus courante que je vois : un menu qui a l’air parfait pour les utilisateurs mais qui est invisible aux moteurs de recherche. La correction n’est pas complexe, mais elle demande de comprendre la différence entre les vrais liens HTML et les modèles de navigation JavaScript uniquement — et de savoir comment auditer votre propre site pour identifier le problème avant qu’il ne vous coûte du trafic.

Ce que l’explorateur de Google voit réellement

Quand Google explore une page, il fait une requête HTTP à votre serveur et reçoit du HTML en réponse. L’explorateur analyse ce HTML à la recherche de liens — spécifiquement, des balises <a> avec des attributs href. Chaque URL qu’il trouve est ajoutée à la file d’exploration.

C’est la première passe. L’explorateur de Google peut exécuter JavaScript (il utilise une version de Chrome sous le capot), mais le rendu JavaScript se fait plus tard, lors d’une deuxième passe, et n’est pas garanti pour chaque page. Google privilégie la première passe d’exploration HTML parce qu’elle est rapide et fiable. Les pages qui dépendent entièrement de JavaScript pour la navigation sont désavantagées.

Voici ce que Google recherche :

<a href="/collections/summer-shoes">Summer Shoes</a>

C’est un vrai lien. L’attribut href contient une URL. L’explorateur de Google extrait /collections/summer-shoes et l’ajoute à la file d’exploration. Cette page sera explorée et indexée.

Voici ce que Google ignore ou manque pendant la première passe :

<div onclick="window.location='/collections/summer-shoes'">Summer Shoes</div>
<a href="javascript:void(0)" onclick="navigate('/collections/summer-shoes')">Summer Shoes</a>
<button data-url="/collections/summer-shoes">Summer Shoes</button>

Aucune de ces balises ne sont des balises d’ancrage avec de vrais attributs href. Les URL existent dans le code (dans les gestionnaires onclick ou les attributs data), mais l’explorateur de première passe de Google n’exécute pas JavaScript ou n’analyse pas les attributs data lors de la découverte de liens. Ces liens sont invisibles lors de l’exploration initiale.

Google pourrait éventuellement découvrir ces pages par d’autres moyens (plans de site, backlinks externes, rendu JavaScript), mais elles n’auront pas la priorité d’exploration ou l’équité de lien qui provient d’être liées dans le HTML de navigation principale.

View Source : le test définitif

Vous n’avez pas besoin d’outils spéciaux pour vérifier si votre navigation est explorable. Chaque navigateur a une fonction « View Source » qui affiche le HTML brut envoyé par le serveur avant que JavaScript ne s’exécute. C’est exactement ce que l’explorateur de première passe de Google voit.

Comment vérifier

1. Ouvrez la page d’accueil de votre boutique dans Chrome, Firefox, ou Safari.
2. Cliquez avec le bouton droit n’importe où sur la page et sélectionnez « View Page Source » (ou appuyez sur Ctrl+U sous Windows, Cmd+Option+U sur Mac).
3. Un nouvel onglet s’ouvre affichant le HTML brut.
4. Appuyez sur Ctrl+F (Cmd+F sur Mac) et recherchez l’URL de l’une de vos principales pages de catégories — par exemple, /collections/women.

Si vous trouvez l’URL à l’intérieur d’une balise d’ancrage comme ceci :

<a href="/collections/women">Women's Clothing</a>

Votre navigation est explorable. Google peut suivre ce lien.

Si l’URL n’apparaît pas dans View Source du tout, ou si elle n’apparaît que dans une balise <script> ou un attribut data comme ceci :

<div class="menu-item" data-url="/collections/women">Women's Clothing</div>

Votre navigation n’est pas explorable à la première passe. L’exploration HTML initiale de Google la manquera.

Mobile vs bureau

De nombreuses boutiques utilisent différentes implémentations de navigation pour mobile et bureau. La version bureau pourrait utiliser des balises d’ancrage HTML sémantiques tandis que la version mobile utilise des menus hamburger JavaScript uniquement. Puisque Google utilise l’indexation mobile-first (la version mobile est la version principale que Google explore), vous devez vérifier le HTML mobile séparément.

Dans Chrome :

1. Ouvrez DevTools (F12 ou clic droit → Inspect).
2. Cliquez sur l’icône de barre d’outils de l’appareil (ou appuyez sur Ctrl+Shift+M / Cmd+Shift+M).
3. Sélectionnez un appareil mobile dans la liste déroulante (iPhone SE, par exemple).
4. Rechargez la page.
5. Cliquez avec le bouton droit et View Source de nouveau.

Recherchez les URL de vos catégories dans le HTML mobile. Si elles n’apparaissent pas, l’explorateur mobile de Google ne voit pas les liens de votre navigation.

Modèles courants qui échouent au test View Source

Modèle 1 : Mega-menus générés par JavaScript

De nombreuses applications modernes de menu fonctionnent comme ceci :

1. Le serveur envoie du HTML minimal — juste un bouton de déclenchement du menu.
2. Quand l’utilisateur survole ou clique, JavaScript récupère les données du menu à partir d’une API ou analyse un objet JSON.
3. JavaScript construit le DOM complet (y compris tous les balises <a>) et l’injecte dans la page.

Exemple de HTML envoyé par le serveur :

<button id="mega-menu-trigger">Shop</button>
<div id="mega-menu-container"></div>
<script>
  const menuData = {
    "women": {"label": "Women", "url": "/collections/women"},
    "men": {"label": "Men", "url": "/collections/men"}
  };
  // JavaScript construit et injecte les liens lors de l'interaction utilisateur
</script>

View Source affiche le bouton et le conteneur vide. Les liens n’existent pas encore. L’exploration de première passe de Google ne voit aucun lien vers les pages de catégories.

Modèle 2 : Routage d’application monopage

Les boutiques construites avec React, Vue, ou d’autres cadres SPA utilisent souvent le routage côté client. Le menu pourrait ressembler à ceci dans le code du cadre :

<Link to="/collections/summer-shoes">Summer Shoes</Link>

Le fait que ce soit explorable dépend de la façon dont le cadre le rend et de la possibilité que l’application utilise le rendu côté serveur. Si l’application est une SPA purement côté client (le serveur envoie un shell index.html unique et JavaScript rend tout), View Source affiche un shell vide sans liens de navigation :

<!DOCTYPE html>
<html>
<head><title>Store</title></head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

Tout contenu, y compris la navigation, est rendu par JavaScript. L’exploration de première passe de Google ne voit rien.

Modèle 3 : Gestionnaires onclick sans href

Certains menus utilisent des balises d’ancrage mais mettent la logique de navigation dans les gestionnaires onclick et utilisent javascript:void(0) comme href :

<a href="javascript:void(0)" onclick="goToCategory('women')">Women</a>

Cela ressemble à un lien pour les utilisateurs et se comporte même comme un lien quand on clique, mais javascript:void(0) n’est pas une URL réelle. L’explorateur de Google extrait javascript:void(0) de l’attribut href et le rejette parce que ce n’est pas une URL explorable. La vraie destination (/collections/women) est enfouie dans la fonction JavaScript goToCategory(), que l’explorateur n’exécute pas lors de l’analyse HTML de première passe.

Modèle 4 : Divs et boutons avec attributs data

Les développeurs construisent parfois la navigation en utilisant des éléments non sémantiques :

<div class="nav-item" data-url="/collections/women" onclick="navigate(this.dataset.url)">
  Women
</div>

Cela fonctionne pour les utilisateurs (JavaScript lit l’attribut data et navigue quand on clique), mais il n’y a pas de balise <a> et pas d’attribut href. L’explorateur de Google ne cherche pas les URL dans les attributs data. Le lien est invisible.

Comment corriger les liens JavaScript uniquement

Correction 1 : Rendre les liens en HTML, améliorer avec JavaScript

La meilleure approche : votre serveur (ou générateur de sites statiques) génère du HTML complet avec de vrais balises d’ancrage. JavaScript ajoute l’interactivité par-dessus.

HTML rendu par le serveur :

<nav>
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
  <a href="/collections/kids">Kids</a>
</nav>

Ce HTML est explorable. Google voit les liens immédiatement.

Ensuite, JavaScript l’améliore :

document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', (e) => {
    // Ajouter des transitions lisses, analyses, etc.
    // Laisser le navigateur naviguer normalement (ne pas preventDefault)
  });
});

La navigation fonctionne sans JavaScript (dégradation élégante), fonctionne parfaitement avec JavaScript (amélioration progressive), et est explorable dans les deux cas.

Correction 2 : Utiliser le rendu côté serveur pour les SPA

Si votre boutique est une application monopage construite avec React, Vue, ou similaire, implémentez le rendu côté serveur (SSR) ou la génération de sites statiques (SSG).

Les cadres qui rendent cela facile :

• Next.js pour React
• Nuxt pour Vue
• SvelteKit pour Svelte
• Gatsby pour les sites statiques

Ces cadres rendent le HTML complet (y compris la navigation) sur le serveur. Le chargement initial de la page fournit du HTML complet et explorable. Ensuite, JavaScript réhydrate la page et prend le relais pour la navigation ultérieure, ce qui vous donne l’expérience SPA pour les utilisateurs et du HTML explorable pour les moteurs de recherche.

Correction 3 : Vérifier les paramètres de votre application de menu

Si vous utilisez une application de menu Shopify, vérifiez les paramètres de l’application pour une option « Mode SEO » ou « Rendu côté serveur ». De nombreuses applications offrent cela comme un basculement. Quand activé, l’application rend les liens de navigation en Liquid (le langage de modélisation côté serveur de Shopify) au lieu de JavaScript.

Si votre application n’offre pas cette option et vous avez confirmé (via View Source) que votre navigation n’est pas explorable, envisagez de passer à une application qui le fait. Navi+ AI Menu Builder rend tous les liens en HTML par défaut — les liens sont dans la charge utile HTML initiale, et JavaScript gère seulement l’interaction et l’animation.

Correction 4 : Amélioration progressive pour les menus hamburger

Les menus hamburger mobile masquent souvent la navigation jusqu’à ce que l’utilisateur appuie sur l’icône. Le menu peut toujours être explorable tant que les liens existent dans le HTML :

<nav class="mobile-menu" aria-hidden="true">
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
</nav>

CSS masque le menu par défaut :

.mobile-menu {
  display: none;
}
.mobile-menu.is-open {
  display: block;
}

JavaScript bascule la classe quand le hamburger est tapé :

hamburgerButton.addEventListener('click', () => {
  mobileMenu.classList.toggle('is-open');
});

Les liens existent dans le HTML (View Source les affiche), donc Google peut les explorer même s’ils sont masqués par CSS. C’est correct — Google ne pénalise pas le contenu caché tant qu’il n’est pas trompeur (vous ne cachez pas du spam avec remplissage de mots-clés).

Ce qui ne fonctionne pas : construire le DOM du menu mobile avec JavaScript uniquement quand le hamburger est tapé :

hamburgerButton.addEventListener('click', () => {
  const menu = document.createElement('nav');
  menu.innerHTML = '<a href="/fr/collections/women">Women</a>...';
  document.body.appendChild(menu);
});

Ce menu n’existe pas dans le HTML jusqu’à ce que l’utilisateur interagisse. L’explorateur de Google ne tape pas les icônes hamburger. Les liens sont invisibles.

Tester votre correction

Après avoir mis à jour votre navigation, vérifiez qu’elle est maintenant explorable :

1. Test View Source : Rechargez votre page d’accueil et View Source. Recherchez les URL des catégories. Confirmez qu’elles apparaissent dans les balises d’ancrage.
2. Test JavaScript désactivé : Dans Chrome DevTools, désactivez JavaScript (Settings → Debugger → Disable JavaScript). Rechargez votre page d’accueil. Confirmez que les liens de navigation sont visibles et cliquables. Cliquer sur un lien devrait naviguer vers la page de catégorie (la page aura l’air cassée sans JavaScript, mais la navigation devrait fonctionner).
3. Google Search Console : Attendez quelques jours, puis vérifiez le rapport Coverage (Pages → Indexed). Si les pages de catégories précédemment orphelines commencent à apparaître comme indexées, votre correction a fonctionné.

Vérifier bureau et mobileExécutez le test View Source sur les deux versions bureau et mobile de votre site. Si votre navigation mobile utilise une implémentation différente (menu hamburger, application différente, structure simplifiée), testez-la séparément. L'indexation mobile-first de Google signifie que la version mobile est ce qui compte pour les classements.

Pourquoi cela compte plus que vous ne le pensez

La navigation n’est pas qu’un ensemble de liens parmi d’autres sur votre site — c’est l’ensemble le plus proéminent et cohérent de liens que Google voit. La navigation principale apparaît sur chaque page. Elle est dans l’en-tête, près du haut du document HTML, où Google s’attend à trouver des liens importants. Quand Google explore votre page d’accueil, la navigation est le premier ensemble de liens qu’il rencontre.

Si ces liens ne sont pas explorables, Google n’oublie pas seulement quelques pages. Il perd le signal principal pour comprendre l’architecture de votre site. Les pages de catégories deviennent des orphelines. Les produits liés uniquement à partir de ces pages de catégories deviennent des orphelines un niveau plus profond. Toute la structure du site s’effondre du point de vue de Google.

Et parce que la navigation est si cohérente (même menu sur chaque page), l’impact se multiplie. Si votre navigation de page d’accueil est JavaScript uniquement, chaque page de votre site a le même problème. Google explore 100 pages et trouve zéro liens de navigation sur les 100 pages. Ce n’est pas un problème SEO mineur — c’est un échec d’explorabilité fondamental.

Le test View Source prend 30 secondes. Si les URL de vos catégories n’apparaissent pas dans le HTML brut, vous avez trouvé la correction SEO la plus importante que vous pouvez faire. Tout le reste — optimisation des mots-clés, backlinks, améliorations techniques — s’appuie sur l’hypothèse que Google peut explorer vos pages. Sans navigation explorable, cette hypothèse est fausse.