Le guide définitif du référencement JavaScript (édition 2021)

Posté par PierceBrelinsky

Le Web est dans un âge d'or du développement front-end, et JavaScript et le référencement technique connaissent une renaissance. En tant que spécialiste du référencement technique et passionné de développement Web dans une agence de marketing numérique primée, j'aimerais partager mon point de vue sur le référencement JavaScript moderne basé sur les meilleures pratiques du secteur et ma propre expérience en agence. Dans cet article, vous apprendrez comment optimiser votre site Web alimenté par JS pour la recherche en 2021.

Qu'est-ce que le référencement JavaScript?

Le référencement JavaScript est la discipline du référencement technique qui se concentre sur l'optimisation des sites Web construits avec JavaScript pour plus de visibilité par les moteurs de recherche. Il s'agit principalement de:

• Optimiser le contenu injecté via JavaScript pour l'exploration, le rendu et l'indexation par les moteurs de recherche.
• Prévenir, diagnostiquer et résoudre les problèmes de classement pour les sites Web et les SPA (applications à page unique) construits sur des frameworks JavaScript, tels que comme React, Angular et Vue.
• S'assurer que les pages Web sont détectables par les moteurs de recherche en reliant les meilleures pratiques.
• Amélioration des temps de chargement des pages pour l'analyse et l'exécution de code JS pour une expérience utilisateur (UX) rationalisée. [19659009] JavaScript est-il bon ou mauvais pour le référencement?

  Cela dépend! JavaScript est essentiel au Web moderne et rend la création de sites Web évolutive et plus facile à maintenir. Cependant, certaines implémentations de JavaScript peuvent nuire à la visibilité des moteurs de recherche.

  

  Comment JavaScript affecte-t-il le référencement?

  JavaScript peut affecter les éléments suivants sur la page et les facteurs de classement qui sont importants pour le référencement:

  • Contenu rendu [19659006] Liens
  • Images chargées paresseusement
  • Temps de chargement des pages
  • Métadonnées

  Que sont les sites Web utilisant JavaScript?

  Quand nous parlons de sites construits avec JavaScript, nous ne faisons pas référence pour simplement ajouter une couche d'interactivité JS aux documents HTML (par exemple, lors de l'ajout d'animations JS à une page Web statique). Dans ce cas, les sites Web utilisant JavaScript font référence au moment où le contenu principal ou principal est injecté dans le DOM via JavaScript.

  

  Ce modèle s'appelle un shell d'application et constitue la base des applications Web progressives ( PWA). Nous allons explorer ceci ensuite.

  Comment vérifier si un site est construit avec JavaScript

  Vous pouvez vérifier rapidement si un site Web est construit sur un framework JavaScript en utilisant un outil de recherche technologique tel que BuiltWith ou Wappalyzer . Vous pouvez également «Inspecter l'élément» ou «Afficher la source» dans le navigateur pour vérifier le code JS. Les frameworks JavaScript populaires que vous pourriez trouver incluent:

  • Angular by Google
  • React by Facebook
  • Vue by Evan You

  SEO JavaScript pour le contenu principal

  Voici un exemple: les applications Web modernes sont construites sur des frameworks JavaScript, comme Angular, React et Vue. Les frameworks JavaScript permettent aux développeurs de créer et de mettre à l'échelle rapidement des applications Web interactives. Jetons un coup d'œil au modèle de projet par défaut pour Angular.js, un framework populaire produit par Google.

  

  Lorsqu'il est affiché dans le navigateur, il ressemble à une page Web typique. Nous pouvons voir du texte, des images et des liens. Cependant, approfondissons et jetons un œil sous le capot au code:

  

  Nous pouvons maintenant voir que ce document HTML est presque complètement dépourvu de tout contenu. Il n'y a que la racine de l'application et quelques balises de script dans le corps de la page. En effet, le contenu principal de cette application monopage est injecté dynamiquement dans le DOM via JavaScript. En d'autres termes, cette application dépend de JS pour charger le contenu clé sur la page!

  Problèmes potentiels de référencement: Tout contenu principal rendu aux utilisateurs mais pas aux robots des moteurs de recherche pourrait être sérieusement problématique! Si les moteurs de recherche ne sont pas en mesure d'explorer complètement tout votre contenu, votre site Web pourrait être négligé au profit de concurrents. Nous en discuterons plus en détail plus tard.

  JavaScript SEO pour les liens internes

  Outre l'injection dynamique de contenu dans le DOM, JavaScript peut également affecter l'exploration des liens. Google découvre de nouvelles pages en explorant les liens qu'il trouve sur les pages.

  Comme bonne pratique, Google recommande spécifiquement de lier les pages à l'aide de balises d'ancrage HTML avec des attributs href, ainsi que d'inclure des textes d'ancrage descriptifs pour les hyperliens:

  

  Cependant, Google recommande également aux développeurs de ne pas se fier à d'autres éléments HTML – comme div ou span – ou à des gestionnaires d'événements JS pour les liens. Ces liens sont appelés «pseudo» liens, et ils ne seront généralement pas explorés, selon les directives officielles de Google :

  

  Malgré ces directives, une étude indépendante d'un tiers a suggéré que Googlebot peut être en mesure d'explorer des liens JavaScript. Néanmoins, d'après mon expérience, j'ai constaté qu'il est recommandé de conserver les liens sous forme d'éléments HTML statiques.

  Problèmes potentiels de référencement: si les moteurs de recherche ne sont pas en mesure d'explorer et de suivre les liens vers vos pages clés, vos pages pourrait manquer de précieux liens internes pointant vers eux. Les liens internes aident les moteurs de recherche à explorer votre site Web plus efficacement et à mettre en évidence les pages les plus importantes. Dans le pire des cas, si vos liens internes ne sont pas correctement mis en œuvre, Google peut avoir du mal à découvrir vos nouvelles pages (en dehors du plan de site XML).

  JavaScript SEO pour les images à chargement différé

  JavaScript peut également affecter la capacité d'exploration des images chargées différées. Voici un exemple de base. Cet extrait de code est destiné au chargement paresseux d'images dans le DOM via JavaScript:

  

  Googlebot prend en charge le chargement paresseux, mais il ne «défile» pas comme le ferait un utilisateur humain lors de la visite de vos pages Web. Au lieu de cela, Googlebot redimensionne simplement sa fenêtre virtuelle pour qu'elle soit plus longue lors de l'exploration de contenu Web. Par conséquent, l'écouteur d'événement «scroll» n'est jamais déclenché et le contenu n'est jamais rendu par le robot.

  Voici un exemple de code plus convivial pour le référencement:

  

  Ce code montre que l'API IntersectionObserver déclenche un rappel en cas d'observation l'élément devient visible. Il est plus flexible et robuste que l'écouteur d'événement à défilement et est pris en charge par Googlebot moderne. Ce code fonctionne en raison de la façon dont Googlebot redimensionne sa fenêtre d'affichage afin de «voir» votre contenu (voir ci-dessous).

  

  Vous pouvez également utiliser le chargement paresseux natif dans le navigateur. Ceci est pris en charge par Google Chrome, mais notez qu'il s'agit toujours d'une fonctionnalité expérimentale. Dans le pire des cas, il sera simplement ignoré par Googlebot, et toutes les images se chargeront de toute façon:

  

  

  Problèmes potentiels de référencement: comme le contenu principal n'est pas chargé, il est important de s'assurer que Google est capable de "voir" tout le contenu d'une page, y compris les images. Par exemple, sur un site de commerce électronique avec plusieurs lignes de listes de produits, les images à chargement différé peuvent offrir une expérience utilisateur plus rapide aux utilisateurs et aux robots!

  Javascript SEO pour la vitesse de la page

  Javascript peut également affecter les temps de chargement des pages , qui est un facteur de classement officiel dans l'indice mobile-first de Google. Cela signifie qu'une page lente pourrait potentiellement nuire au classement dans la recherche. Comment pouvons-nous aider les développeurs à atténuer cela?

  • Minification de JavaScript
  • Différer le JS non critique jusqu'à ce que le contenu principal soit rendu dans le DOM
  • Inlining Critical JS
  • Serving JS in small payloads

  SEO potentiel problèmes: un site Web lent crée une mauvaise expérience utilisateur pour tout le monde, même les moteurs de recherche. Google lui-même reporte le chargement de JavaScript pour économiser les ressources, il est donc important de s'assurer que tout service servi aux clients est codé et livré efficacement pour aider à protéger les classements.

  JavaScript SEO pour les métadonnées

  En outre, il est important de noter que les SPA qui utiliser un package de routeur comme react-router ou vue-router doit prendre des mesures supplémentaires pour gérer des choses comme la modification des balises méta lors de la navigation entre les vues de routeur. Ceci est généralement géré avec un package Node.js comme vue-meta ou react-meta-tags.

  

  Que sont les vues de routeur? Voici comment la liaison vers différentes «pages» dans une application à page unique fonctionne dans React en cinq étapes:

  1. Lorsqu'un utilisateur visite un site Web React, une requête GET est envoyée au serveur pour le fichier ./index.html.
  2. ] Le serveur envoie ensuite la page index.html au client, contenant les scripts pour lancer React et React Router.
  3. L'application Web est alors chargée côté client.
  4. Si un utilisateur clique sur un lien vers aller sur une nouvelle page (/ exemple), une requête est envoyée au serveur pour la nouvelle URL.
  5. React Router intercepte la requête avant qu'elle n'atteigne le serveur et gère le changement de page lui-même. Cela se fait en mettant à jour localement les composants React rendus et en modifiant l'URL côté client.

  En d'autres termes, lorsque les utilisateurs ou les bots suivent des liens vers des URL sur un site Web React, ils ne reçoivent pas plusieurs fichiers HTML statiques. Mais plutôt, les composants React (comme les en-têtes, les pieds de page et le contenu du corps) hébergés sur le fichier racine ./index.html sont simplement réorganisés pour afficher un contenu différent. C'est pourquoi on les appelle des applications à page unique!

  Problèmes potentiels de référencement: il est donc important d'utiliser un package tel que React Helmet pour s'assurer que les utilisateurs reçoivent des métadonnées uniques pour chaque page, ou «Afficher», lors de la navigation dans les SPA. Sinon, les moteurs de recherche peuvent explorer les mêmes métadonnées pour chaque page, ou pire, aucune du tout!

  Comment tout cela affecte-t-il le référencement dans une vue d'ensemble? Ensuite, nous devons apprendre comment Google traite JavaScript.

  Comment Google gère-t-il JavaScript?

  Pour comprendre comment JavaScript affecte le référencement, nous devons comprendre ce qui se passe exactement lorsque GoogleBot explore une page Web:

  1. Exploration
  2. Rendu
  3. Index

  Premièrement, Googlebot explore les URL de sa file d'attente, page par page. Le robot fait une requête GET au serveur, généralement à l'aide d'un agent utilisateur mobile, puis le serveur envoie le document HTML.

  Ensuite, Google décide des ressources nécessaires pour afficher le contenu principal de la page. Habituellement, cela signifie que seul le HTML statique est analysé, et non les fichiers CSS ou JS liés. Pourquoi?

  Selon Google Webmasters, Googlebot a découvert environ 130 billions de pages Web. Le rendu de JavaScript à grande échelle peut être coûteux. La puissance de calcul nécessaire pour télécharger, analyser et exécuter JavaScript en masse est énorme.

  C'est pourquoi Google peut reporter le rendu de JavaScript à plus tard. Toutes les ressources non exécutées sont mises en file d'attente pour être traitées par Google Web Rendering Services (WRS), au fur et à mesure que les ressources informatiques deviennent disponibles.

  Enfin, Google indexera tout code HTML rendu après l'exécution de JavaScript.

  

  En d'autres termes, Google explore et indexe le contenu en deux vagues:

  1. La première vague d'indexation, ou l'exploration instantanée du HTML statique envoyé par le serveur Web
  2. La deuxième vague d'indexation, ou l'exploration différée de tout contenu supplémentaire rendu via JavaScript

  

  L'essentiel est que le contenu dépendant de JS à rendre peut connaître un retard dans l'exploration et l'indexation par Google. Cela prenait des jours, voire des semaines. Par exemple, Googlebot fonctionnait historiquement sur le moteur de rendu obsolète de Chrome 41. Cependant, ils ont considérablement amélioré ses robots d'exploration Web ces dernières années.

  Googlebot a été récemment mis à niveau vers la dernière version stable du navigateur sans tête Chromium en mai 2019. Cela signifie que leur robot d'exploration Web est désormais " evergreen »et entièrement compatible avec ECMAScript 6 (ES6) et supérieur, ou les dernières versions de JavaScript.

  Donc, si Googlebot peut techniquement exécuter JavaScript maintenant, pourquoi sommes-nous toujours préoccupés par les problèmes d'indexation?

  La réponse courte est budget d'exploration. C'est le concept selon lequel Google a une limite de débit sur la fréquence à laquelle il peut explorer un site Web donné en raison de ressources informatiques limitées. Nous savons déjà que Google reporte l'exécution de JavaScript plus tard pour économiser le budget d'exploration.

  Bien que le délai entre l'exploration et le rendu ait été réduit, rien ne garantit que Google exécutera réellement le code JavaScript en attente dans ses services de rendu Web file d'attente.

  Voici quelques raisons pour lesquelles Google pourrait ne jamais exécuter votre code JavaScript:

  • Bloqué dans le fichier robots.txt
  • Timeouts
  • Erreurs

  Par conséquent, JavaScript peut provoquer des problèmes de référencement lorsque le contenu principal dépend sur JavaScript, mais n'est pas rendu par Google.

  Application du monde réel: SEO JavaScript pour le commerce électronique

  Les sites Web de commerce électronique sont un exemple réel de contenu dynamique injecté via JavaScript. Par exemple, les magasins en ligne chargent généralement des produits sur les pages de catégories via JavaScript.

  JavaScript peut permettre aux sites Web de commerce électronique de mettre à jour les produits sur leurs pages de catégories de manière dynamique. Cela a du sens car leur inventaire est en constante évolution en raison des ventes. Cependant, est-ce que Google peut réellement "voir" votre contenu s'il n'exécute pas vos fichiers JS?

  Pour les sites de commerce électronique, qui dépendent des conversions en ligne, ne pas avoir leurs produits indexés par Google pourrait être désastreux.

  Comment tester et déboguer les problèmes de référencement JavaScript

  Voici les étapes que vous pouvez suivre aujourd'hui pour diagnostiquer de manière proactive tout problème potentiel de référencement JavaScript:

  1. Visualisez la page avec les outils pour les webmasters de Google. Cela vous aide à afficher la page du point de vue de Google.
  2. Utilisez l'opérateur de recherche de site pour vérifier l'index de Google. Assurez-vous que tout votre contenu JavaScript est correctement indexé en vérifiant manuellement Google.
  3. Déboguez à l'aide des outils de développement intégrés de Chrome. Comparez et mettez en contraste ce que Google «voit» (code source) avec ce que les utilisateurs voient (code rendu) et assurez-vous qu'ils s'alignent en général.

  Il existe également des outils et plug-ins tiers pratiques que vous pouvez utiliser. Nous en parlerons bientôt.

  Outils Google pour les webmasters

  La meilleure façon de déterminer si Google rencontre des difficultés techniques lors de la tentative de rendu de vos pages est de tester vos pages à l'aide des outils Google pour les webmasters, tels que:

  • Outil d'inspection d'URL dans Search Console
  • Test de compatibilité mobile

  

  Le but est simplement de comparer et de contraster visuellement votre contenu visible dans votre navigateur et recherchez toute divergence dans ce qui est affiché dans les outils.

  Ces deux outils Google Webmaster utilisent le même moteur de rendu Chromium permanent que Google. Cela signifie qu'ils peuvent vous donner une représentation visuelle précise de ce que Googlebot «voit» réellement lorsqu'il explore votre site Web.

  Il existe également des outils de référencement technique tiers, tels que l'outil de récupération et de rendu de Merkle . Contrairement aux outils de Google, cette application Web offre aux utilisateurs une capture d'écran en taille réelle de la page entière.

  Site: Search Operator

  Sinon, si vous ne savez pas si le contenu JavaScript est indexé par Google, vous pouvez effectuer un rapide check-up en utilisant l'opérateur site: search sur Google.

  Copiez et collez tout contenu dont vous n'êtes pas sûr que Google indexe après l'opérateur site: et votre nom de domaine, puis appuyez sur la touche retour. Si vous pouvez trouver votre page dans les résultats de recherche, alors ne vous inquiétez pas! Google peut explorer, rendre et indexer votre contenu très bien. Sinon, cela signifie que votre contenu JavaScript pourrait avoir besoin d'aide pour gagner en visibilité.

  Voici à quoi cela ressemble dans le SERP Google:

  

  Chrome Dev Tools

  Une autre méthode que vous pouvez utiliser pour tester et déboguer les problèmes de référencement JavaScript est la fonctionnalité intégrée des outils de développement disponibles dans le navigateur Web Chrome.

  Cliquez avec le bouton droit n'importe où sur une page Web pour afficher le menu d'options, puis cliquez sur «Afficher la source» pour afficher le document HTML statique dans un nouvel onglet.

  Vous pouvez également cliquer sur "Inspecter l'élément" après avoir cliqué avec le bouton droit de la souris pour afficher le contenu qui est réellement chargé dans le DOM, y compris JavaScript.

  

  Comparez et mettez en contraste ces deux perspectives pour voir s'il y a un noyau le contenu n'est chargé que dans le DOM, mais pas codé en dur dans la source. Il existe également des extensions Chrome tierces qui peuvent vous aider, comme le plug-in Web Developer de Chris Pederick ou le plug-in View Rendered Source de Jon Hogg.

  Comment réparer Problèmes de rendu JavaScript

  Après avoir diagnostiqué un problème de rendu JavaScript, comment résoudre les problèmes de référencement JavaScript? La réponse est simple: Javascript universel, également appelé JavaScript «isomorphe».

  Qu'est-ce que cela signifie? Universel ou isomorphe se réfère ici aux applications JavaScript qui peuvent être exécutées sur le serveur ou le client.

  Il existe quelques implémentations différentes de JavaScript qui sont plus faciles à rechercher que le rendu côté client, pour éviter de décharger JS vers utilisateurs et robots d'exploration:

  • Rendu côté serveur (SSR). Cela signifie que JS est exécuté sur le serveur pour chaque requête. Une façon d'implémenter SSR est d'utiliser une bibliothèque Node.js comme Puppeteer . Cependant, cela peut mettre beaucoup de pression sur le serveur.
  • Rendu hybride. Il s'agit d'une combinaison de rendu côté serveur et côté client. Le contenu principal est rendu côté serveur avant d'être envoyé au client. Toutes les ressources supplémentaires sont déchargées sur le client.
  • Rendu dynamique. Dans cette solution de contournement, le serveur détecte l'agent utilisateur du client effectuant la demande. Il peut ensuite envoyer du contenu JavaScript pré-rendu aux moteurs de recherche, par exemple. Tous les autres agents utilisateurs devront rendre leur contenu côté client. Par exemple, Google Webmasters recommande une solution open-source populaire appelée Renderton pour implémenter le rendu dynamique.
  • Incremental Static Regeneration, ou mettre à jour le contenu statique après qu'un site a déjà été déployé. Cela peut être fait avec des frameworks comme Next.js pour React ou Nuxt.js pour Vue. Ces frameworks ont un processus de construction qui pré-rendra chaque page de votre application JS en actifs statiques que vous pouvez servir à partir de quelque chose comme un compartiment S3. De cette façon, votre site peut profiter de tous les avantages SEO du rendu côté serveur, sans la gestion du serveur!

  Chacune de ces solutions permet de s'assurer que, lorsque les robots des moteurs de recherche font des demandes pour explorer des documents HTML, ils reçoivent l'intégralité versions rendues des pages Web. Cependant, certains d'entre eux peuvent être extrêmement difficiles, voire impossibles à mettre en œuvre une fois que l'infrastructure Web est déjà construite. C'est pourquoi il est important de garder à l'esprit les meilleures pratiques de référencement JavaScript lors de la conception de l'architecture de votre prochaine application Web.

  Remarque, pour les sites Web construits sur un système de gestion de contenu (CMS) qui pré-rend déjà la plupart du contenu, comme WordPress ou Shopify , ce n'est généralement pas un problème.

  Points clés à retenir

  Ce guide fournit quelques bonnes pratiques générales et des informations sur le référencement JavaScript. Cependant, le référencement JavaScript est un domaine d'étude complexe et nuancé. Nous vous recommandons de lire la documentation officielle de Google et le guide de dépannage pour plus d'informations de base sur le référencement JavaScript. Vous souhaitez en savoir plus sur l'optimisation de votre site Web JavaScript pour la recherche? Laissez un commentaire ci-dessous.

  Le Web est passé du simple HTML – en tant que SEO, vous pouvez l'adopter. Apprenez des développeurs JS et partagez vos connaissances SEO avec eux. JS & # 039; ne s'en va pas.

  – ???? John ???? (@JohnMu) 8 août 2017

  https://platform.twitter.com/widgets.js

  ---

  Vous voulez en savoir plus sur le référencement technique? Jetez un œil à la Moz Academy Technical SEO Certification Series une série de formations approfondies sur les rouages ​​du SEO technique.

  Inscrivez-moi!

  Inscrivez-vous au Moz Top 10 un courrier bimensuel vous mettant à jour sur les dix actualités SEO les plus chaudes, astuces et liens rad découverts par l'équipe de Moz. Considérez-le comme votre résumé exclusif de choses que vous n'avez pas le temps de traquer mais que vous voulez lire!

  

  Le meilleur outil 2023 pour ta croissance Instagram !
  
  
  
  Source link

  Partager :

  • Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)