Défis PWA SEO : Qu'est-ce qui empêche votre site PWA de se classer ?

Publié: 2022-08-24

Table des matières

Avec une vitesse plus rapide et une meilleure interface utilisateur et UX, PWA peut booster vos Google Core Web Vitals, améliorant ainsi votre référencement. De nombreux blogs et actualités technologiques (y compris SimiCart) l'ont affirmé.

Cependant, ce n'est pas tout. En fait, dans certains cas, PWA peut être mauvais pour le référencement de votre site Web.

En 10 ans de développement de sites Web PWA, nous avons rencontré plusieurs cas dans lesquels les performances SEO sont en fait affectées négativement par PWA.

Nous avons déjà écrit un article sur les avantages des PWA. Maintenant, pour que vous puissiez voir la partie sous-marine de l'iceberg, voici quelques grands défis pour le référencement auxquels les propriétaires de magasins peuvent être confrontés lors de la mise en œuvre de PWA.

Le principal problème avec PWA SEO

Cela revient aux connaissances de base en développement de sites Web : HTML et Javascript. Nous parions que même si vous n'êtes pas du tout féru de technologie, vous avez bien entendu parler de ces deux langages de codage auparavant.

En bref, HTML est le langage de codage le plus simple, utilisé pour créer la structure d'un site Web.

Pendant ce temps, Javascript est plus avancé, qui est responsable de plus d'effets spéciaux.

Par conséquent, si vous voyez une page Web avec beaucoup de contenu dynamique, un effet de défilement sophistiqué ou un curseur sympa, par exemple, cette page Web utilise correctement Javascript.

html contre javascript

(crédit : Reddit)

PWA, célèbre pour son expérience UI/UX animée, comme vous pouvez le deviner, utilise beaucoup de Javascript.

Voici le problème : Google et de nombreux autres moteurs de recherche ne rendent pas si bien les sites Web Javascript. Les sites Web basés sur Javascript sont souvent plus complexes et plus lourds à traiter que les sites Web HTML. En fait, non seulement les moteurs de recherche, les médias sociaux comme Twitter ou Facebook n'aiment pas non plus Javascript.

Par conséquent, les robots des moteurs de recherche peuvent rencontrer des problèmes lors de l'indexation de votre site PWA, ce qui entraîne de mauvaises performances SEO.

Par conséquent, il faut un expert habile qui comprend PWA à fond pour optimiser le site Web afin qu'il soit optimisé pour le référencement.

6 obstacles lors de l'optimisation de PWA pour le référencement.

1. Problèmes de performances

"Mais PWA est censé être rapide?" - Tu peux demander.

Oui, c'est le cas, mais cela ne signifie pas que PWA n'a pas de problèmes de performances.

Il existe encore des problèmes importants liés à la vitesse avec PWA. Cependant, PWA peut être ultra-rapide s'il est correctement optimisé.

Tout comme Usain Bolt, même s'il est né super talentueux, il ne peut pas être le champion s'il n'a pas un entraîneur qui comprend ses capacités et l'entraîne bien.

Examinons de plus près chaque problème :

Problèmes

Les fichiers Javascript utilisent de nombreuses ressources pour leur analyse, compilation et exécution. De plus, en raison des mauvaises performances du serveur, le bogue du moteur de recherche ne peut pas rendre les fichiers Javascript rapidement.

Par conséquent, cela peut affecter certaines mesures de vitesse de page telles que First Meaningful Paint et First Contentful Paint. Comme ces deux mesures sont des facteurs de classement importants, cela est mauvais pour le référencement. De plus, un site en retard ne peut jamais non plus être bon pour l'expérience utilisateur.

De plus, comme le service worker de PWA nécessite des certificats HTTPS et SSL pour fonctionner, il peut rendre votre site Web plus lent que sa version HTTP.

Solutions

Certaines pratiques courantes pour améliorer la vitesse consistent à implémenter AMP (pages mobiles accélérées) avec PWA, ainsi qu'à utiliser HTTP/2 avec HTTPs

Étant donné que PWA est une technologie avancée et de niche dans le paysage du commerce électronique, il est préférable d'avoir des développeurs PWA expérimentés pour optimiser la vitesse de votre site.

