Au début d’Internet, les sites Web des magasins étaient essentiellement des brochures numériques avec une navigation de base. L’avènement du Web 2.0 a transformé le Web de pages statiques en contenu piloté par l’utilisateur et en services interactifs. Soudainement, vous disposiez de nouvelles fonctionnalités telles que la conception de sites mobiles réactifs et les capacités de commerce électronique.
Aujourd’hui, vous pouvez créer des sites Web avec une flexibilité et une personnalisation inégalées grâce à des applications Web progressives (PWA). Construits avec JavaScript, ces sites offrent des fonctionnalités similaires à celles d’une application sans nécessiter de téléchargement d’application native.
Si vous avez déjà consulté un site Web contenant beaucoup d’inventaire, comme Saint-Franck ou Point Taylor– vous avez interagi avec une PWA. Idéales pour les sites dotés de catalogues complets ou de fonctionnalités sur mesure, les PWA permettent aux développeurs de personnaliser et de précharger l’expérience de navigation. De plus, ils présentent de nombreux avantages en matière d’optimisation des moteurs de recherche (SEO) ; Le rendu JavaScript amélioré de Google facilite l’indexation des PWA, éliminant ainsi le besoin d’optimisations spéciales.
Voici plus d’informations sur les PWA, comment elles peuvent améliorer vos efforts de référencement et comment mettre en œuvre des conseils d’optimisation PWA pour obtenir les meilleurs résultats organiques.
Qu’est-ce qu’une application Web progressive (PWA) ?
Les applications Web progressives (PWA) sont des sites Web qui utilisent des frameworks HTML, CSS et JavaScript modernes pour offrir une expérience semblable à celle d’une application avec une navigation et des animations fluides. Bien que vous accédiez aux PWA via des navigateurs Web comme les sites Web traditionnels, elles sont codées pour se comporter comme des applications, ce qui les rend rapides, dynamiques et capables de fonctionner avec des connexions Internet de mauvaise qualité en mettant les données en cache.
Lorsque vous visitez un site PWA, l’intégralité de la base de code se charge, contrairement aux sites Web traditionnels qui rechargent le code à chaque nouvelle page Web. Cela rend la navigation entre les pages PWA sensiblement plus rapide.
Les PWA sont particulièrement utiles pour les sites hautement personnalisables. Par exemple, une plateforme de commerce électronique comme Moe’s Home affiche les niveaux de stock en temps réel en connectant le site à son système d’entrepôt.
Comment fonctionnent les PWA ?
Les PWA adoptent une approche de type application pour le développement Web en chargeant un seul fichier JavaScript. Comme Instagram, le site se charge d’abord entièrement, puis met à jour dynamiquement le contenu en fonction de l’interaction de l’utilisateur.
Les sites Web traditionnels, quant à eux, s’appuient sur un rendu côté serveur, où le serveur principal traite toutes les données du site et les envoie au navigateur de l’utilisateur. Les PWA utilisent le rendu côté client, où le navigateur traite le code JavaScript pour charger uniquement les éléments de page nécessaires plutôt que l’intégralité du document HTML à partir du serveur.
Avantages de l’utilisation des PWA
Meilleur engagement des utilisateurs
Convivialité mobile
Capacités de notification push
Il est crucial de garantir que votre site offre une excellente expérience utilisateur. La mise en œuvre d’une PWA peut améliorer les performances, l’accessibilité et l’engagement. Voici trois avantages PWA :
1. Mieux utiliser l’engagement
Les PWA créent une expérience rapide, permettant aux clients de passer facilement d’une page à l’autre, car chaque page n’a pas besoin d’être rechargée. Ils offrent également des niveaux élevés de personnalisation avec des éléments interactifs et une personnalisation en fonction du comportement de l’utilisateur. Ces fonctionnalités aident l’utilisateur à rester engagé plus longtemps, améliorant ainsi la durée de la session.
Par exemple, après être passée à une PWA, la société d’ustensiles de cuisine GoodCook a constaté une Augmentation de 30% pendant la durée de la session en implémentant une fonctionnalité de commerce électronique sur les pages de recettes, permettant aux utilisateurs d’acheter directement les ustensiles de cuisine nécessaires à la préparation de leurs repas.
2. Convivialité mobile
Google utilise l’indexation mobile first, ce qui signifie qu’il explore la version mobile d’un site pour déterminer son classement sur les pages de résultats des moteurs de recherche. Les PWA offrent une expérience mobile transparente avec une conception réactive (c’est-à-dire lorsque votre site Web s’adapte à la taille de l’écran) et des techniciens de service, qui mettent en cache les ressources fréquemment utilisées telles que les images et les scripts pour une récupération plus rapide.
3. Capacités de notification push
Les PWA peuvent envoyer des notifications push aux utilisateurs, à l’instar des applications natives, même lorsque l’utilisateur n’interagit pas ouvertement avec le site Web. Par exemple, envoyer une notification push aux abonnés lorsqu’une nouvelle collection sort. Cela peut augmenter le trafic des visiteurs récurrents.
Conseils pour optimiser les PWA pour la recherche
Soumettre un plan du site
Créer des URL personnalisées
Surveiller et analyser les performances
Optimiser les métadonnées et le schéma
Envisagez le rendu hybride
Testez pour vous assurer que votre contenu est indexé
Les sites Web traditionnels diffusent généralement du HTML statique directement à partir du serveur, ce qui facilite leur exploration par les moteurs de recherche. En revanche, les PWA utilisent JavaScript pour générer du contenu de manière dynamique, ce qui peut être plus difficile à traiter pour les moteurs de recherche. Voici cinq conseils pour optimiser votre PWA afin de maintenir un bon classement dans les moteurs de recherche :
1. Soumettez un plan du site
Dans les sites Web traditionnels, le contenu est directement lié au code back-end. Dans une PWA, le contenu est généré dynamiquement par JavaScript. Ce que l’utilisateur voit ne reflète pas nécessairement le code. Cela peut amener les robots d’exploration de Google à mal interpréter la page, affectant ainsi le classement. En termes simples, si Google ne comprend pas votre page ou ne sait pas comment l’explorer, elle ne sera pas classée.
Pour atténuer ce problème, soumettez un plan de site XML complet aux moteurs de recherche, en vous assurant que les pages clés sont faciles à indexer pour les robots Google. Utilisez également Google Search Console et son testeur robots.txt pour vérifier les ressources bloquées qui pourraient gêner l’exploration.
2. Créez des URL personnalisées
Les sites Web traditionnels ont des URL uniques pour chaque page (par exemple, www.yourwebsite.com/collection/product-1), et l’URL change avec le contenu. Cependant, les PWA peuvent mettre à jour le contenu des pages de manière dynamique à l’aide de JavaScript sans modifier l’URL ni charger une nouvelle page. Le manque d’URL peut empêcher les moteurs de recherche d’indexer votre contenu car ils s’appuient sur les URL. Pour résoudre ce problème
Donnez à chaque page une URL unique. En utilisant l’API HTML5 History, par exemple, vous pouvez attribuer une URL unique à chaque page générée dynamiquement dans votre PWA sans recharger la page, permettant ainsi à la barre d’adresse de l’utilisateur de refléter l’état actuel du contenu. Supprimez les hashtags des URL. Ceux-ci sont souvent utilisés dans la navigation PWA. Utilisez des URL canoniques. Les URL canoniques sont la version préférée d’une page accessible via plusieurs URL ; ils évitent les problèmes de contenu en double.
3. Surveiller et analyser les performances
Intégrez votre PWA à des outils d’analyse tels que Google Analytics pour vous assurer que vos efforts de référencement sont efficaces. Si Google ne peut pas explorer ou traiter votre JavaScript, cela aura un impact sur votre classement dans les recherches et votre trafic organique (c’est-à-dire un classement et un trafic faibles ou nuls).
Auditez votre site Web à l’aide de l’outil Core Web Vitals de Google Search Console pour identifier et résoudre les problèmes tels qu’une mauvaise interactivité ou des changements de mise en page. Google PageSpeed Insights peut également vous fournir des informations et des recommandations liées à la convivialité mobile de votre PWA. L’analyse des performances est un processus continu entrepris tous les trimestres ou tous les deux ans.
4. Optimiser les métadonnées et le schéma
Les métadonnées aident les robots de recherche à comprendre votre page, tandis que le balisage de schéma fournit des détails spécifiques aux moteurs de recherche. L’optimisation des deux garantit que votre PWA est facilement comprise par les robots d’exploration et améliore le classement du contenu. Voici quelques conseils :
Attribuez à chaque page une balise de titre unique, comprenant le mot-clé cible. Implémentez des balises méta telles que « index » et « follow » pour guider les robots des moteurs de recherche. Ajoutez des données structurées avec schéma.org pour des éléments tels que l’évaluation des produits, les notes et les prix.
5. Envisagez le rendu hybride
Le rendu hybride fusionne le rendu côté client et côté serveur, offrant à votre PWA le meilleur des deux mondes. Lors du chargement initial de la page, la PWA utilise le rendu côté serveur, rendant l’intégralité du document HTML accessible aux robots des moteurs de recherche. Ensuite, à mesure que l’utilisateur interagit avec le site Web, le rendu côté client prend le relais pour offrir à l’utilisateur cette expérience fluide, semblable à celle d’une application, si cruciale dans les PWA.
6. Testez pour vous assurer que votre contenu est indexé
Pour voir si les moteurs de recherche indexent correctement le contenu de votre page, copiez une chaîne de texte de la page. Ouvrez la source HTML en cliquant avec le bouton droit et en sélectionnant « Afficher la source de la page » (et non « Inspecter »). Utilisez Ctrl + F pour rechercher ce texte dans le code source afin de vérifier qu’il est présent. Ensuite, saisissez la requête Google suivante pour voir si le contenu est indexé :
site :(URL) « (texte) »
Par exemple, pour vérifier si « les chats ont neuf vies » est indexé à l’utilisation :
site : “les chats ont neuf vies”
Si la recherche renvoie votre page, notamment avec le texte mis en surbrillance dans l’extrait, votre contenu est probablement indexé.
FAQ sur le référencement PWA
Les PWA prennent-elles en charge le référencement ?
Oui. Les PWA prennent en charge le référencement en améliorant la vitesse du site Web, la convivialité mobile et l’engagement du site. Ces facteurs peuvent conduire à un meilleur classement dans les moteurs de recherche.
Quelle est la différence entre PWA et AMP pour le SEO ?
Une application Web progressive (PWA) se concentre sur une expérience de type application utilisant JavaScript pour afficher dynamiquement le contenu sur les navigateurs de bureau et mobiles. Une page mobile accélérée (AMP) vise à offrir des vitesses de page rapides sur les appareils mobiles via une version simplifiée et statique d’une page. Les deux améliorent les temps de chargement, ce qui a un impact positif sur le référencement.
Que signifie PWA ?
PWA signifie « progressive web app », qui est un type de site Web conçu pour offrir une expérience semblable à celle d’une application sur un navigateur.
