Le webinaire SEO in Orbit : JS en 2019, SEO moderne pour utilisateurs modernes fait partie de la série SEO in Orbit et a été diffusé le 2 mai 2019. Lors de cet épisode, nous avons débattu de JavaScript, des améliorations liées à son utilisation sur les sites web et des efforts déployés par les moteurs de recherche depuis que la communauté SEO a compris que le JS pouvait être problématique pour Google. Nous avons exploré avec Mike King les nouvelles possibilités offertes pour réconcilier les sites interactifs et professionnels et les technologies de crawl en 2019.
SEO in Orbit est la première série à envoyer le SEO dans l’espace. Tout au long de la série, nous avons débattu sur le présent et le futur du SEO technique avec certains des experts les plus qualifiés et avons envoyé leurs meilleurs conseils dans l’espace le 27 juin 2019.
Vous pouvez voir le replay ici:
Présentation de Michael King
Un artiste et un technologue réunis en une personne, Michael King a récemment fondé l’agence de digital marketing, iPullRank. Mike accompagne des entreprises à travers le monde entier, dont des marques comme SAP, American Express, HSBC, SanDisk, General Mills et FTD ainsi qu’une longue liste de startups prometteuses et de petites entreprises.
Mike était auparavant Directeur marketing, développeur et stratège SEO pour des agences multinationales comme Publicis Modem et Razorfish. Grâce à son expérience en tant que musicien hip hop, Mike King est un speaker dynamique souvent sollicité pour contribuer à des conférences et blogs à travers le monde. Mike a récemment acquis UndergroundHipHop.com, un pilier du rap old indie et chercher constamment à combiner son amour de la musique, du marketing et de la technologie pour revitaliser la marque.
Cette épisode a été animé par François Goube, co-fondateur et CEO d’Oncrawl.
JavaScript : vue d’ensemble
Les fonctionnalités les plus interactives des sites web sont aujourd’hui développées en JavaScript.
JavaScript n’est pas la seule option pour l’interactivité : le CSS dispose aussi d’intégrations interactives natives.
Auparavant, les SEOs pensaient qu’il fallait une version statique complètement différente de la page afin de travailler avec les moteurs de recherche. Cette théorie n’est plus vraie aujourd’hui. Comme la plupart du web a adopté ce type d’interactivité, les moteurs de recherche ont été contraints de se remettre à niveau.
Par conséquent, les SEOs ont aussi eu besoin de modifier leur approche concernant l’optimisation des pages en JavaScript.
Comment les user agents voient les pages ?
Le rendu correspond à la manière dont une page web est perçue par les différents user agents.
Historiquement, nous avons toujours pensé que les crawlers des moteurs de recherche voyaient les pages web via leur version HTML. Cela signifie que les options interactives construites avec JavaScript, n’étaient pas vues par les moteurs de recherche.
Cela contraste aussi avec une version complètement rendue de la page, qui renvoie à la manière dont les utilisateurs la voient dans leur navigateur.
Les moteurs de recherche peuvent maintenant crawler dans un format “headless”, ce qui leur permet de voir ce que les utilisateurs voient dans un navigateur. Cependant, ils ne font pas toujours ça. Rendre une page est un processus différent du crawl. Ce processus peut ne pas être pris en charge, ou bien plus tard.
Le JavaScript pour une vitesse améliorée sur les pages interactives
L’un des avantages majeurs du JavaScript en 2019 est le fait de faciliter l’amélioration de la vitesse sur des pages interactives. Utiliser JavaScript signifie que vous n’aurez pas à charger l’intégralité de la page pour avoir de nouvelles informations dessus.
Essentiellement, nous utilisons AJAX pour repopulariser des parties de la page utilisant des objets JSON. C’est bien plus rapide que d’avoir à télécharger chaque ressource d’une page.
Cela rend le web meilleur et permet l’existence d’applications comme Oncrawl ou Gmail.
JavaScript et UX
La compatibilité entre JavaScript et UX dépend de la capacité des développeurs et des experts UX à travailler sur un site web donné.
Il existe des exemples de sites web qui utilisent des cadres alors qu’ils auraient juste pu converser un HTML fixe. Il y a aussi des exemples de sites qui utilisent JQuery pour mettre à jour un seul objet, alors qu’il n’est pas forcément nécessaire de télécharger toute la librairie JQuery pour cela.
Cela revient au même problème auquel nous devons toujours nous confronter en SEO : est-ce que les personnes utilisent les bons outils de la bonne manière pour créer des expériences optimales ?
Même si JavaScript rend l’expérience utilisateur bien plus rapide, il peut aussi rendre les pages initiales plus lentes à charger. Si vous vérifiez les outils de développeurs lorsque vous ouvrez une page web, presque toutes les pages ont des temps de chargement lents dans les temps de chargement JavaScript.
Coûts d’infrastructure
JavaScript a pendant longtemps été un gros problème en SEO car les moteurs de recherche avaient du mal à le crawler. Mais cette époque est révolue.
Le plus grand challenge aujourd’hui réside dans les dépenses informatiques. Avoir un rendu JavaScript augmente considérablement vos coûts. Une page qui ne prendrait que quelques millisecondes à se charger avec du HTML en mettra probablement 30 secondes avec JavaScript dans un navigateur headless.
À cause des coûts actuels, Google doit déterminer si oui ou non il est pertinent de rendre ces pages. Certaines pages ont de petites différences ou aucune différence de contenu. Il n’est pas forcément utile aux yeux de Google et rendre des pages comme ça. Il doit s’assurer que rendre ces pages est absolument nécessaire.
Mike prédit que comme les ressources technologiques deviennent de plus en rapides et abordables, Google aura moins de difficultés avec JavaScript. Même si le fait de rendre une page est une étape “optionnelle” ou “secondaire” pour Google aujourd’hui, ce processus pourrait poser moins de question pour le rendu WRS à l’avenir et même être effectué en parallèle du crawl.
François souligne que le fait de crawler et rendre du JavaScript est approximativement 10 fois plus cher pour les coûts d’infrastructures qu’un crawl standard. Même si Google semble disposer de ressources infinies, un tel écart de coûts va pousser Google à se pencher sur son budget.
Pour les SEOs qui cherchent à optimiser une page pour les moteurs de recherche, donc, intéressez-vous à la manière dont l’utilisation de JavaScript peut vous être bénéfique.
Disparités entre les versions de contenu rendues et non-rendues
L’un des principaux problèmes en SEO est la disparité entre les versions rendues et non-rendues du contenu.
[table id=6 /]
Mike observe aussi souvent des problèmes concernant l’implémentation de l’architecture SSR. De nombreuses solutions requièrent un rafraichissement du cache, ce qui prend un certain temps. Si la page est visitée par Google pendant le rafraîchissement du cache, Google pourrait voir une erreur 5xx et cette URL pourrait être supprimée de l’index.
Malgré le fait que Google continue d’encourager les webmasters à mettre en place un rendu dynamique, une amélioration progressive est toujours préférable afin de s’assurer que votre masse de contenu soit toujours disponible pour n’importe quel user-agent qui vient sur cette page.
Rendu côté serveur natif vs. tierce
Presque tous les cadres modernes ont des solutions pour SSR (server-side rendering). Certains utilisent des add-ons, d’autres comme React, disposent d’options natives comme le rendu HTML incluses.
Si votre cadre ne propose pas de support pour le SSR, vous pouvez utiliser des solutions comme Rendertron ou Prerender.io afin de créer des instantanés HTML efficacement.
Mike recommande d’utiliser le SSR. Lorsque vous ajoutez un autre serveur pour le rendu tierce, vous ajoutez aussi de la latence. Or, nous voulons que le site soit aussi rapide que possible. Cela crée aussi une autre faille dans le processus.
Choix d’un framework
– S’adapter aux problèmes à résoudre
Avant tout, il faut prendre en compte le type de problème que vous essayez de résoudre avec un framework JavaScript. Chaque framework possède ses propres avantages et inconvénients.
– Angular vs React vs nouveaux frameworks
Assurez-vous que vous n’utilisez pas un nouveau framework simplement parce qu’il est nouveau. Angular et React, par exemple, sont très bien établis à ce stade. Il y a du code et de l’expérience disponibles qui peuvent être exploités.
Choisissez un framework qui a été mis à l’épreuve et qui sera toujours là dans cinq ans.
Pour Mike, React paraît être le choix du moment. Il préfère du SSR natif. Néanmoins, vous pouvez créer des captures d’état avec divers outils, ce qui vous donne plus de choix, selon vos prérequis techniques. Mike trouve que les frameworks majeurs connus n’ont pas de problèmes indiquant qu’il serait préférable de les éviter.
Jusqu’aux versions les plus récentes, Angular n’était pas aussi bon que React pour plusieurs raisons. C’est surprennant, car Angular est développé par Google. Heureusement, les versions récentes ont réussi à éliminer certaines des différences.
– Pousser des données à partir d’une source centrale avec une API
Bing a déclaré récemment qu’ils acceptent désormais que les sites web poussent leur contenu vers le moteur de recherche via leur API, ce qui supprime la nécessité de rendre le contenu poussé. D’un certain point de vue, c’est beaucoup plus logique.
C’est aussi un retour en arrière : auparavant, nous notifiions les moteurs de recherche qu’il fallait venir vérifier une telle URL. Mais cette méthode a l’avantage de répondre à une architecture pour les applications web qui les rendent plus portable. Il est logique que tout (les apps, les apps mobiles…) soit construits à partir d’une source centrale dans la forme de micro-services dans lesquels il est possible de pousser tout via une seule API.
Pour Mike, si le web évolue dans ce sens-là, il augmente la portabilité vers de nouvelles façons de consommer du contenu, et cela a beaucoup de sens.
Cette stratégie réduirait donc le coût computationnel du crawl du point de vue du moteur de recherche.
Connaissances SEO des développeurs
Mike s’attend à ce que les développeurs comprennent comment le choix d’un framework et son implémentation affectent le SEO. D’ailleurs, il trouve que de plus en plus de développeurs sont au courant des questions SEO associées aux choix technologiques des sites web,
Pendant longtemps, les développeurs ont pris la position de « Google s’en sortira », mais il y a une compréhension croissante du SEO qui vient peut-être des difficultés avec le rendu côté client que nous avons eu pendant si longtemps.
Par exemple, les bibliothèques qui comprennent le SSR (rendu côté serveur), comme NextJS, sont issues des initiatives de la communauté des développeurs. Ils n’ont pas comme déclencheur une initiative SEO.
– Évangélisation du SEO pour les développeurs
Mike n’a pas de méthode spécifique pour évangéliser le SEO technique pour les développeurs, mais il utilise souvent une stratégie qui peut s’appliquer à n’importe qui.
Afin de convaincre quelqu’un de faire quelque chose pour vous, il faut éveiller son intérêt. Sur quelles métriques les développeurs sont-ils évalués ? Qu’est-ce qui est important pour eux ? Mike essaie de faire coïncider son SEO avec ces points-ci et de démontrer comment le SEO impacte la capacité des développeurs à atteindre leurs propres objectifs. Il faut démontrer la valeur apportée à la carrière du développeur, à ses OKRs à court terme… Cela rend l’implémentation du SEO aussi importante pour les développeurs que pour les SEOs.
– Importance des connaissances en développement pour les SEOs
Mike est connu pour sa prise de position sur la « renaissance du SEO technique« .
Au coeur de ce changement se situe le fonctionnement du SEO. Vous n’avez pas besoin d’être développeur, mais il est essentiel de pouvoir comprendre et communiquer avec les développeurs. Des capacités qui font la différence comprennent :
- Curiosité sur les questions de développement
- Familiarité avec le code, même si vous n’êtes pas capable de l’écrire
- Capacité de faire des comparaisons entre la version « voir source » d’une page et la version DOM calculée d’une page afin de trouver la source des problèmes
– Qualités des bons développeurs qui sont nécessaires chez un expert SEO
Si Mike devait choisir entre un marketeur et un développeur à former pour devenir un expert SEO, il choisirait probablement le développeur, pour les qualités suivantes :
- Une approche logique
- La façon de déconstruire un problème chez les développeurs
- La communication avec une grande attention aux détails
Priorisation du contenu vs vitesse/poids
Lors de l’optimisation d’un site web qui se sert de JavaScript, Mike dédierait ses premiers efforts à vérifier que le contenu est visible et compréhensible.
La vitesse et le poids de chargement, tout en étant critiques, ne doivent être optimisés qu’une fois que vous êtes certains que le contenu est accessible.
L’astuce pré-rendu de Mike King
Il s’agit d’une astuce datant d’il y a quelques années.
L’astuce est d’utiliser l’API de Google Analytics afin de déterminer la page que l’utilisateur a le plus de chances de visiter en suivant selon sa page actuelle, et d’utiliser rel=prerender avec cette page-là.
Mike se demandait si cette astuce allait arrêter de fonctionner avec la mise à jour récente de Google Chrome concernant la méthode de fonctionnement de rel=prerender : il s’appelle désormais no-state prefetch, et Google n’exécute plus tout le JavaScript pendant le pré-rendu dans un onglet invisible. Néanmoins, cette méthode continue de rendre l’expérience utilisateur beaucoup plus rapide de page en page.
Les différents User Agents des Googlebots
Il y a beaucoup de User-Agents des Googlebots qui sont souvent oubliés.
Si votre site web ou votre CDN bloque les user-agents des Googlebots, il peut restreindre votre capacité à profiter des éléments avancés de recherche et des outils Google. Cela comprend notamment :
Clés pour améliorer la vitesse d’un site
La plupart des améliorations qui rendent un site super rapide viennent du côté serveur :
- Vérifiez que votre serveur est un CTN
- Utilisez H2
- Optimisez votre base de données
- Consolidez les requêtes
Cependant, depuis le font-end :
- Vérifiez la couverture de code
- Gérez le chargement de ressources via DNS prefetch, rel=prerender, rel=preload…
[Étude de cas] Suivre et optimiser la refonte d’un site web suite à une pénalité
Résoudre le problème du slash final/pas de slash final dans React
À cause à la façon dont React dirige les URLs, il est plus facile d’utiliser un re=canonical que de mettre en place une redirection 301 entre les URLs.
HTML pré- ou post-DOM
Pour l’interprétation des hreflangs, Google dit que le HTML pré-DOM est utilisé. Mike croit se souvenir que Paul Shapiro a récemment mené des tests à ce sujet et a peut-être trouvé des preuves du contraire.
Pour résumer : utilisez hreflang dans le HTML pré-DOM, car il n’est pas possible de savoir si Google va rendre la page.
Vous pouvez également réfléchir à placer les hreflangs dans le header afin de vous assurer que les moteurs de recherche les verront, peu importe la stratégie de rendu.
Meilleure recommandation
« En tant que SEO, il faut être capable de communiquer avec les développeurs. »
SEO in Orbit est parti dans l’espace
Si vous avez manqué notre voyage dans l’espace, découvrez quelles astuces nous avons envoyées le 27 juin dernier.
