Site internet - Spécificités d'une Single Page Application (SPA)
Alors qu'un site internet "classique" possède plusieurs pages, celui nommé site "Single Page Application" ne dispose que d'une seule page, donc une seule URL, en tout cas, historiquement... Quels sont les avantages/inconvénients qui en découlent ? l'utilisateur navigue à travers le site web tout simplement en scrollant de haut en bas ? Quelle est l'anatomie d'une Single Page Application (ou SPA) ? Quels sont les impacts d'une telle arborescence sur le référencement naturel et existe t'il des solutions ?
Quelles sont les grandes différences entre un site internet classique et une "Single Page Application" ?
Un site web application (application monopage) est plus connu sous le terme "site One Page" se compose d'une page unique par laquelle l'utilisateur peut naviguer à travers tout le site, contrairement aux sites classiques comportant plusieurs pages web. Schématiquement, le site One Page ne dispose que d'une seule URL, le survol du site en question se fait par l'usage de backlinks et d'ancres.
Actuellement, la création de sites One Page intéresse les organismes et entreprises à la recherche d'une solution simple pour leur présence digitale. D'arborescence simplifiée, une Single Page Application présente des avantages certains :
- Expérience de navigation mobile améliorée (textes concis, peu de boutons et de liens)
- Force de la stratégie netlinking (liens internes dirigés vers une page unique)
- Ciblage d'audience plus efficace (contrôle optimal de la navigation et de la conversion des mobinautes et des internautes par cette page unique).
Si pour un site web classique, la logique applicative (c'est-à-dire pages à afficher et réponses aux actions de l'internaute) est prise en charge par le serveur, dans le cas de la SPA c'est bien le navigateur qui en est responsable. Autre grande distinction : pour un site SPA, le serveur fournit les ressources nécessaires à l'application et expose les données, cependant pour un site classique, le rôle du navigateur est d'afficher les pages et de transmettre au serveur toutes les actions de l'internaute.
Par conséquent, l'arborescence du "site One Page" est beaucoup plus simple, les gros pavés de textes sont alors remplacés par des visuels attractifs et vivants (le "site One Page" peut être comparée à une devanture numérique de magasin). Ce site est aussi moins lourd, car le temps d'attente est supprimé pour le chargement des autres pages à chaque nouvelle requête du visiteur (contenu chargé en une seule fois). Enfin, la maintenance est largement facilitée dans le cas d'un tel site.
Quels sont les impacts d'un site internet en "Single Page Application" sur la qualité du référencement naturel (SEO)
Pour les algorithmes des moteurs de recherche, le site SPA n'avait, en définitive qu'une URL unique, ce qui influence directement sur le référencement naturel SEO (un mauvais référencement sur cette unique page supprime toutes les chances d'un site tout entier d'être vu dans les résultats de recherche SERP). De plus, le contenu textuel est condensé (parfois trop pauvre), ce qui ne permet pas de bénéficier d'une stratégie de contenus efficace (cocon sémantique et travail sur le positionnement avec l'intégration de mots-clés). De même, l'arborescence en silo (content siloing) disparait, ce qui défavorise l'optimisation pour le référencement (contenu non segmenté et non-organisé dans la logique de l'algorithme Google). Il existe depuis peu, une technique pour palier cette grosse faiblesse que nous verrons plus tard...
Autrement dit, pour une bonne stratégie SEO, il faut d'une part bien optimiser les balises de titres et sous titres avec des mots-clés stratégiques, d'autre part optimiser le code HTML.
Plus intuitif (conçu surtout pour les terminaux mobiles) et esthétiquement simplifié, le Site One Page est ainsi mieux adapté pour la présence en ligne d'une entreprise, à la manière d'un site vitrine, ou plus recommandée pour la présentation d'un concept unique (évènement) ou de quelques produits spécialisés (peu recommandé pour des sites e-commerce de grande envergure).
Optimisation d'une Single Page Application pour les moteurs de recherche
Le routage en JavaScript pour une Single Page Application à plusieurs pages
Je vous disais, un peu plus haut, qu'il existait une solution pour optimiser les Single Page Application pour les moteurs de recherche (SEO). C'est vrai, mais il faut faire développer votre site internet par une agence web ou tout simplement avoir des connaissances en développement et plus particulièrement en JavaScript et Node JS.
En effet, il faut mettre en place ce que l'on appelle le rendu côté serveur (ou Server Side Rendering) associé à un système de routage.
Je m'explique : je vous disais tout à l'heure qu'on accédait au site one page par une URL unique. Oui et Non ! En vrai, quel que soit l'URL (http://exemple.com ou http://exemple.com/qui-sommes-nous), le serveur renverra toujours la page principale, c'est à dire l'index.html. Ce n'est que lorsque vous allez tenter d'accéder au site internet que votre navigateur va charger et executer la partie JavaScript. Et c'est là qu'est toute la magie, dans le code JavaScript.
En effet, c'est ce programme qui, en fonction de l'URL souhaitée, va charger telle ou telle page (accueil ou qui-sommes-nous). C'est donc un router codé en JavaScript qui est responsable de l'affichage des pages.
Vous allez me dire, c'est bien joli tout ca, mais qu'en est-il des moteurs de recherche, ce sont des robots, il n'ont pas de navigateur comme Chrome ou Safari ? Et bien non, mais c'est justement là qu'intervient le rendu côté serveur.
Single Page Application - Le rendu côté serveur (SSR) pour les moteurs de recherche (SEO)
Le rendu côté serveur consiste à constuire la page web non pas sur l'ordinateur ou le mobile de l'internaute mais sur le serveur au moment où il tente d'accéder à l'URL souhaitée. Cette technique commence à se démocratiser et est connue des développeurs mais était complexe à mettre en place. Aujourd'hui, à chaque librairie JavaScript, on trouve un module SSR mais encore faut-il savoir coder un serveur HTTP (HAPI, Express, etc.). Sinon, pour les plus fénéants, il existe le framework Next JS, utilisant la librairie React JS et qui permet d'exporter le projet en SPA avec SSR ou bien en multipage. Les routes statiques et dynamiques sont très bien gérées.
Si vous avez des questions ou des remarques, n'hésitez pas à utiliser le formulaire de contact prévu à cet effet ;)
Sources
Différences entre une SPA et un site web classique ?
Comment référencer son site One-Page : Mission impossible ?
le référencement SEO site one page
Sites "One Page" et SEO – Vidéo SEO
Et surtout, ma propre expérience :)