Les liens dans les menus déroulants sont-ils vraiment crawlés par Google ?

Pourquoi cette précision sur le HTML au chargement ?

Google distingue clairement deux types de liens : ceux présents dans le HTML source dès le premier rendu, et ceux ajoutés après coup par JavaScript. Cette distinction n'est pas anodine.

Quand Googlebot télécharge ta page, il récupère d'abord le HTML brut. Si tes liens de navigation sont déjà là, dans des balises <a href> classiques simplement masquées par du CSS (display:none, visibility:hidden, ou transformations), le crawler les voit immédiatement. Pas besoin d'exécuter du JavaScript, pas de latence, pas de risque.

Quelle différence entre un menu CSS pur et un menu JavaScript ?

Un menu déroulant CSS pur utilise des pseudo-classes comme :hover ou des checkbox cachées pour afficher/masquer les sous-menus. Tous les liens existent dans le DOM initial. Google les crawle sans effort.

Un menu JavaScript peut fonctionner de deux façons. Soit il masque/affiche des éléments déjà présents dans le HTML (même logique que le CSS, aucun problème). Soit il charge dynamiquement les liens au clic ou au survol via fetch() ou XMLHttpRequest. Dans ce second cas, ces liens n'existent pas au moment du crawl initial.

Google peut exécuter du JavaScript et finir par découvrir ces liens, mais avec deux inconvénients majeurs : un délai de traitement (le rendu JavaScript consomme du crawl budget) et un risque d'échec si le script plante ou si Googlebot n'attend pas assez longtemps.

Le display:none pose-t-il encore problème en termes de crawl ?

Non. Cette vieille légende SEO est morte depuis longtemps. Google crawle parfaitement les liens masqués en CSS, qu'ils soient en display:none, visibility:hidden, ou positionnés hors écran.

La nuance concerne le poids SEO des ancres. Un lien visible dans le contenu principal aura plus de valeur qu'un lien planqué dans un mega-menu avec 200 autres liens. Mais côté crawl pur, aucune distinction : si le lien est dans le HTML, il est suivi.

• Les liens dans le HTML initial sont crawlés immédiatement, même masqués en CSS
• Les liens chargés après le rendu (AJAX, fetch) dépendent du budget de rendu JavaScript
• Un menu avec 300 liens dilue le PageRank, même si tous sont crawlés
• Le temps de réponse serveur impacte davantage le crawl que la méthode d'affichage du menu
• Google suit les liens dans les menus déroulants exactement comme ceux du footer ou de la sidebar

Cette déclaration est-elle cohérente avec les observations terrain ?

Oui, et c'est même une des rares affirmations de Google qui colle parfaitement à ce qu'on observe en crawl. Les tests de logs montrent que Googlebot suit sans problème les liens des mega-menus, des navigations cachées, des accordéons CSS.

Par contre, on voit régulièrement des sites où certaines sections ne sont jamais crawlées parce que leurs liens n'apparaissent qu'après interaction JavaScript. Typiquement : un menu hamburger qui charge son contenu via fetch() au premier clic. Sur desktop, Google ne clique pas. Le lien reste invisible.

Quels pièges subsistent malgré cette confirmation ?

Le premier piège, c'est de confondre crawl et équité de PageRank. Oui, Google crawle ton menu déroulant avec 500 liens. Mais ces 500 liens se partagent le jus de la page. Si ta homepage a un mega-menu avec 12 catégories déployant chacune 30 sous-catégories, tu dilues massivement.

Deuxième piège : les frameworks JavaScript modernes (React, Vue, Next.js en mode CSR) qui montent le DOM après coup. Si ton composant de navigation se construit côté client et que le HTML initial ne contient qu'un <div id="root"></div>, tes liens ne sont techniquement pas "présents dans le HTML lors du chargement". Google devra attendre le rendu JavaScript. [A vérifier] sur chaque audit technique : inspecte le HTML source brut (Ctrl+U, pas l'inspecteur), pas le DOM post-rendu.

Troisième piège : les événements tactiles. Sur mobile, certains menus déroulants nécessitent un tap pour s'ouvrir. Si les liens enfants ne sont injectés qu'au tap, et que Googlebot mobile ne simule pas ce tap, problème. Toujours vérifier que les liens existent dans le HTML, pas seulement qu'ils s'affichent visuellement.

Dans quels cas cette règle ne suffit-elle pas ?

