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

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 créés avec JavaScript pour une visibilité des 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évention, diagnostic et dépannage des problèmes de classement pour les sites Web et les SPA (applications à page unique) construits sur des frameworks JavaScript, tels que React, Angular et Vue
  • Veiller à ce que les pages Web soient 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 du code JS pour une expérience utilisateur (UX) rationalisée

JavaScript est-il bon ou mauvais pour le référencement ?

Ça dépend ! JavaScript est essentiel au Web moderne et rend la création de sites Web évolutive et plus facile à entretenir. 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 de page et les facteurs de classement suivants qui sont importants pour le référencement:

  • Contenu rendu
  • Liens
  • Images chargées paresseusement
  • Temps de chargement des pages
  • Méta-données

Que sont les sites Web utilisant JavaScript ?

Lorsque nous parlons de sites basés sur JavaScript, nous ne parlons pas simplement d’ajouter une couche d’interactivité JS à des 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.

Modèle de shell d’application.

Ce modèle s’appelle un shell d’application et constitue la base des applications Web progressives (PWA). Nous explorerons cela 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:

SEO JavaScript pour le contenu principal

Voici un exemple : les applications Web modernes sont construites sur des frameworks JavaScript, tels que 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 œ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, cela ressemble à une page Web typique. Nous pouvons voir du texte, des images et des liens. Cependant, allons plus loin et jetons un coup d’œ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 de base 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.

SEO JavaScript pour les liens internes

Outre l’injection dynamique de contenu dans le DOM, JavaScript peut également affecter la capacité d’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 ne seront généralement pas explorés, conformément aux directives officielles de Google :

Malgré ces consignes, une étude indépendante et tierce a suggéré que Googlebot pourrait être en mesure d’explorer des liens JavaScript. Néanmoins, d’après mon expérience, j’ai constaté qu’il était recommandé de conserver les liens en tant qu’é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 risquent de manquer de précieux liens internes pointant vers elles. Les liens internes aident les moteurs de recherche à explorer votre site Web plus efficacement et à mettre en évidence les pages les plus importantes. Le pire des cas est que 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).

SEO JavaScript pour les images à chargement différé

JavaScript peut également affecter la capacité d’exploration des images chargées différemment. Voici un exemple de base. Cet extrait de code est destiné aux images à chargement différé 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 d’exploration.

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

Ce code montre que l’API IntersectionObserver déclenche un rappel lorsqu’un élément observé 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 différé 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 :

Chargement paresseux natif dans Google Chrome.

Problèmes potentiels de référencement: à l’instar du contenu principal qui n’est pas chargé, il est important de s’assurer que Google est en mesure 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 fournir une expérience utilisateur plus rapide pour les utilisateurs et les robots !

SEO Javascript 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’index 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 ?

  • Réduire le JavaScript
  • Report du JS non critique jusqu’à ce que le contenu principal soit rendu dans le DOM
  • Inlining JS critique
  • Servir JS dans des charges utiles plus petites

Problèmes potentiels de référencement: 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 ce qui est servi aux clients est codé et livré efficacement pour aider à protéger les classements.

SEO JavaScript pour les métadonnées

En outre, il est important de noter que les SPA qui utilisent un package de routeur comme react-router ou vue-router doivent 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 création de liens 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 ensuite chargée côté client
  4. Si un utilisateur clique sur un lien pour accéder à 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 « vue », 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 ?

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

  1. Crawl
  2. Rendre
  3. Indice

Tout d’abord, Googlebot explore les URL de sa file d’attente, page par page. Le robot effectue 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 rendre 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. analyser et exécuter JavaScript en masse est énorme.

C’est pourquoi Google peut différer 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), à mesure que les ressources informatiques deviennent disponibles.

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

Processus d’exploration, de rendu et d’indexation de Google. 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

Indexation Google Wave. Source : Google I / O’18

L’essentiel est que le contenu dépendant de JS à rendre peut subir 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 ces dernières années.

Googlebot a récemment été 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 « permanent » 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 le 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 sa file d’attente de services de rendu Web.

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

  • Bloqué dans le fichier robots.txt
  • Timeouts
  • les erreurs

Par conséquent, JavaScript peut causer des problèmes de référencement lorsque le contenu principal repose 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 concret de contenu dynamique injecté via JavaScript. Par exemple, les magasins en ligne chargent généralement des produits sur des 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égorie de manière dynamique. Cela a du sens car leur inventaire est en constante évolution en raison des ventes. Cependant, Google est-il réellement capable de « 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 faire indexer leurs produits 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. . Cela vous aide à afficher la page du point de vue de Google
  2. 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 plugins 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 Webmaster, tels que :

Test Google Mobile-Friendly : le but est simplement de comparer et de contraster visuellement votre contenu visible dans votre navigateur et de rechercher tout écart dans ce qui est affiché dans les outils.

Ces deux outils Google Webmaster utilisent le même moteur de rendu Chromium Evergreen 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 : opérateur de recherche

Alternativement, si vous n’êtes pas sûr que le contenu JavaScript est indexé par Google, vous pouvez effectuer une vérification rapide 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 le site : opérateur 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, afficher 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 :

Outils de développement Chrome

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.

Vous pouvez également cliquer sur « Inspecter l’élément » après un clic droit pour afficher le contenu qui est réellement chargé dans le DOM, y compris JavaScript.

Inspecter l’élément.

Comparez et mettez en contraste ces deux perspectives pour voir si un contenu de base est uniquement chargé dans le DOM, mais pas codé en dur dans la source. Il existe également des extensions Chrome tierces qui peuvent vous aider, comme le plugin Web Developer de Chris Pederick ou le plugin View Rendered Source de Jon Hogg.

Comment résoudre les 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 ça veut dire ? 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 conviviales pour la recherche que le rendu côté client, pour éviter de décharger JS à la fois pour les utilisateurs et les 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 consiste à 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 vers 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
  • Régénération statique incrémentielle ou mise à jour du 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 bénéficier 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 d’exploration de documents HTML, ils reçoivent les versions entièrement 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 bonnes pratiques de référencement JavaScript lors de la conception de l’architecture de votre prochaine application Web.

Notez que pour les sites Web construits sur un système de gestion de contenu (CMS) qui pré-rend 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 et le guide de dépannage de Google 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 référencement, vous pouvez l’adopter. Apprenez des développeurs JS et partagez vos connaissances SEO avec eux. JS ne part pas. – ? ?? ? John ? ?? ?? Vérifiez Série de certification SEO technique de la Moz Academy, une série de formations approfondies qui approfondissent les rouages ​​du référencement technique.

Enregistre-moi !

Tags: ,,