Depuis que Google a popularisé le concept en 2015, les Progressive Web Apps séduisent de plus en plus d’acteurs et nos clients nous demandent maintenant régulièrement de les accompagner sur le sujet.\nL’un des arguments qui achève de convaincre les propriétaires de sites de créer des PWA à la place d’applications mobiles (ou en plus des applications mobiles), c’est le fait que les contenus (et les services) affichés au sein des pages des Progressive Web Apps sont nativement référençables, et donc trouvables par une requête effectuée sur un moteur de recherche.\nEt comme les requêtes effectuées dans Google sont beaucoup, beaucoup plus nombreuses que celles effectuées dans les App Stores, cela donne immédiatement une visibilité beaucoup plus importante à l’application. Adieu donc l’App indexing, aux résultats décevants, et vive les web apps !\nOui, sauf que lorsqu’on demande à des développeurs d’app de faire des Progressive Web Apps, ils oublient le plus souvent les fondamentaux. Le résultat c’est que les contenus d’une PWA ne sont souvent pas crawlables, pas ou mal indexés !\nBref, c’est pire que pour une app, pour lequel on a au moins l’app indexing pour référencer les contenus !\nAlors, comment faut-il concevoir les PWA pour qu’elles soient vraiment crawlables et indexables ?
"},{"id":"text-2","type":"text","heading":"","plain_text":"Envie de gagner du temps ?\n\t\t \n Faites résumer cet article par l’IA en quelques secondes.\n \n \n \n Résumer avec l’IA\n \n \n \n Mais c’est quoi au juste les PWA\nLes Progressive Web Apps sont un concept popularisé par Google à partir de 2015, reposant sur l’utilisation des possibilités du HTML5 et des versions récentes des navigateurs pour coder des pages web qui se comportent comme des applications :\n– elles peuvent être installées comme une app (ou presque)\n– elles peuvent fonctionner hors ligne en stockant des infos\n– elles peuvent accéder (de manière plus ou moins étendue) aux capteurs et aux ressources des smartphones\n– etc.\nUne PWA permet aussi des notifications en mode push, comme une app.\nAu départ, seul Chrome sur Android permettait de créer des Progressive Web Apps couvrant tout le spectre des fonctions possibles. Dans d’autres environnements, les PWA fonctionnaient en mode dégradé (voire très dégradé sur Safari/iOS). Avec le temps, la plupart des navigateurs et des OS se sont mis à supporter les fonctionnalités indispensables pour les PWA : par exemple les « services workers » nécessaire pour le fonctionnement hors ligne seront intégrés dans une version de Safari disponible dans les semaines qui viennent.\nUn point sur le support des fonctionnalités de PWA par les navigateurs : ceux sur fond vert foncé ont des notes de compatibilité supérieures à 80%\nPourquoi les PWA sont elles en principe SEO Friendly ?\nLes applications natives et leurs contenus sont par nature hors de portée des bots de moteurs de recherche. Il faut donc avoir recours à l’App Indexing pour donner accès aux bots à leurs contenus, et les référencer. Avec les PWA, les contenus et les services sont générés via du code HTML/Javascript/CSS tournant sur un navigateur. Les bots (qui aspirent les contenus via un navigateur intégré) ont donc nativement accès aux contenus d’une web app, pourvu qu’ils aient pu en découvrir l’url. Bref, les contenus d’une PWA se référencent exactement comme les pages d’un site web. Mais à condition que la PWA soit réellement conçue comme un site web, et c’est là souvent que le bât blesse…\nPetit florilège des cuistreries constatées sur des PWA soit-disant créées pour être référençables\nBon pour commencer, il faut concevoir une PWA vraiment comme un site web, avec plusieurs pages, une page par contenu, et des urls pour chaque page !\nAlors que le réflexe d’un développeur qui n’a développé que des apps, c’est de créer une SPA (Single Page Application), qui ne comportera qu’une seule page !\nCréer une vraie arborescence de sites web ne suffit pas, il faut aussi que les urls soient crawlables et indexables : donc pas de syntaxes AJAX avec des paramètres derrière des # (« https://www.domaine.com/#ref_contenu). Là encore, un bot ne verra qu’une seule URL (https://www.domaine.com/). Et évidemment ne pas bloquer le crawl des pages (ou de ressources clé) avec un robots.txt, ce que j’ai déjà vu trois fois !\nEvidemment, par commodité, votre développeur/intégrateur va utiliser massivement des frameworks javascript pour coder votre PWA. Mais si tout est généré côté navigateur, et non côté serveur, votre contenu risque de ne pas être pris en compte par un bot. Bref, si ce n’est pas développé en SSR (Server Site Rendering), c’est le flop garanti ! L’Hybrid Rendering est ok en théorie, sauf qu’il faut que le contenu généré côté serveur soit suffisant pour le référencement. Le site de demo d’une PWA indexable en rendition hybride : https://hybrid-dot-indexable-pwa.appspot.com/\nL’autre conséquence de l’emploi massif et pas toujours maîtrisé des librairies javascript, c’est l’impact sur les performances. Le risque est grand d’avoir des PWA qui soient lentes, tellement lentes que leurs chances d’être correctement crawlées et indexées soient amputées. Donc il est important de faire attention à ce critère.\nD’ailleurs, la lenteur d’une PWA est tout sauf une fatalité : quand on combine par exemple code AMP et PWA, on a une web app qui se charge à la vitesse de l’éclair, donc la performance c’est vraiment une question de conception et de qualité de code.\nEnfin (cela parait pourtant évident, mais c’est quand même souvent oublié), dans les pages d’une PWA, il faut penser à ajouter toutes les métadonnées que vous ajouteriez normalement sur une page web : une balise title optimisée, les meta et directives SEO habituelles (hreflang, canonical, robots, next/prev, alternate…) et le balisage schema.org.\nL’ajout de balises canonical est souvent obligatoires, car il est possible que les contenus affichés via la PWA existent aussi sur le site web avec d’autres urls.\nIl y’a d’autres détails auxquels il faut faire attention, vous avez une liste quasi exhaustive ci après.\nCheck list complète pour une PWA \nhttps://developers.google.com/web/progressive-web-apps/checklist\nL’extension de Chrome Lighthouse permet aussi de vérifier le bon fonctionnement d’une PWA sur de nombreux critères\nConcevez vos web apps comme des sites webs, pas comme des apps\nConclusion : pour bénéficier des avantages d’une PWA pour le référencement, il faut les concevoir comme un site web, pas comme une application.\nC’est à se demander s’il ne faut pas préférer confier à des intégrateurs HTML/Js/Css habitués à faire des sites web, le soin de développer des PWA plutôt que de les confier à des développeurs d’application qui vont forcément, par manque de réflexes, passer à côté d’un élément crucial pour un site web et planter votre projet.\nEn tout cas, ne considérez pas qu’une PWA, c’est forcément « SEO Friendly ». Vous risquez de sérieuses déconvenues.\nAlors faites vous accompagner, Search Foresight est là pour ça !\nEt vous verrez, une PWA bien conçue, c’est génial. C’est même le sens de l’histoire.\nPour en savoir plus :\nUn billet du blog de Google pour les webmasters rappelant les règles pour rendre une PWA indexable\nhttps://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html\nLes pages très complètes sur les PWA du site « développeurs » de Google :\nhttps://developers.google.com/web/progressive-web-apps/","html":"Envie de gagner du temps ?\n\t\t \n Faites résumer cet article par l’IA en quelques secondes.\n \n \n \n Résumer avec l’IA\n \n \n \n Mais c’est quoi au juste les PWA\nLes Progressive Web Apps sont un concept popularisé par Google à partir de 2015, reposant sur l’utilisation des possibilités du HTML5 et des versions récentes des navigateurs pour coder des pages web qui se comportent comme des applications :\n– elles peuvent être installées comme une app (ou presque)\n– elles peuvent fonctionner hors ligne en stockant des infos\n– elles peuvent accéder (de manière plus ou moins étendue) aux capteurs et aux ressources des smartphones\n– etc.\nUne PWA permet aussi des notifications en mode push, comme une app.\nAu départ, seul Chrome sur Android permettait de créer des Progressive Web Apps couvrant tout le spectre des fonctions possibles. Dans d’autres environnements, les PWA fonctionnaient en mode dégradé (voire très dégradé sur Safari/iOS). Avec le temps, la plupart des navigateurs et des OS se sont mis à supporter les fonctionnalités indispensables pour les PWA : par exemple les « services workers » nécessaire pour le fonctionnement hors ligne seront intégrés dans une version de Safari disponible dans les semaines qui viennent.\nUn point sur le support des fonctionnalités de PWA par les navigateurs : ceux sur fond vert foncé ont des notes de compatibilité supérieures à 80%\nPourquoi les PWA sont elles en principe SEO Friendly ?\nLes applications natives et leurs contenus sont par nature hors de portée des bots de moteurs de recherche. Il faut donc avoir recours à l’App Indexing pour donner accès aux bots à leurs contenus, et les référencer. Avec les PWA, les contenus et les services sont générés via du code HTML/Javascript/CSS tournant sur un navigateur. Les bots (qui aspirent les contenus via un navigateur intégré) ont donc nativement accès aux contenus d’une web app, pourvu qu’ils aient pu en découvrir l’url. Bref, les contenus d’une PWA se référencent exactement comme les pages d’un site web. Mais à condition que la PWA soit réellement conçue comme un site web, et c’est là souvent que le bât blesse…\nPetit florilège des cuistreries constatées sur des PWA soit-disant créées pour être référençables\nBon pour commencer, il faut concevoir une PWA vraiment comme un site web, avec plusieurs pages, une page par contenu, et des urls pour chaque page !\nAlors que le réflexe d’un développeur qui n’a développé que des apps, c’est de créer une SPA (Single Page Application), qui ne comportera qu’une seule page !\nCréer une vraie arborescence de sites web ne suffit pas, il faut aussi que les urls soient crawlables et indexables : donc pas de syntaxes AJAX avec des paramètres derrière des # (« https://www.domaine.com/#ref_contenu). Là encore, un bot ne verra qu’une seule URL (https://www.domaine.com/). Et évidemment ne pas bloquer le crawl des pages (ou de ressources clé) avec un robots.txt, ce que j’ai déjà vu trois fois !\nEvidemment, par commodité, votre développeur/intégrateur va utiliser massivement des frameworks javascript pour coder votre PWA. Mais si tout est généré côté navigateur, et non côté serveur, votre contenu risque de ne pas être pris en compte par un bot. Bref, si ce n’est pas développé en SSR (Server Site Rendering), c’est le flop garanti ! L’Hybrid Rendering est ok en théorie, sauf qu’il faut que le contenu généré côté serveur soit suffisant pour le référencement. Le site de demo d’une PWA indexable en rendition hybride : https://hybrid-dot-indexable-pwa.appspot.com/\nL’autre conséquence de l’emploi massif et pas toujours maîtrisé des librairies javascript, c’est l’impact sur les performances. Le risque est grand d’avoir des PWA qui soient lentes, tellement lentes que leurs chances d’être correctement crawlées et indexées soient amputées. Donc il est important de faire attention à ce critère.\nD’ailleurs, la lenteur d’une PWA est tout sauf une fatalité : quand on combine par exemple code AMP et PWA, on a une web app qui se charge à la vitesse de l’éclair, donc la performance c’est vraiment une question de conception et de qualité de code.\nEnfin (cela parait pourtant évident, mais c’est quand même souvent oublié), dans les pages d’une PWA, il faut penser à ajouter toutes les métadonnées que vous ajouteriez normalement sur une page web : une balise title optimisée, les meta et directives SEO habituelles (hreflang, canonical, robots, next/prev, alternate…) et le balisage schema.org.\nL’ajout de balises canonical est souvent obligatoires, car il est possible que les contenus affichés via la PWA existent aussi sur le site web avec d’autres urls.\nIl y’a d’autres détails auxquels il faut faire attention, vous avez une liste quasi exhaustive ci après.\nCheck list complète pour une PWA \nhttps://developers.google.com/web/progressive-web-apps/checklist\nL’extension de Chrome Lighthouse permet aussi de vérifier le bon fonctionnement d’une PWA sur de nombreux critères\nConcevez vos web apps comme des sites webs, pas comme des apps\nConclusion : pour bénéficier des avantages d’une PWA pour le référencement, il faut les concevoir comme un site web, pas comme une application.\nC’est à se demander s’il ne faut pas préférer confier à des intégrateurs HTML/Js/Css habitués à faire des sites web, le soin de développer des PWA plutôt que de les confier à des développeurs d’application qui vont forcément, par manque de réflexes, passer à côté d’un élément crucial pour un site web et planter votre projet.\nEn tout cas, ne considérez pas qu’une PWA, c’est forcément « SEO Friendly ». Vous risquez de sérieuses déconvenues.\nAlors faites vous accompagner, Search Foresight est là pour ça !\nEt vous verrez, une PWA bien conçue, c’est génial. C’est même le sens de l’histoire.\nPour en savoir plus :\nUn billet du blog de Google pour les webmasters rappelant les règles pour rendre une PWA indexable\nhttps://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html\nLes pages très complètes sur les PWA du site « développeurs » de Google :\nhttps://developers.google.com/web/progressive-web-apps/
"},{"id":"text-3","type":"text","heading":"","plain_text":"ChatGPTPerplexityGoogle AIWhatsAppLinkedInX (Twitter)","html":"ChatGPTPerplexityGoogle AIWhatsAppLinkedInX (Twitter)
"}],"sections":[{"id":"text-1","heading":"Text","content":"Depuis que Google a popularisé le concept en 2015, les Progressive Web Apps séduisent de plus en plus d’acteurs et nos clients nous demandent maintenant régulièrement de les accompagner sur le sujet.\nL’un des arguments qui achève de convaincre les propriétaires de sites de créer des PWA à la place d’applications mobiles (ou en plus des applications mobiles), c’est le fait que les contenus (et les services) affichés au sein des pages des Progressive Web Apps sont nativement référençables, et donc trouvables par une requête effectuée sur un moteur de recherche.\nEt comme les requêtes effectuées dans Google sont beaucoup, beaucoup plus nombreuses que celles effectuées dans les App Stores, cela donne immédiatement une visibilité beaucoup plus importante à l’application. Adieu donc l’App indexing, aux résultats décevants, et vive les web apps !\nOui, sauf que lorsqu’on demande à des développeurs d’app de faire des Progressive Web Apps, ils oublient le plus souvent les fondamentaux. Le résultat c’est que les contenus d’une PWA ne sont souvent pas crawlables, pas ou mal indexés !\nBref, c’est pire que pour une app, pour lequel on a au moins l’app indexing pour référencer les contenus !\nAlors, comment faut-il concevoir les PWA pour qu’elles soient vraiment crawlables et indexables ?"},{"id":"text-2","heading":"Text","content":"Envie de gagner du temps ?\n\t\t \n Faites résumer cet article par l’IA en quelques secondes.\n \n \n \n Résumer avec l’IA\n \n \n \n Mais c’est quoi au juste les PWA\nLes Progressive Web Apps sont un concept popularisé par Google à partir de 2015, reposant sur l’utilisation des possibilités du HTML5 et des versions récentes des navigateurs pour coder des pages web qui se comportent comme des applications :\n– elles peuvent être installées comme une app (ou presque)\n– elles peuvent fonctionner hors ligne en stockant des infos\n– elles peuvent accéder (de manière plus ou moins étendue) aux capteurs et aux ressources des smartphones\n– etc.\nUne PWA permet aussi des notifications en mode push, comme une app.\nAu départ, seul Chrome sur Android permettait de créer des Progressive Web Apps couvrant tout le spectre des fonctions possibles. Dans d’autres environnements, les PWA fonctionnaient en mode dégradé (voire très dégradé sur Safari/iOS). Avec le temps, la plupart des navigateurs et des OS se sont mis à supporter les fonctionnalités indispensables pour les PWA : par exemple les « services workers » nécessaire pour le fonctionnement hors ligne seront intégrés dans une version de Safari disponible dans les semaines qui viennent.\nUn point sur le support des fonctionnalités de PWA par les navigateurs : ceux sur fond vert foncé ont des notes de compatibilité supérieures à 80%\nPourquoi les PWA sont elles en principe SEO Friendly ?\nLes applications natives et leurs contenus sont par nature hors de portée des bots de moteurs de recherche. Il faut donc avoir recours à l’App Indexing pour donner accès aux bots à leurs contenus, et les référencer. Avec les PWA, les contenus et les services sont générés via du code HTML/Javascript/CSS tournant sur un navigateur. Les bots (qui aspirent les contenus via un navigateur intégré) ont donc nativement accès aux contenus d’une web app, pourvu qu’ils aient pu en découvrir l’url. Bref, les contenus d’une PWA se référencent exactement comme les pages d’un site web. Mais à condition que la PWA soit réellement conçue comme un site web, et c’est là souvent que le bât blesse…\nPetit florilège des cuistreries constatées sur des PWA soit-disant créées pour être référençables\nBon pour commencer, il faut concevoir une PWA vraiment comme un site web, avec plusieurs pages, une page par contenu, et des urls pour chaque page !\nAlors que le réflexe d’un développeur qui n’a développé que des apps, c’est de créer une SPA (Single Page Application), qui ne comportera qu’une seule page !\nCréer une vraie arborescence de sites web ne suffit pas, il faut aussi que les urls soient crawlables et indexables : donc pas de syntaxes AJAX avec des paramètres derrière des # (« https://www.domaine.com/#ref_contenu). Là encore, un bot ne verra qu’une seule URL (https://www.domaine.com/). Et évidemment ne pas bloquer le crawl des pages (ou de ressources clé) avec un robots.txt, ce que j’ai déjà vu trois fois !\nEvidemment, par commodité, votre développeur/intégrateur va utiliser massivement des frameworks javascript pour coder votre PWA. Mais si tout est généré côté navigateur, et non côté serveur, votre contenu risque de ne pas être pris en compte par un bot. Bref, si ce n’est pas développé en SSR (Server Site Rendering), c’est le flop garanti ! L’Hybrid Rendering est ok en théorie, sauf qu’il faut que le contenu généré côté serveur soit suffisant pour le référencement. Le site de demo d’une PWA indexable en rendition hybride : https://hybrid-dot-indexable-pwa.appspot.com/\nL’autre conséquence de l’emploi massif et pas toujours maîtrisé des librairies javascript, c’est l’impact sur les performances. Le risque est grand d’avoir des PWA qui soient lentes, tellement lentes que leurs chances d’être correctement crawlées et indexées soient amputées. Donc il est important de faire attention à ce critère.\nD’ailleurs, la lenteur d’une PWA est tout sauf une fatalité : quand on combine par exemple code AMP et PWA, on a une web app qui se charge à la vitesse de l’éclair, donc la performance c’est vraiment une question de conception et de qualité de code.\nEnfin (cela parait pourtant évident, mais c’est quand même souvent oublié), dans les pages d’une PWA, il faut penser à ajouter toutes les métadonnées que vous ajouteriez normalement sur une page web : une balise title optimisée, les meta et directives SEO habituelles (hreflang, canonical, robots, next/prev, alternate…) et le balisage schema.org.\nL’ajout de balises canonical est souvent obligatoires, car il est possible que les contenus affichés via la PWA existent aussi sur le site web avec d’autres urls.\nIl y’a d’autres détails auxquels il faut faire attention, vous avez une liste quasi exhaustive ci après.\nCheck list complète pour une PWA \nhttps://developers.google.com/web/progressive-web-apps/checklist\nL’extension de Chrome Lighthouse permet aussi de vérifier le bon fonctionnement d’une PWA sur de nombreux critères\nConcevez vos web apps comme des sites webs, pas comme des apps\nConclusion : pour bénéficier des avantages d’une PWA pour le référencement, il faut les concevoir comme un site web, pas comme une application.\nC’est à se demander s’il ne faut pas préférer confier à des intégrateurs HTML/Js/Css habitués à faire des sites web, le soin de développer des PWA plutôt que de les confier à des développeurs d’application qui vont forcément, par manque de réflexes, passer à côté d’un élément crucial pour un site web et planter votre projet.\nEn tout cas, ne considérez pas qu’une PWA, c’est forcément « SEO Friendly ». Vous risquez de sérieuses déconvenues.\nAlors faites vous accompagner, Search Foresight est là pour ça !\nEt vous verrez, une PWA bien conçue, c’est génial. C’est même le sens de l’histoire.\nPour en savoir plus :\nUn billet du blog de Google pour les webmasters rappelant les règles pour rendre une PWA indexable\nhttps://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html\nLes pages très complètes sur les PWA du site « développeurs » de Google :\nhttps://developers.google.com/web/progressive-web-apps/"},{"id":"text-3","heading":"Text","content":"ChatGPTPerplexityGoogle AIWhatsAppLinkedInX (Twitter)"}],"media":{"primary_image":""},"relations":[{"rel":"canonical","href":"https://peakace.fr/blog/seo/pwa-plus-seo-friendly-apps/"},{"rel":"alternate","href":"https://peakace.fr/blog/seo/pwa-plus-seo-friendly-apps/llm","type":"text/html"},{"rel":"alternate","href":"https://peakace.fr/blog/seo/pwa-plus-seo-friendly-apps/llm.json","type":"application/json"},{"rel":"llm-manifest","href":"https://peakace.fr/llm-endpoints-manifest.json","type":"application/json"}],"http_headers":{"X-LLM-Friendly":"1","X-LLM-Schema":"1.1.0","Content-Security-Policy":"default-src 'none'; img-src * data:; style-src 'unsafe-inline'"},"license":"CC BY-ND 4.0","attribution_required":true,"allow_cors":false}