Quand tu utilises des liens relatifs ambigus dans un menu chargé sur plusieurs URLs. Exemple : un mega-menu avec <a href="../produits/"> qui fonctionne depuis /categorie/ mais plante depuis /categorie/sous-categorie/page.html. Google crawle le lien, tombe sur une 404, fin de l'histoire.

Autre cas : les menus déroulants qui se basent sur des ancres JavaScript (<a href="#" onclick="...">) sans vrai href. Techniquement, il y a un lien dans le HTML, mais il pointe vers #. Google ne crawlera rien. Cette erreur subsiste encore sur des sites corporate qui confondent navigation et événements JS.

Comment vérifier que mes menus déroulants sont bien crawlables ?

Première étape : désactive JavaScript dans ton navigateur (Chrome DevTools > Paramètres > Debugger > Disable JavaScript). Recharge la page. Si tes liens de menu n'apparaissent plus du tout, c'est qu'ils sont générés en JS après le chargement. Problème.

Deuxième vérification : Ctrl+U pour voir le HTML source. Cherche tes liens de navigation. S'ils sont là, en dur, dans des balises <a href>, même enrobés de <div style="display:none">, tu es bon. S'ils n'apparaissent pas, ou seulement sous forme de <div id="menu-container"></div> vide, ils seront crawlés uniquement après rendu JavaScript.

Troisième check : Google Search Console, section Couverture. Regarde si des URLs importantes (catégories, fiches produit) sont marquées "Détectée, actuellement non indexée". Si ces pages sont liées uniquement depuis ton menu déroulant, et que le menu charge ses liens en JS, c'est peut-être la cause. Compare avec les logs serveur : Googlebot visite-t-il ces URLs ? Si non, le lien n'est probablement pas crawlé.

Faut-il privilégier CSS ou JavaScript pour les menus déroulants ?

En 2025, CSS pur reste le choix le plus sûr pour la navigation critique. Un menu géré avec :hover, :focus, ou même des checkbox cachées garantit que tous les liens sont dans le DOM initial. Zéro latence de rendu, zéro risque d'échec JavaScript.

Si tu dois utiliser JavaScript (par exemple pour gérer des mega-menus complexes avec lazy-loading d'images), assure-toi que les liens eux-mêmes sont dans le HTML. Seul le comportement d'affichage peut être géré en JS. Exemple : un script qui ajoute/retire une classe .open sur un conteneur déjà présent, OK. Un script qui fait un fetch() pour récupérer les liens au survol, pas OK.

Pour les frameworks modernes, active le Server-Side Rendering (SSR) ou la génération statique (SSG). Next.js, Nuxt, SvelteKit le font nativement. Ton menu sera rendu côté serveur, les liens seront dans le HTML initial, Google crawle normalement.

Quelles erreurs éviter absolument ?

Erreur n°1 : utiliser <a href="#"> ou <a href="javascript:void(0)"> pour des éléments de navigation. Ces liens ne pointent nulle part. Google ne les suit pas. Si tu as besoin d'un déclencheur visuel sans destination, utilise un <button>, pas un <a>.

Erreur n°2 : charger les liens de sous-navigation uniquement au clic/survol via AJAX. Sur mobile, Googlebot ne clique pas. Sur desktop, il peut ne pas attendre le rendu JavaScript. Ces liens risquent de rester invisibles. Si tu veux lazy-loader des ressources (images, vidéos), OK. Mais les liens de navigation doivent être présents dès le départ.

Erreur n°3 : oublier le maillage interne alternatif. Même si Google crawle ton menu déroulant, si c'est la seule source de liens vers certaines catégories profondes, tu es en danger. Un problème technique (bug JS, CDN en panne) et ces pages deviennent orphelines. Ajoute des liens contextuels dans le contenu, un sitemap XML, une page de plan du site.

• Vérifier que les liens de navigation sont présents dans le HTML source (Ctrl+U), pas seulement dans le DOM post-rendu
• Désactiver JavaScript dans le navigateur et vérifier que les liens restent accessibles
• Éviter les <a href="#"> et <a href="javascript:..."> pour la navigation réelle
• Privilégier le CSS pur ou le SSR/SSG pour les menus déroulants
• Monitorer les logs de crawl pour vérifier que Googlebot accède bien aux URLs liées depuis le menu
• Ajouter un maillage interne redondant (liens contextuels, footer, sitemap) pour les pages critiques