2. Erreurs Javascript

Problème

Lors de l'analyse, les navigateurs tels que Google Chrome peuvent corriger automatiquement la syntaxe HTML, telle que les balises de fermeture. Cependant, ce n'est pas la même chose avec les erreurs Javascript.

Par conséquent, toute erreur dans Javascript peut empêcher les moteurs de recherche d'explorer et d'indexer vos pages Web.

Solutions

Il est important que les développeurs écrivent des codes Javascript propres et bien structurés pour votre site afin d'éviter de nombreux correctifs chronophages par la suite.

Si le site rencontre des erreurs Javascript, les développeurs devront les nettoyer manuellement et informer les moteurs de recherche après les avoir corrigées.

3. Lien hypertexte/image non exploré en raison d'un contenu dissimulé

contenu masqué
(Photo: Sitechecker.com)

Le contenu masqué est celui qui est vu par les yeux humains, mais pas par les moteurs de recherche. Par exemple, du texte caché derrière le bouton "Afficher plus" ou des liens de menu de chargement paresseux. Il s'agit souvent de contenu dynamique et de liens écrits en Javascript

Problème

Comme Google a encore des difficultés à comprendre Javascript, il se peut que certains contenus Javascript de PWA ne soient pas accessibles par Google.

Si votre contenu (par exemple un lien important, une image de produit) est invisible pour les moteurs de recherche, ils ne peuvent pas l'indexer. Cela aura par conséquent un impact négatif sur votre classement SEO.

La solution

Vous pouvez toujours compter sur des outils comme Sitechecker ou Small SEO tool pour voir si votre page Web contient du contenu masqué. Assurez-vous que tous les contenus clés tels que les textes, les images et les liens fournis à vos utilisateurs correspondent à ce qui est fourni à Googlebot.

4. Compatibilité des modules

Problème

En tant que technologie relativement nouvelle, PWA tire souvent parti des derniers modules. Cela peut entrer en conflit avec Google ou d'autres navigateurs, qui s'appuient généralement sur des modules moins modernes. Quelques exemples notables de cela sont ES6, Fetch API ou de nouvelles syntaxes ou méthodes.

La solution

Avant de les mettre en œuvre, vous devez vérifier leur compatibilité. Ce n'est pas un gros problème si certains modules de votre PWA ne fonctionnent pas avec Googlebot, car il existe des outils ou des polyfills pour y remédier.

Polyfill est constitué de quelques lignes de code Javascript qui peuvent permettre aux anciens navigateurs d'utiliser des fonctionnalités modernes même s'ils ne prennent pas en charge ces fonctionnalités de manière native.

En fonction des modules avec lesquels Googlebot est en conflit, il peut également y avoir un outil de transpilation.

Pour votre information, transpiler (traduire + compiler) signifie traduire et interpréter un langage de programmation vers un autre. Prenons le module ES6 comme exemple, des services comme Babel peuvent transpiler des fichiers Javascript C6 modernes vers ES5, ce qui permet aux anciens navigateurs de fonctionner sans problème avec lui.

5. Problème avec le rendu côté serveur

Afin d'améliorer le rendu des sites Web basés sur Javascript, Googlebot utilise à la fois le rendu côté serveur et côté client.

En bref, le processus de rendu ressemble à ceci :

  1. Googlebot explore votre site Web pour trouver des liens et du contenu pour la première fois
  2. Le serveur affichera les liens et le contenu trouvés après la 1ère analyse. Ces liens et contenus seront indexés peu de temps après
  3. Google continue d'explorer le site Web pour la deuxième, la troisième fois, etc.
  4. À partir de maintenant, les liens et contenus restants seront rendus par le client, ce qui signifie qu'ils seront rendus sur les appareils de vos utilisateurs.
  5. Une fois le rendu terminé, Google indexe vos pages Web.

Problème

Au début, le flux de rendu de Googlebot semble assez plausible, mais il y a quelques inconvénients majeurs :

  • Vitesse d'indexation inférieure :

Google peut indexer rapidement les fichiers HTML avec un rendu côté serveur, mais cela peut prendre des jours pour indexer les fichiers Javascript avec un rendu côté client

  • Prioriser les mauvaises pages :

