Si l’optimisation des balises title ou la vitesse de chargement sont des sujets récurrents, il existe un « ennemi silencieux » qui sabote souvent l’indexation des catalogues produits volumineux : le signe dièse, techniquement appelé le fragment d’URL.
Imaginez que vous vendiez un canapé disponible en six couleurs. Si votre développeur a choisi d’utiliser des URL basées sur le caractère # pour afficher ces variantes, il est fort probable que Google ne voit qu’un seul canapé, ignorant totalement les cinq autres.
Comprendre la nature technique du signe « # »
Pour saisir l’enjeu, il est nécessaire de revenir aux fondamentaux du protocole web. Une URL (Uniform Resource Locator) est l’adresse qui permet de localiser une ressource sur un serveur.
Cependant, le caractère # possède un statut très particulier.
La distinction Client vs Serveur
Le fragment (tout ce qui suit le #) est historiquement conçu pour la navigation interne au sein d’une même page (les ancres). Mais sa caractéristique majeure est la suivante : le fragment n’est jamais envoyé au serveur.
- URL standard :
monsite.com/produit?couleur=rouge- Le navigateur envoie la requête complète au serveur.
- Le serveur sait que l’utilisateur veut le produit en « rouge » et renvoie la page correspondante.
- URL à fragment :
monsite.com/produit#rouge- Le navigateur demande
monsite.com/produitau serveur. - Le serveur renvoie la page « par défaut ».
- Le navigateur (le client) lit ensuite le
#rougeet scrolle vers l’élément ou exécute un script JavaScript pour changer la photo du produit.
- Le navigateur demande
Du point de vue du serveur (et donc souvent du robot d’indexation basique), l’URL s’arrête avant le dièse.
Pourquoi Google évite d’indexer les déclinaisons des URL à fragments ?
L’objectif premier de Google est d’indexer des contenus distincts. Or, le traitement du # pose trois problèmes majeurs pour un site marchand.
1. Le problème de l’unicité du contenu
Si vous avez une fiche produit avec 10 déclinaisons (tailles et couleurs) gérées par des fragments (#taille-s, #taille-m, etc.), Google considère généralement qu’il s’agit d’une seule et unique URL.
Le moteur de recherche va indexer la version canonique de la page. Si le contenu (description spécifique, photo, prix différent selon la taille) est chargé dynamiquement uniquement lorsque le # est activé par un clic utilisateur, Googlebot risque de ne jamais « voir » ce contenu spécifique.
2. L’indexation des déclinaisons
C’est ici que l’impact est le plus fort. Si vous souhaitez que votre page « Chaussure de running Rouge » se positionne sur la requête « Chaussure running rouge », elle a besoin de sa propre URL indexable.
Si l’URL est site.com/chaussure#rouge, Google ignorera le #rouge. Pour lui, l’URL est site.com/chaussure. Il ne pourra pas présenter la variante rouge spécifiquement dans les résultats de recherche (SERP).
3. Le gaspillage et la confusion des signaux
Même si Google est aujourd’hui capable d’exécuter du JavaScript et de comprendre certains changements de contenu, il est risqué de s’y fier aveuglément. L’utilisation massive de fragments peut empêcher la transmission correcte de l’équité des liens (link juice) vers vos variantes stratégiques.
Le cas spécifique du « Hashbang » (#!): une fausse bonne idée ?
Il y a quelques années, une technique consistait à utiliser #! (hashbang) pour indiquer à Google qu’une URL dynamique suivait. Google transformait alors site.com/page#!etat en site.com/page?_escaped_fragment_=etat.
Mise en garde : Cette méthode est officiellement obsolète depuis longtemps. Si votre agence web ou votre développeur vous propose d’utiliser le hashbang pour gérer vos produits en 2024 ou 2025, refusez catégoriquement. C’est une dette technique assurée.
Les déclinaisons produits : le dilemme UX vs SEO
Pourquoi tant de sites utilisent-ils encore le # ? Pour la performance perçue (UX).
L’utilisation du fragment permet de changer le contenu de la page (changer la photo du produit quand on clique sur « Bleu ») sans recharger la page entière. C’est instantané pour l’utilisateur. C’est ce qu’on appelle une « Single Page Application » (SPA) ou un comportement AJAX.
Cependant, pour le SEO, nous avons besoin d’URL distinctes. Faut-il choisir entre vitesse et référencement ? Heureusement, non.
La solution moderne : L’API History (PushState)
La méthode recommandée pour concilier les deux mondes est l’utilisation de l’API History du navigateur (pushState).
Cette technologie permet de :
- Changer l’URL dans la barre d’adresse sans recharger la page (excellent pour l’UX).
- Créer une URL propre, sans
#(par exemple/produit/rougeou/produit?couleur=rouge). - Permettre à Google d’accéder directement à cette URL et de l’indexer comme une page à part entière.
Quand utiliser le « # » est-il acceptable en E-commerce ?
Il ne faut pas bannir totalement ce caractère. Il a des utilités précises où il ne nuit pas au SEO, voire où il est utile.
1. Les liens d’ancrage (Table of Contents)
Sur un article de blog long (comme celui-ci) ou une FAQ produit, utiliser # pour emmener l’utilisateur directement à la section « Livraison » est pertinent. Google ne l’indexera pas comme une page séparée, ce qui est exactement ce que nous voulons (éviter le contenu dupliqué).
2. Les filtres de navigation non stratégiques
Sur une page catégorie, vous avez parfois des dizaines de filtres (prix, matière, marque).
- Si vous voulez que la page « Canapés en cuir » soit indexée : utilisez une URL propre (
/canapes/cuir). - Si vous ne voulez pas que la page « Canapés entre 150€ et 155€ » soit indexée (car faible valeur ajoutée) : l’utilisation de paramètres avec
#peut être une technique pour empêcher Google de crawler ces milliers de combinaisons inutiles, économisant ainsi votre budget d’exploration.
3. La stratégie de consolidation : Privilégier le produit « Maître »
Il existe un scénario spécifique où l’utilisation du fragment # (ou d’une canonique restrictive) est une décision SEO totalement justifiée. C’est le cas lorsque l’intention de recherche de l’internaute se porte uniquement sur le modèle du produit et non sur ses attributs techniques secondaires.
Prenons l’exemple d’un T-shirt basique. Il est rare qu’un utilisateur recherche spécifiquement « T-shirt col V coton bio taille M » dans Google. Il cherchera plutôt « T-shirt col V coton bio ».
Dans ce cas de figure, créer et indexer une URL distincte pour chaque taille (S, M, L, XL) serait contre-productif pour deux raisons :
- Risque de cannibalisation : Vos 5 pages de variantes se battraient entre elles pour se positionner sur la même requête principale, diluant ainsi votre pertinence.
- Dilution du maillage interne : En concentrant l’ensemble des liens et de la popularité (le fameux « jus SEO ») sur une seule URL principale (celle sans le
#), vous renforcez considérablement l’autorité de cette page « Maître ».
Le conseil stratégique : Si la variante (taille, contenance, format) ne génère pas de volume de recherche spécifique, ne l’indexez pas. Utilisez le fonctionnement natif du
#pour gérer l’affichage côté utilisateur sans multiplier les URL inutiles aux yeux de Google. Cela permet de « bétonner » la puissance de votre page produit principale.
Stratégie de migration : passer du Hash aux URL propres
Si vous constatez que votre site actuel gère ses déclinaisons produits avec des dièses, voici la marche à suivre pour rectifier le tir sans perdre de trafic.
Audit de l’existant
Utilisez un crawler (comme Screaming Frog) pour identifier les URL contenant des #. Attention, par défaut, la plupart des crawlers ignorent ce qui suit le dièse, il faudra donc configurer l’outil pour analyser le rendu JavaScript.
Définition de la structure cible
Pour des déclinaisons produits, deux écoles s’affrontent :
- Les paramètres d’URL :
produit-base?color=rouge. C’est la méthode préférée de Google pour les facettes. Elle est claire et facile à contrôler via la Google Search Console. - Les répertoires statiques :
produit-base/rouge. Plus « propre » visuellement, mais peut générer des conflits d’arborescence si mal géré.
Mise en place des balises Canoniques
C’est le point de vigilance absolu.
Si vous passez à des URL distinctes pour chaque variante (produit?color=rouge et produit?color=bleu), vous risquez le contenu dupliqué (les pages sont identiques à 90%).
- Option A (Consolidation) : Si les variantes ont peu de recherche spécifique, toutes les variantes pointent leur balise
canonicalvers la page produit principale. - Option B (Différenciation) : Si « Chaussure Rouge » est un mot clé fort, la page
?color=rougedoit avoir unecanonicalqui pointe vers elle-même (Self-referencing), et le contenu doit être suffisamment unique (titre H1, description, image ALT modifiés).
Synthèse : Le tableau de décision
Pour simplifier votre prise de décision lors de la création de votre architecture e-commerce, référez-vous à ce tableau :
| Type de contenu | Méthode recommandée | Impact SEO |
| Variante Produit (Taille/Couleur) | URL Paramètre (?v=) ou Statique | Positif (Indexation possible) |
| Onglets (Avis, Description) | Fragment (#avis) | Neutre (Contenu vu sur la page principale) |
| Filtres Prix / Tri | Fragment (#sort=price) ou NoIndex | Positif (Économie de crawl budget) |
| Contenu chargé en AJAX | PushState (URL propre) | Positif (Meilleure lecture par les bots) |
L’utilisation du signe # dans les URL de produits avec déclinaisons est une pratique technique qui, bien que séduisante pour la fluidité de navigation, représente un frein considérable pour votre stratégie d’acquisition organique.
En rendant vos variantes invisibles aux yeux des moteurs de recherche ou en complexifiant la compréhension de votre catalogue, vous vous privez d’un trafic qualifié sur des requêtes de longue traîne (« achat chemise lin beige taille L »).
L’excellence en e-commerce réside dans l’équilibre : offrir une expérience utilisateur fluide via JavaScript tout en servant aux robots des URL structurées, propres et distinctes.
Vous avez un doute sur l’architecture de vos URL ou vous planifiez une refonte de votre site e-commerce ? Une erreur à ce stade peut coûter des mois de chiffre d’affaires.
Besoin d’un audit technique de votre boutique ?
L’architecture des URL est la fondation de votre maison digitale. Si les fondations sont fragiles, le reste de vos efforts SEO sera vain.
Discutons de votre projet et analysons ensemble si votre structure actuelle favorise ou freine votre croissance.
FAQ : Questions fréquentes sur les URL et le SEO
Dans la grande majorité des cas, oui, pour l’indexation. Google peut utiliser le fragment pour comprendre la structure de la page ou pour afficher des « Sitelinks » (liens rapides vers une section), mais il n’indexera pas page#contenu comme une URL séparée de page.
Absolument pas. Ces frameworks modernes permettent le « Server-Side Rendering » (SSR) ou l’hydratation statique (comme avec Next.js ou Nuxt.js). Ils gèrent parfaitement la création d’URL propres via l’History API, rendant le site parfaitement « SEO-friendly » sans utiliser de #.
Oui, c’est un effet secondaire intéressant. Puisque Google considère que page#a et page#b sont la même page, il ne la crawlera qu’une seule fois. C’est utile pour des tris ou des filtres infinis que vous ne voulez pas voir indexés, mais c’est désastreux pour des produits que vous voulez vendre.
Allez sur Google et tapez site:votre-domaine.com inurl:nom-du-produit. Si vous ne voyez qu’une seule URL générique alors que vous avez 10 couleurs, vos déclinaisons ne sont probablement pas indexées individuellement. Cela n’est pas forcément grave et peut même être un avantage si le but est de faire connaître le produit principal et pas forcément toutes les déclinaisons.
