Applications Web progressives (PWA) et optimisation des moteurs de recherche (SEO)

Progressive Web App (PWA) est un logiciel d'application fourni via le Web. Il est construit à l'aide de technologies Web standard telles que HTML, CSS, JavaScript, etc. Les PWA sont couramment utilisées pour augmenter le taux de conversion et le trafic du site Web. À partir de 2021, les PWA sont pris en charge (entièrement ou partiellement) par Google Chrome, Apple Safari, Firefox pour Android et Microsoft Edge.

Étant un développement relativement nouveau, l'optimisation PWA conduit toujours à des résultats positifs dans la majorité des cas et a des statistiques étonnantes. PWA Stats rend constamment compte des avantages obtenus par les services qui ont mis en œuvre PWA.

En général, selon le rapport TOP 30 PWAs, "le taux de conversion moyen des applications Web progressives était de 36 % supérieur à celui des applications mobiles natives".

Les PWA sont d'excellentes aides en matière de marketing en ligne. C'est pourquoi ils sont populaires parmi la foule SEO. Cependant, tout comme React et SEO, la combinaison PWA SEO a ses difficultés. Dans cet article, nous allons faire la lumière sur le fonctionnement des PWA avec le SEO.

Exemples et principaux avantages de PWA

Tout service Web peut être un PWA. Il y a trois exigences principales pour cela :

1. Fonctionne sous HTTPS.
2. Inclut un manifeste d'application Web.
3. Implémente un agent de service.

L'objectif principal de PWA est de fournir des fonctionnalités supérieures à chaque utilisateur. Voici la liste des principaux avantages offerts par les PWA :

1. PWA apporte de nouvelles opportunités et de la croissance à pratiquement toutes les entreprises. Il combine le meilleur des qualités des applications et du Web, étant réactif et capable de fonctionner sur n'importe quel appareil, et ne nécessite pas nécessairement un réseau rapide.
2. La sécurité de la couche de transport le rend sécurisé.
3. Service Worker (un script spécial que votre navigateur exécute en arrière-plan) permet aux PWA de fonctionner en mode hors ligne.

Regardons quelques-uns des plus grands exemples d'adoption de PWA :

Recommandé pour vous : Frameworks les plus populaires pour la création d'applications Web progressives (PWA).

1. Starbucks

Le système de commande PWA de Starbucks est simple et convivial. Il ressemble à leur application native, mais a la possibilité de s'exécuter hors ligne lorsqu'un utilisateur parcourt le menu et ajoute des éléments au panier. Le meilleur avantage d'une telle solution est le fait que la PWA est presque deux fois plus petite que l'application standard de Starbucks. Pour cette raison, l'entreprise a considérablement augmenté le nombre d'utilisateurs Web.

2. Pinterest

Après avoir découvert que seulement 1 % des utilisateurs mobiles de Pinterest téléchargent une application et se connectent en raison de ses mauvaises performances, l'application mobile a été reconstruite sur la base de la technologie PWA. Grâce à cela, des indicateurs tels que le temps passé, les revenus publicitaires et les principaux engagements ont augmenté jusqu'à 40 % - 60 %.

3.Uber

L'application Web Uber a été reconstruite en tant que PWA dans le but de fournir un service rapide sur les réseaux à faible vitesse et sur les anciens smartphones qui ne sont pas compatibles avec l'application Uber native. Grâce à cela, une application centrale ultra-légère se charge en 3 secondes environ sur les réseaux 2G.

L'importance du référencement

Le référencement consiste à optimiser votre site Web pour les moteurs de recherche (SE). Son objectif principal est d'améliorer le classement du site Web dans les résultats de recherche et d'engager les visiteurs. Il est basé sur des algorithmes SE et utilise des mots clés pour aider les moteurs de recherche à afficher un contenu pertinent et à attirer un public ciblé sur les sites Web. C'est ainsi que le référencement peut apporter du trafic organique sur votre site Web, ce qui est le meilleur du genre. Contrairement au trafic direct et payant, il est capable de transformer la plupart de vos visiteurs en clients et clients.

SEO pour les Progressive Web Apps : quel est le problème ?

Malgré tous les avantages offerts par PWA, de nombreux propriétaires de sites Web hésitent encore à mettre en œuvre la technologie. Il y a deux raisons principales à cela :

