PWA (Progressive Web App) et SEO

Comment fonctionne une Progressive Web App ?

Les concepts qui se cachent derrière une Web App

L’idée de base est d’avoir un code unique, qui fonctionnera ainsi sur n’importe quel périphérique mobile (Android, iOS et Windows Phone notamment). Le langage est d’ailleurs relativement simple, car le cœur de vos contenus sera affiché en HTML, CSS et JS, comme n’importe quel site web.

Le deuxième concept d’une Progressive Web App est de la rendre accessible et « installable » par un navigateur web traditionnel : après plusieurs visites de l’internaute, ce dernier va alors proposer à l’utilisateur de l’ajouter à son téléphone, sans pour autant être une application mobile et sans que l’utilisateur ne doive ensuite gérer les mises à jours.

Si l’on simplifie le concept, une progressive Web App est en réalité une coquille vide (appelée l’application Shell) dans laquelle on vient injecter,  afficher et mettre en cache de manière transparente les différents contenus. Une image du site officiel de Google résume bien cette idée de base :

Fig. 1. Le concept de base d’une Progressive Web App : une coquille vide dans laquelle on injecte du contenu HTML.
Source image : https://developers.google.com/web/updates/2015/11/app-shell

D’après les équipes de Google qui ont présenté le concept dès 2015, les avantages d’une Progressive Web App sont nombreux :

• Elles sont progressives : elles affichent le contenu par défaut, fonctionnent pour tous, et possèdent des fonctionnalités qui s’adaptent aux capacités du périphérique utilisé (plus le téléphone ou le navigateur permettent de faire des actions, plus la PWA pourra les utiliser) ;
• Elles sont responsive comme le serait un site web (le code de base étant de l’HTML et du CSS) ;
• Elles dépendent moins fortement de la connexion du périphérique : elles peuvent ainsi fonctionner avec un débit Internet très faible (2G et 3G), voire même hors ligne grâce aux fonctionnalités de mise en cache ;
• Elles sont constamment mises à jour en tâche de fond, sans aucune notification ni intervention de l’utilisateur pour cela ;
• Elles sont sécurisées car consultées via HTTPS ;
• Elles fournissent la même ergonomie qu’une application mobile dédiée ou qu’un site web responsive ;
• Elles peuvent être partagées via une simple URL (les PWA peuvent en effet avoir une URL unique) ;
• Elles peuvent être ajoutées sur l’écran d’accueil de l’utilisateur.

Comment une Progressive Web App fonctionne-t-elle ?

Profiter d’une Progressive Web App est relativement simple pour l’utilisateur. Celui-ci navigue tout d’abord sur le site web traditionnel. Après plusieurs visites, son navigateur va alors détecter la Progressive Web App pour lui proposer de l’ajouter à son écran d’accueil, comme ici sur FlipBoard (les images suivantes proviennent de l’article https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/) :

Fig. 2. FlipBoard propose en bas l’ajout en page d’accueil du téléphone, c’est la Progressive Web App.

Fig. 3. La Progressive Web App s’ajoute ensuite au téléphone lors du clic.

Une fois cette étape réalisée, cela va créer sur le téléphone la PWA et installe en réalité l’App Shell, c’est-à-dire la « coquille » qui va permettre d’afficher et de stocker les contenus.

Fig. 4. On voit s’afficher sur le téléphone la Progressive Web App, qui ressemble fortement à une application mobile traditionnelle.

Fig. 5. La PWA peut alors afficher le contenu, comme le ferait le site traditionnel ou une application dédiée.

Après cette phase commence la seconde étape d’une Progressive Web App. Elle consiste en l’ajout de « Workers », des tâches de fond qui vont constamment mettre à jour et mettre en cache les contenus, ceci de façon transparente pour l’utilisateur qui n’aura rien de spécifique à faire. La PWA va ainsi récupérer les nouveaux contenus et les mises à jour au format JSON, un format très léger à charger comme le montre ce test des équipes de Google :

