Votre prochain site Web devrait-il ĂȘtre une application monopage ?

De nombreuses entreprises et organisations passent de sites Web de plusieurs pages, basés sur HTML, CSS et généralement un systÚme de gestion de contenu comme WordPress, à des applications à page unique (SPA).

Une application Ă  page unique est crĂ©Ă©e Ă  l’aide de HTML et de CSS, mais fonctionne Ă  l’aide de JavaScript, gĂ©nĂ©ralement avec un rendu cĂŽtĂ© client. Une fois la page initiale chargĂ©e Ă  partir du serveur, l’utilisateur peut naviguer rapidement et efficacement vers diffĂ©rentes pages du site Web. Cette rapiditĂ© est possible car, lors des transitions, le SPA utilise des requĂȘtes Ajax qui rĂ©cupĂšrent uniquement les donnĂ©es sous forme de JSON depuis le backend. Il n’est pas nĂ©cessaire de recharger les pages ou de rĂ©cupĂ©rer le code HTML. Les SPA sont rapides car l’utilisateur reste sur la mĂȘme page.

Pourquoi utiliser une application Single Page ?

Les SPA sont incroyablement rapides. Avec les SPA, les dĂ©veloppeurs peuvent crĂ©er des pages Web rapides, fluides et configurables, dynamiques et Ă  liens profonds. La principale diffĂ©rence entre les sites Web de plusieurs pages rĂ©side dans la navigation. Lorsque vous accĂ©dez pour la premiĂšre fois Ă  un site Web conçu en tant que SPA, votre navigateur tĂ©lĂ©charge une petite application JavaScript sur votre navigateur qui s’exĂ©cute en arriĂšre-plan. L’application communique avec le serveur si nĂ©cessaire, sans avoir Ă  recharger de pages. Ainsi, lorsque vous naviguez sur diffĂ©rentes pages du site Web, cela peut ĂȘtre fait instantanĂ©ment car seule une infime fraction de la bande passante typique est utilisĂ©e.

Lors de l’utilisation de SPA, les nouvelles pages sont souvent appelĂ©es “vues”, car techniquement, ce ne sont pas de nouvelles pages – mĂȘme si elles semblent l’ĂȘtre lorsque l’utilisateur navigue sur un site Web. Un SPA utilise gĂ©nĂ©ralement un modĂšle de “shell d’application”, dans lequel les Ă©lĂ©ments constants du site Web, tels que l’en-tĂȘte, le pied de page et les menus, sont statiques et chargĂ©s initialement avec la premiĂšre page sur laquelle l’utilisateur arrive. Les diffĂ©rentes vues sont rendues dans le shell, ce qui signifie que l’en-tĂȘte, le pied de page, les menus et les autres Ă©lĂ©ments cohĂ©rents du site Web n’ont pas du tout besoin d’ĂȘtre rechargĂ©s.

Les applications en ligne telles que Gmail, Facebook et Twitter utilisent des SPA. Plus rĂ©cemment, les sites Web des entreprises ont utilisĂ© des SPA. Par exemple, Moneypenny.com et globe.co sont crĂ©Ă©s Ă  l’aide de SPA.

ProblÚmes potentiels liés au SPA

Un bon moyen de tester votre SPA est d’utiliser le test adaptĂ© aux mobiles de Google. Ce test signalera souvent certains des problĂšmes qui peuvent survenir avec les sites SPA.

Par exemple, si le SPA utilise des fonctionnalitĂ©s non prises en charge, telles que des API de gĂ©olocalisation spĂ©cifiques, des problĂšmes peuvent survenir lors du chargement de la page. Surtout lorsqu’un utilisateur refuse l’accĂšs Ă  sa position.

Un autre problĂšme courant avec les SPA est que l’URL ne change pas lorsqu’un utilisateur navigue dans les pages/vues. Techniquement, une nouvelle page n’est pas chargĂ©e chaque fois qu’un utilisateur clique sur un Ă©lĂ©ment de navigation pour accĂ©der Ă  une nouvelle page, donc par dĂ©faut, l’URL ne changera pas. Cela provoque une expĂ©rience utilisateur dĂ©routante et peut Ă©galement avoir des implications nĂ©gatives pour le rĂ©fĂ©rencement. Comme Googlebot et les autres robots des moteurs de recherche n’indexeront qu’une seule page, si une seule URL est utilisĂ©e.

Pour permettre aux utilisateurs et Ă  Googlebot de voir les vues individuelles comme des pages diffĂ©rentes, un dĂ©veloppeur SPA peut utiliser l’API d’historique et corriger le balisage des liens.

Un autre problĂšme potentiel de rĂ©fĂ©rencement est que le mĂȘme mĂ©ta titre gĂ©nĂ©rique et la mĂȘme mĂ©ta description par dĂ©faut seront affichĂ©s pour chaque page/vue dans les rĂ©sultats du moteur de recherche. Cela peut ĂȘtre surmontĂ© en s’assurant que chaque vue a des titres et des descriptions diffĂ©rents dans le code HTML.