1. La peur de changer le système existant qui fonctionne déjà bien.
2. Mauvaise compréhension du fonctionnement de PWA avec SEO.

Comme l'a déclaré John Mueller (analyste chez Google), "les PWA n'ont actuellement aucun avantage dans la recherche Google".

De nombreuses PWA sont construites à l'aide de frameworks JS qui ne sont pas connus pour leur nature conviviale pour le référencement.

Ainsi, contrairement aux sites Web traditionnels basés sur HTML, les PWA dépendantes de JavaScript sont difficiles pour le référencement. C'est pourquoi ils n'offrent aucun avantage en termes de facilité de recherche. Cependant, contrairement à la croyance populaire, cela ne signifie pas que les applications Web progressives ne peuvent pas être indexées par les moteurs de recherche. Il suffit d'utiliser différentes techniques pour cela.

Rendu côté serveur et rendu côté client

La plupart des sites Web utilisent le rendu côté serveur (SSR). C'est l'approche la plus simple où la page s'affiche côté serveur au lieu d'être rendue dans le navigateur. Cependant, l'intégralité du code HTML se charge chaque fois qu'un utilisateur demande la page, ce qui peut poser problème lorsque la connexion Internet n'est pas stable ou assez rapide.

Les PWA basées sur JavaScript utilisent le rendu côté client (CSR), où le contenu est rendu dans le navigateur du client. Il n'envoie pas une page HTML entière chaque fois qu'un utilisateur demande la page. Le fichier JavaScript affiche uniquement la partie nécessaire des informations de la page dans le navigateur du client. C'est pourquoi la page se charge plus rapidement même avec une mauvaise connexion Internet.

Cependant, pourquoi de nombreux propriétaires de sites Web refusent-ils toujours d'utiliser la RSE ? Le problème est le robot Google. Il peut lire le contenu du site Web dans le code entièrement visible dans le document HTML. La RSE, dans son cas, repose entièrement sur la capacité d'un moteur de recherche à traiter JavaScript. C'est pourquoi il existe une opinion selon laquelle les applications RSE ne peuvent pas être indexées. Cependant, en fait, parmi tous les moteurs de recherche, Google est le meilleur pour traiter JavaScript.

Néanmoins, cela ne signifie toujours pas que le problème avec JavaScript et le SEO est résolu : Google admet que le traitement du JS n'est pas parfait. À savoir, le processus d'exploration d'une page basée sur JavaScript prend plus de temps que celui d'une page HTML. En fait, cela signifie que vous devrez attendre plus de temps pour que le contenu JavaScript apparaisse dans les pages de résultats du moteur de recherche.

Tout cela rend difficile pour les propriétaires de sites Web à la fois d'améliorer l'expérience utilisateur de leurs visiteurs et d'optimiser leur contenu pour les moteurs de recherche.

Comment mettre en œuvre PWA sans perdre votre optimisation pour les moteurs de recherche ?

Vous aimerez peut-être : Magento PWA Studio : L'outil d'application Web progressive pour Magento !

1. Appliquer le rendu dynamique

Le rendu dynamique montre différentes versions de contenu à différentes sources. Le visiteur obtient une version CSR et le crawler obtient une version rendue côté serveur. Cela permet d'améliorer l'indexation des pages basées sur JavaScript par Google bot. De cette façon, vous offrirez l'expérience utilisateur la plus pratique à vos clients sans risquer le référencement du site Web.

2. Combinez RSS et RSE

Assurez-vous que le robot d'exploration verra les parties les plus importantes du contenu (qui doivent absolument être transmises aux moteurs de recherche) en utilisant le rendu côté serveur. Ces informations seront récupérées par le crawler dès qu'il découvrira la page. Les informations restantes seront automatiquement traitées via le rendu côté client au cours de la deuxième étape du processus.

3. Construisez votre PWA en utilisant un framework JavaScript convivial pour le référencement

Notre grande recommandation est GatsbyJS. Il est assez facile de créer un site Web PWA à l'aide de ce cadre (ainsi que de transformer le site Web Gatsby existant en PWA). Il pré-rend votre site Web dans une étape de construction pour une performance brillante et sans décalage, même si la connexion Internet est lente. Grâce à cela, vos visiteurs bénéficient d'une expérience de navigation semblable à celle d'une application.

4. Recourir à des solutions PWA prêtes à l'emploi