Fig. 6. Un temps de chargement optimisé pour les Progressive Web App.

Le Worker fonctionnera ainsi toujours en tâche de fond (on l’appelle aussi l’Idle, ou encore « Service Worker »). On peut ainsi avoir tout un site web mis à jour en temps réel sur son téléphone, et ceci avec peu de débit.

Lors de la première installation, voici comme la Progressive Web App et son Worker fonctionnent :

• On l’ajoute au téléphone de l’utilisateur ;
• En cas de réussite, le Worker se lance en tâche de fond et récupère les dernières mises à jour au format JSON ;
• Le contenu est mis en cache dans le « Local Storage » du téléphone (c’est l’App Shell qui affichera ensuite ce contenu au format HTML) ;
• Si le contenu est déjà présent, le Worker continuera de manière transparente ses vérifications et ne mettra à jour le contenu que si nécessaire.

Fig. 7. L’explication d’un Worker
Source Image : https://developers.google.com/web/fundamentals/getting-started/primers/service-workers.

Si vous souhaitez mieux comprendre ce que sont les Progressive Web App, nous vous conseillons d’ailleurs cette excellente conférence de Paris Web 2016 :
https://www.paris-web.fr/2016/conferences/progressive-web-apps-le-futur-du-web-arrive.php

Les principaux défauts

Attention cependant :actuellement les Progressive Web App ne sont pas compatibles avec certains navigateurs comme Safari et Internet Explorer (bien sûr...). C’est d’ailleurs le principal point noir à leur mise en place.

Autre point noir de taille : il faudra un site traditionnel pour pouvoir proposer la mise en place de la Progressive Web App. Elles ne vont donc (pour le moment) pas remplacer les sites web optimisés pour les mobiles.

Pourquoi les moteurs de recherche s’y intéressent-ils ?

Google développe cette technologie et voudrait lui donner plus de poids pour plusieurs raisons. La première est que l’augmentation du trafic mobile au niveau mondial le pousse à vouloir afficher des contenus rapides à charger et responsives. Google gagnant de l’argent grâce à la publicité, il doit proposer des contenus pertinents mais surtout adaptés à ses utilisateurs.

La seconde raison est que, malgré le choix important donné à l’utilisateur, peu d’entre eux installent des applications sur leur téléphone. Et sur ceux qui en installent, la plupart d’entre elles ne sont pas ou peu utilisées.

Les utilisateurs mobiles passent beaucoup plus de temps sur les applications que sur les sites web. Mais en règle générale, ils n’installent en moyenne que 8 à 9 application pas mois, dont 25% ne sont jamais utilisées et 26% abandonnées dès la première utilisation. Sur Android, chaque application perd 90% de ses utilisateurs quotidiens après 30 jours (77% au bout de seulement 3 jours). En d’autres termes, peu d’applications actuelles peuvent prétendre remplacer le site web correspondant.
Source : https://blogs.adobe.com/digitaleurope/fr/mobile-marketing-fr/10-chiffres-retenir-sur-lutilisation-des-applications-mobiles/

La troisième raison est que les sites traditionnels sont souvent lents à charger, et ne permettent pas une aussi bonne interactivité qu’une application mobile. Les Progressive Web App permettent en effet de faire des notifications comme une application mobile, comme dans l'exemple de la figure 8.

Fig. 8. Un exemple de notifications Push avec une Progressive Web App
Source image : http://blog.octo.com/compte-rendu-progressive-web-apps-conference-google/.

L’impact des Progressive Web App

Google va donc tout faire pour faire basculer les utilisateurs et développeurs sur cette technologie. Et les chiffres et exemples donnés par Google donnent envie :

Aliexpress :

• + 82% de taux de conversion sur IOS ;
• Le nombre de pages vues a été multiplié par 2 ;
• + 74% de temps passé sur le site.