La gestion des erreurs peut Ă©galement ĂȘtre un problĂšme avec les SPA. Par exemple, si une page n’est pas trouvĂ©e, l’application peut afficher un message d’erreur tel que “Not Found” mais au lieu de renvoyer une erreur 404, le serveur renvoie un code d’Ă©tat http 200 – indiquant que tout a Ă©tĂ© consultĂ© et chargĂ© correctement. Avec les SPA, le serveur ne gĂšre plus les erreurs, ce qui peut causer des problĂšmes. Pour voir comment gĂ©rer spĂ©cifiquement ces “soft 404s”, veuillez consulter la documentation de Google sur la façon de rĂ©soudre les problĂšmes JavaScript liĂ©s Ă  la recherche. Un dĂ©veloppeur devra ajouter un code JavaScript spĂ©cifique afin que l’utilisateur soit redirigĂ© vers une URL qui rĂ©ponde par un code d’Ă©tat 404. Le serveur devra Ă©galement ĂȘtre configurĂ© pour que des pages spĂ©cifiques rĂ©pondent avec le code d’Ă©tat http dĂ©signĂ©. par exemple, vous pouvez rediriger toutes les pages/vues d’erreur 404 logicielles vers example.com/not-found/ qui Ă  son tour renvoie un code d’Ă©tat https 404.

Suivi et SPA

L’utilisation de Google Tag Manager et Google Analytics 4 sont gĂ©nĂ©ralement considĂ©rĂ©s comme les meilleurs outils de suivi des Ă©vĂ©nements et des campagnes utilisant les SPA.

Le simple fait d’ajouter un code de suivi peut ne pas fonctionner avec les SPA. Il existe un certain nombre de mĂ©thodes que vous pouvez utiliser pour ajouter un suivi.

Google Analytics 4, sous “Mesure amĂ©liorĂ©e”, a des fonctions de suivi intĂ©grĂ©es pour les sites Web SPA. Activez la fonctionnalitĂ© de mesure amĂ©liorĂ©e, et sous “Pages vues” dans Mesure amĂ©liorĂ©e, assurez-vous que dans les paramĂštres avancĂ©s “Modifications de page en fonction des Ă©vĂ©nements de l’historique du navigateur” est activĂ©. Analytics devrait dĂ©sormais suivre automatiquement une page vue.

Une autre mĂ©thode de suivi consiste Ă  utiliser le dĂ©clencheur de modification de l’historique de Google Tag Manager. Si la mĂ©thode originale dĂ©crite ci-dessus ne fonctionne pas, dĂ©sactivez la mesure amĂ©liorĂ©e. Allez dans Tag Manager, puis “DĂ©clencheurs” – “Nouveau” et ajoutez l’un des dĂ©clencheurs intĂ©grĂ©s “Modification de l’historique”. Allez dans “Variables” et activez toutes les variables d’historique.

Pour plus d’informations sur les SPA et le suivi, veuillez consulter ce didacticiel YouTube.

SEO & SPA

Comme vous pouvez le voir en lisant la section ci-dessus, de nombreux problĂšmes liĂ©s aux SPA en tant que sites Web d’entreprise, liĂ©s au rĂ©fĂ©rencement et Ă  la capacitĂ© de Google Ă  indexer l’application Ă  page unique en tant que site Web Ă  plusieurs pages.

Liste de contrÎle du référencement

  • Testez votre spa Ă  l’aide de l’outil de test adaptĂ© aux mobiles et de donnĂ©es structurĂ©es

  • Testez les URL dans l’outil d’inspection d’URL de Google dans la console de recherche et vĂ©rifiez qu’il s’affiche correctement

  • Assurez-vous qu’il y a un mĂ©ta-titre et une mĂ©ta-description uniques dans le code HTML de chaque vue

  • Assurez-vous que le mĂ©ta-balisage de partage social de graphique ouvert est ajoutĂ© Ă  chaque vue

  • Lorsque le site est en direct, vĂ©rifiez l’indexation dans la Search Console et avec le site : recherche

  • Effectuer un site : rechercher avec une URL spĂ©cifique et un extrait de texte spĂ©cifique pour vĂ©rifier l’indexation

  • Utilisez l’outil d’inspection d’URL dans la console de recherche pour confirmer l’indexation

  • Assurez-vous que les URL sont dĂ©tectables avec le plan du site et le balisage des liens internes

  • Ne pas utiliser onclick pour le balisage/code du lien

  • Utilisez l’API d’historique pour que les utilisateurs puissent naviguer entre les URL

  • Assurez-vous que les URL sont propres et ne contiennent pas de hashtags, d’Ă©lĂ©ments non pertinents tels que les identifiants de session

  • Utiliser des URL canoniques dans le HTML de diffĂ©rentes vues

  • Assurez-vous que les erreurs et les redirections sont gĂ©rĂ©es correctement et qu’aucun soft 404 n’est signalĂ© dans la Search Console

  • La recherche prĂ©fĂšre le texte visible – le chargement basĂ© sur les Ă©vĂ©nements, par exemple le clic, le survol, le dĂ©filement, peut ĂȘtre dĂ©valuĂ©

  • Ne bloquez pas les fichiers JavaScript ou CSS pour Googlebot

  • Assurez-vous que le suivi des URL est en place et fonctionne efficacement afin que les campagnes et les Ă©vĂ©nements puissent ĂȘtre suivis

La liste ci-dessus n’est pas exhaustive, alors assurez-vous de lire davantage. Ce guide SEO et JavaScript est un excellent point de dĂ©part.