Imaginez que vous ayez une page Web qui renvoie à d'autres pages. C'est ce qu'on appelle les liens internes. Google s'appuie sur la structure de ces liens internes pour comprendre la relation entre les liens et les liens qu'ils doivent prioriser.

Cependant, pour les liens insérés en Javascript, Google doit attendre que le rendu côté client soit terminé avant de pouvoir commencer l'indexation. En d'autres termes, Google ne peut évaluer pleinement la structure des liens internes du site Web qu'une fois le rendu côté client terminé.

Par conséquent, certains liens moins importants qui ne nécessitent pas de rendu côté client peuvent être explorés en premier et plus souvent. Ainsi, Google peut prioriser votre page mineure et ignorer les pages de vente.

  • Conflit entre le rendu côté serveur et le rendu côté client :

Il y a souvent des problèmes entre le rendu côté serveur et le rendu côté client. Par exemple, certains éléments importants de la page (balises meta, balises canoniques) ne sont pas indexés. De plus, les deux phases peuvent envoyer des signaux mitigés à Google, ainsi, le moteur de recherche ne sait pas comment procéder avec vos pages.

La solution

Un serveur plus efficace est une solution majeure à ces problèmes. Les développeurs peuvent avoir besoin d'optimiser le serveur afin qu'il réponde instantanément aux demandes de liens profonds. En outre, ils doivent fonctionner pour des fichiers HTML bien rendus, en particulier ceux des éléments de page cruciaux tels que la navigation, les liens, le contenu, les balises méta et les images.

La technologie moderne peut également nous aider à résoudre le conflit entre Javascript et les navigateurs Web. Par exemple, la technique isomorphique peut faciliter le rendu des fichiers Javascript par les navigateurs.

6. Erreurs courantes de référencement

Il existe plus de 200 facteurs de classement SEO, certains d'entre eux sont très techniques tels que les balises canoniques, rebot.txt, etc. Pour cette raison, les commerçants peuvent facilement ignorer ces configurations, ce qui finit par nuire au référencement de leur site Web.

Avant de vous lancer dans la correction de votre référencement PWA, il est préférable de vous assurer que vos sites actuels suivent les meilleures pratiques de référencement.

>> En savoir plus : Meilleures pratiques de référencement Magento

Maintenant, pour en venir à la question la plus chatouilleuse :

Dois-je passer à PWA ?

… Si je ne veux pas nuire au référencement de mon site Web.

Cela doit être très déroutant pour les commerçants qui envisagent de mettre en œuvre PWA, en particulier lorsque les recherches organiques sont un canal de trafic vital pour le site Web.

Cependant, ces défis ne signifient pas que les bots Google ne peuvent pas explorer les sites PWA, ni qu'ils classent les sites PWA différemment en raison de leur langage de programmation.

C'est juste que les commerçants doivent être conscients de certains défis techniques lors de la mise en œuvre d'un site PWA optimisé pour le référencement.

En fait, les sites Web PWA peuvent parfaitement se classer dans les moteurs de recherche, voire mieux que leurs sites Web équivalents non PWA. Comme mentionné précédemment, l'application Web améliore les Core Web Vitals de SEO.

Alors, en termes de SEO, PWA est-il un héros ou un zéro ? Cela dépend si leurs développeurs comprennent profondément la technologie PWA et le développement de sites Web.

Emporter

PWA peut être un couteau à double lame pour le classement SEO de votre site Web. D'autre part, sa vitesse et son expérience client améliorées peuvent aider à renforcer les éléments vitaux Web de base du référencement. Du côté obscur, PWA, avec son riche contenu Javascript, est plus compliqué à utiliser pour les moteurs de recherche comme Google. Ainsi, une mauvaise mise en œuvre sans une compréhension approfondie des PWA peut entraîner une chute du classement.

Il est tout à fait possible de créer un site Web PWA optimisé pour le référencement. La clé est de trouver des développeurs PWA qui connaissent ces défis et savent comment les résoudre rapidement.

Nous avons 10 ans de création de PWA sans tête pour Magento