5miles :

• Diminution du taux de rebond de 50% ;
• Augmentation du temps passé sur le site de 30% ;
• + 30% de conversion lorsqu'un internaute arrive sur la page d’accueil depuis une publicité ;
• 15 % des notifications sont ouvertes.

D’ailleurs, Google va continuer une intégration de plus en plus poussée des PWA. Par exemple sur Android, avec les dernières versions de Chrome (version 57 béta), l’ajout de la Progressive Web App va non seulement l’ajouter à l’écran d’accueil mais aussi dans le menu de paramétrage d’Android, rendant ainsi son utilisation quasi identique à celle d’une application mobile traditionnelle.
Source : https://www.nextinpact.com/news/103152-chrome-57-beta-veut-propulser-progressive-web-apps-au-premier-plan-sur-android.htm

Quel rapport avec le SEO ?

Si le comportement d’un point de vue utilisateur ressemble à une application mobile (les contraintes en moins), elles ont un intérêt réel pour le référencement naturel, et ceci pour une simple et bonne raison : elles ont leur propre URL.

On peut donc faire indexer toutes les pages de sa Progressive Web App comme on le ferait avec un site traditionnel. On retrouvera alors les mêmes contraintes, optimisations, techniques et bonnes pratiques qu’un site traditionnel (pertinence du contenu, sémantique, balisage Schema.org, popularité, Etc.). Nous en reparlerons un peu plus loin dans cet article.

Comme créer une Progressive Web App ?

Il existe plusieurs guides et tutoriels pour mettre en place et créer sa propre Progressive Web App. On notera notamment ces ressources dédiées :

• https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/
• https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
• https://developers.google.com/web/progressive-web-apps/