Aujourd'hui, les PWA sont plus abordables que jamais. Donc, si vous ne voulez pas perdre beaucoup de temps et de ressources sur le développement de PWA, vous pouvez utiliser des solutions PWA prêtes à l'emploi qui sont conçues selon les principes de référencement et soigneusement testées, afin que vous puissiez être sûr de la qualité. du code.

5. Studio PWA

Le studio PWA a été lancé en 2019 en tant que norme de technologie Web conçue pour offrir une expérience semblable à celle d'une application. En fait, ce n'est pas exactement une solution prête à l'emploi : c'est plutôt une collection d'outils et de fonctionnalités pour le développement de PWA. Cette solution est assez complexe et impressionnante mais nécessite des ajustements supplémentaires.

6. ScandiPWA

ScandiPWA est une solution open-source, basée sur React et Redux. Il est conçu dans le but d'améliorer les sites Web avec rapidité et la possibilité de travailler hors ligne. Il est également constamment mis à jour, de sorte que vous obtiendrez toujours de nouvelles fonctions.

7. Vue vitrine

C'est l'une des premières solutions PWA disponibles sur le marché. En fait, Vue Storefront est une solution universelle tout-en-un, mais nécessite des ressources de maintenance supplémentaires.

Comment éviter les erreurs liées au référencement lors de la mise en œuvre de la PWA ?

Pour développer une PWA bien conçue qui vous aidera à gagner en SEO en offrant une expérience utilisateur améliorée, vous devez :

1. Réaliser un audit SEO. Cela aidera à repérer et à résoudre tous les problèmes liés au référencement.
2. Consultez des spécialistes du référencement. Lorsque vous construisez votre PWA en utilisant React (par exemple), vos spécialistes SEO doivent savoir exactement comment combiner React et SEO. De cette façon, vous éviterez la plupart des problèmes possibles qui peuvent apparaître après la mise en œuvre.
3. Respectez les principes SEO fondamentaux lors du développement de PWA. Dans l'article relatif au Progressive Web Apps SEO, publié par Google, la société donne des conseils sur la façon de créer des PWA indexables. Certains d'entre eux sont en tant que tels:
   • Chaque page doit être disponible via une URL spécifique. Grâce à cela, chaque page sera crawlée indépendamment.
   • Le site Web doit avoir un design réactif et être optimisé pour les appareils mobiles.
   • Utilisez l'amélioration progressive. Grâce à cette stratégie, les PWA fonctionnent bien même sur les anciens navigateurs.
   • Vérifiez régulièrement comment Google affiche votre page à l'aide de Google Search Console. Ainsi, vous saurez toujours quand il est temps de mettre à jour ou de changer quelque chose.
   • Gardez un œil sur le temps de chargement de la page. Google mesure la vitesse de chargement de chaque page, et si la vitesse de chargement de votre page ralentit, Google la réduira en classement.

Vous aimerez peut-être aussi : React Native vs Flutter vs PWA : Battle of Trending Mobile App Frameworks.

L'essentiel

L'optimisation PWA offre de nombreuses opportunités pour le marketing en ligne et apporte de la croissance à la grande majorité des entreprises. En fait, la meilleure pratique de référencement généralement appliquée par PWA est l'interface conviviale : elle est réactive, structurée et s'affiche rapidement. Cependant, les PWA ne donnent toujours pas un avantage direct au SEO, et les problèmes liés au SEO sont ce qui empêche de nombreux marchands de mettre en œuvre les PWA sur leurs sites Web. C'est pourquoi il est important d'être prudent et d'utiliser différentes techniques telles que le rendu dynamique, la combinaison de SSR et CSR, ou des solutions PWA prêtes à l'emploi. Vous devez également impliquer des spécialistes du référencement dans le processus dès le début.

Comme vous pouvez le constater, vous pouvez utiliser à la fois le SEO et le PWA en les combinant avec succès. Il convient également de noter que la PWA est un logiciel jeune et innovant, des améliorations sont donc à prévoir.

 Cet article est écrit par Ivan Jones. Ivan est un spécialiste SEO chez Clockwise.Software avec plus de 5 ans d'expérience dans l'industrie. Il connaît les nuances qui l'ont aidé à maintenir les sites Web au sommet des résultats de recherche Google pendant des années. Étant un apprenant passionné, il souhaite tester de nouvelles approches qui peuvent bénéficier aux résultats du référencement.