Une SPA (Single Page Application) est une application web qui charge une seule page HTML et met à jour dynamiquement le contenu via JavaScript, sans rechargement complet de la page.
Fonctionnement d'une SPA
- Chargement initial d'une page HTML quasi vide
- Téléchargement du bundle JavaScript
- Rendu du contenu côté client
- Navigation sans rechargement de page
- Communication avec le serveur via API
Problèmes SEO des SPA
- Contenu non visible : Le HTML initial est vide
- Dépendance au JavaScript : Googlebot doit exécuter le JS
- Indexation retardée : Rendu différé (second wave)
- Balises meta dynamiques : Mal lues par les crawlers
- URLs : Problèmes avec les hash (#) au lieu de vraies URLs
Solutions pour le SEO des SPA
- SSR : Server-Side Rendering (Next.js, Nuxt.js)
- SSG : Génération statique à la compilation
- Dynamic Rendering : Pré-rendu pour les bots
- Hydration : SSR + interactivité JavaScript
Frameworks SPA populaires
- React : Bibliothèque UI de Meta
- Vue.js : Framework progressif
- Angular : Framework complet de Google
- Svelte : Compilateur sans runtime
Avantages des SPA
- Expérience utilisateur fluide
- Navigation rapide après chargement initial
- Architecture moderne et maintenable
- Interactions riches et dynamiques
SPA et SEO : bonnes pratiques
- Utiliser des URLs propres avec History API
- Implémenter le SSR ou le prerendering
- Gérer les balises meta dynamiquement
- Tester l'indexation avec l'outil d'inspection d'URL
- Vérifier le rendu JavaScript dans Search Console