Google a d’ailleurs publié une checklist des points à contrôler sur sa Progressive Web App (https://developers.google.com/web/progressive-web-apps/checklist), dont voici un résumé :

• La PWA doit être en HTTPS ;
• Elle doit être Responsive ;
• Un Worker doit être mis en place pour mettre en cache les données pour une utilisation hors ligne ;
• Un « manifeste » de la PWA doit être créé : il s’agit d’un fichier appelé manifest.json qui permet au navigateur de détecter la Web App sur un site traditionnel ;
• Chaque contenu doit avoir une URL unique (et une balise Canonical si le contenu existe sur le site traditionnel) ;
• On peut y ajouter un balisage Schema.org et/ou Open Graph ;
• Le contenu doit fonctionner sans JS ;
• Si les contenus sont affichés sur une URL unique et avec des chargements en Ajax, le développeur doit utiliser l’API History en JS pour gérer la navigation de l’utilisateur (page suivante, précédente…).

Des exemples de Progressive Web App

Si cela vous intéresse, il existe un site dédié qui liste les sites ayant mis en place une Progressive Web App. Après plusieurs navigations sur ces sites, vous devriez ainsi voir apparaître la possibilité de les ajouter à votre périphérique mobile : https://pwa.rocks/

Fig. 9. PWA Rocks liste une série de sites et de services proposant des Progressives Web Apps.

Comment tirer profit des Progressives Web App pour son SEO ?

Puisque les contenus d’une Progressive Web App sont indexables, il faut les considérer comme des contenus à part entière de votre site. Vous allez donc devoir y appliquer les mêmes préconisations que pour n’importe lequel de vos contenus.

Les URL

La première chose à prendre en compte est la façon dont vous allez réaliser la réécriture d’URL. Prenons l’exemple du WashingtonPost qui possédait des contenus PWA avec des URL du type :
https://www.washingtonpost.com/pwa/#https://www.washingtonpost.com/politics/next-for-democrats-a-delicate-dance-to-broker-peace-between-clinton-and-sanders/2016/06/08/34000b6c-2cbd-11e6-9b37-42985f6a265c_story.html

La problématique est que l’URL de la PWA contient un #, empêchant ainsi l’indexation de toutes les URL car elles seront considérées comme identiques par le moteur de recherche. Avec un paramètre /pwa?url cela aurait fonctionné, et même encore mieux avec des URL normales du type /pwa/url/.

Voici d’ailleurs ce qui dit John Mueller de Google sur le sujet : If they replaced the existing site with that, it would probably break their crawling & indexing. Some PWAs implement URLs more “traditionally,” which could work with our crawling & indexing.
A part of why I made this post was to encourage PWA-makers to use “traditional” URL structures, so that they don’t need to do too much more for SEO should they decide to move their existing site over at some point. There are ways to both have a PWA & keep the SEO side working, it’s not always easy, but a good opportunity for smart technical SEOs who like to stay ahead of the curve & work with hot modern technologies.

En résumé, il indique que si les URL PWA sont mal implémentées, cela peut bloquer le crawl et l’indexation. Il est ainsi conseillé de créer des URL dédiées et proprement réécrites. Source : https://www.keylimetoolbox.com/news/technical-seo-progressive-web-apps-pwa-javascript-ajax/

Une conception mobile

Le second point à contrôler est de bien vérifier que les contenus PWA sont responsives, et surtout qu’ils soient conçus « Mobile First », c’est-à-dire conçu avant tout pour les mobiles (et non pas un site traditionnel qui s’adapte sur mobile). Vous allez donc avoir à suivre les mêmes règles que sur un site traditionnel :

• Compresser les fichiers ;
• Réduire le poids des images ;
• Ne pas bloquer l’accès de GoogleBot aux ressources de la page ;
• Avoir un design responsive.

Le problème du JS

Le troisième point posant problème en SEO est le service Worker : c’est lui qui alimente et met en cache les données, mais il fonctionne en JS. Google ne parvient pas toujours à bien interpréter le JS. Il faut donc que le Worker vienne améliorer l’expérience utilisateur (pour mettre à jour les nouveaux contenus) sans pour autant être indispensable pour naviguer sur les contenus de la Progressive Web App.

La balise canonical

4ème point à contrôler :l’éventuelle mise en place de la balise Canonical. On trouve alors deux cas de figure :

• Si les contenus sont uniques sur la Progressive Web App, elle n’est pas nécessaire ;
• Par contre, s’il s’agit des mêmes contenus que le site traditionnel (mais qu’elles ont des URL différentes), il est important de les mettre en place pour éviter toute duplication de contenu.

Les entêtes HTTP

Dernière chose à mettre éventuellement en place : l'en-tête HTTP "Vary" dans les headers de vos pages. En envoyant cet entête modifié, vous indiquez que le contenu de la page change en fonction de l’user-agent.

Vous pourriez ainsi avoir une URL unique pour afficher le contenu traditionnel du site, mais également les contenus de la Progressive Web App, réduisant quasiment à zéro le risque de duplication de contenus.
Source : https://developers.google.com/webmasters/mobile-sites/mobile-seo/dynamic-serving#tldr

Conclusion

Vous l’aurez sans doute compris : les Progressives Web Apps viennent compléter un site existant pour les utilisateurs mobiles, permettant ainsi une navigation plus fluide, plus rapide et en permettant à l’entreprise de mieux fidéliser (notifications push, etc.).

Cette technologie ne fait que démarrer, et les freins sont encore nombreux pour une réelle implantation sur tous les supports mobiles (non compatible avec certains navigateurs, complexité technique lors de la mise en place, une technologie encore récente et en évolution, etc.).

Cependant, le pouvoir d’une Progressive Web App en termes de marketing et d’expérience utilisateur est réel. Il faut donc commencer à s’y intéresser dès maintenant, mais il faut surtout y appliquer les mêmes préconisations en référencement naturel que pour nos contenus traditionnels, sous peine de provoquer différentes problématiques SEO sur la duplication de contenus, sur l’indexation, Etc.