Tout ce que vous devez savoir sur le référencement JavaScript

Demandez à n'importe quel programmeur et il vous dira ce qu'il pense de JavaScript.

Depuis sa sortie, JavaScript (JS) est le langage de programmation le plus utilisé par les développeurs Web du monde entier. Une récente enquête menée par Stack Overflow auprès des développeurs Web révèle que JavaScript est le langage de programmation le plus préféré pendant huit années consécutives.

JS permet aux développeurs Web de créer facilement des applications Web à grande échelle. Il a une capacité exceptionnelle à mettre à jour dynamiquement les pages et à les rendre plus interactives. De plus, les frameworks JavaScript comme AngularJS, ReactJS, Vue et NodeJS réduisent considérablement le temps et les efforts nécessaires au développement de sites basés sur JS. Pas étonnant que JavaScript soit à la base de 96 % des sites Web dans le monde.

Pourtant, les sites basés sur JS semblent avoir une relation amour-haine avec Google. JavaScript peut facilement contrôler et modifier le HTML pour rendre les pages Web dynamiques et interactives, améliorant ainsi l'UX du site. Pourtant, les moteurs de recherche ont du mal à gérer JS, laissant la plupart du contenu JavaScript non indexé.

Examinons un peu plus en profondeur pourquoi JavaScript rend le travail de Google plus difficile et ce que vous pouvez faire pour rendre votre contenu JS compatible avec les robots.

Comment Javascript impacte le SEO ?

JavaScript permet aux pages de se charger rapidement, offre une interface riche et est facile à mettre en œuvre ; cependant, la fluidité du navigateur change en fonction de l'interaction de l'utilisateur, ce qui rend difficile pour les moteurs de recherche de comprendre la page et d'associer une valeur au contenu.

Les moteurs de recherche ont leurs limites lors de l'affichage de pages Web contenant du contenu JavaScript. Google effectue une exploration initiale de la page et indexe ce qu'il trouve. Au fur et à mesure que les ressources sont disponibles, les bots retournent au rendu JS sur ces pages. Cela signifie que le contenu et les liens reposant sur JavaScript risquent de ne pas être vus par les moteurs de recherche, ce qui pourrait nuire au référencement du site.

La source

Cependant, Google sait que JavaScript est là pour rester ! En conséquence, le géant des moteurs de recherche a consacré une grande partie de ses ressources pour aider les professionnels de la recherche à optimiser leurs sites basés sur JS.

Découvrez cette série de vidéos sur JavaScript SEO de Google qui peut vous aider à rendre votre contenu JS plus visible en ligne.

Les experts en référencement doivent organiser leurs pages Web basées sur JS dans un format que Google apprécie. Avec une petite compréhension de la façon dont les moteurs de recherche traitent le contenu JS, JavaScript et SEO peuvent être amenés à fonctionner ensemble pour améliorer le classement de votre site.

Comment les moteurs de recherche traitent-ils JavaScript ?

Les bots Google traitent JS différemment d'une page non-JS. Les robots les traitent en trois phases, à savoir l'exploration, l'indexation et le rendu. Ces phases sont facilement compréhensibles grâce au graphique de Google Developers ci-dessous :

La source

Rampant

Cette phase concerne la découvrabilité de votre contenu. Il s'agit d'un processus compliqué, impliquant des sous-processus, à savoir les ensembles de graines, la mise en file d'attente et la planification de l'analyse, l'importance des URL, etc.

Pour commencer, les robots de Google mettent les pages en file d'attente pour l'exploration et le rendu. Les bots utilisent le module d'analyse pour récupérer les pages, suivre les liens sur les pages et effectuer le rendu jusqu'à un moment où les pages sont indexées. Le module rend non seulement les pages, mais analyse également le code source et extrait les URL dans les <a href="…"> extraits.

Les robots vérifient le fichier robots.txt pour voir si l'exploration est autorisée ou non. Si l'URL est marquée comme non autorisée, les bots l'ignorent. Par conséquent, il est essentiel de vérifier le fichier robots.txt pour éviter les erreurs.

Le rendu

Le processus d'affichage du contenu, des modèles et d'autres fonctionnalités d'un site à l'utilisateur s'appelle le rendu. Il existe un rendu côté serveur et un rendu côté client.

Rendu côté serveur (SSR)

Comme son nom l'indique, dans ce type de rendu, les pages sont remplies sur le serveur. A chaque accès au site, la page est rendue sur le serveur et envoyée au navigateur.

En d'autres termes, lorsqu'un utilisateur ou un bot accède au site, il reçoit le contenu sous forme de balisage HTML. Cela aide généralement le référencement car Google n'a pas à rendre le JS séparément pour accéder au contenu. Le SSR est la méthode de rendu traditionnelle et peut s'avérer coûteux en termes de bande passante.

Rendu côté client

Le rendu côté client est un type de rendu assez récent qui permet aux développeurs de construire leurs sites entièrement rendus dans le navigateur avec JavaScript. Ainsi, au lieu d'avoir une page HTML distincte par route, le rendu côté client permet de créer dynamiquement chaque route directement dans le navigateur. Bien que ce type de rendu soit initialement lent car il effectue plusieurs tours vers le serveur, une fois les demandes terminées, l'expérience via le framework JS est rapide.

Pour en revenir à ce qui se passe après qu'une page a été explorée, les bots identifient les pages qui doivent être rendues et les ajoutent à la file d'attente de rendu à moins que la balise méta des robots dans le code HTML brut indique à Googlebot de ne pas indexer la page.

Les pages restent dans la file d'attente de rendu pendant quelques secondes, mais cela peut prendre un certain temps, selon la quantité de ressources disponibles.

La source

Une fois que les ressources le permettent, le Google Web Rendering Service (WRS) rend, analyse et compile les pages et exécute le JavaScript sur la page. Le bot analyse à nouveau le HTML rendu pour les liens et met en file d'attente les URL qu'il trouve pour l'exploration. Le rendu HTML est utilisé pour indexer la page.

Indexage

Une fois que le WRS a récupéré les données des API et des bases de données externes, l'indexeur Caffeine de Google peut indexer le contenu. Cette phase consiste à analyser l'URL, à comprendre le contenu des pages et sa pertinence, et à stocker les pages découvertes dans l'index.

Comment optimiser JavaScript pour le référencement

JavaScript, lorsqu'il est mal implémenté, peut ruiner votre référencement. Suivez ces meilleures pratiques de référencement Javascript pour améliorer le classement de votre site.

Soyez persistant dans vos efforts de référencement sur la page

Toutes les règles de référencement sur la page qui entrent dans l'optimisation de votre page pour les aider à se classer sur les moteurs de recherche s'appliquent toujours. Optimisez vos balises de titre, méta descriptions, attributs alt dans les images et balises méta robot. Des titres et des méta-descriptions uniques et descriptifs aident les utilisateurs et les moteurs de recherche à identifier facilement le contenu. Faites attention à l'intention de recherche et au placement stratégique des mots-clés sémantiquement liés.

De plus, il est bon d'avoir une structure d'URL conviviale pour le référencement. Dans quelques cas, les sites Web implémentent un changement pushState dans l'URL, déroutant Google lorsqu'il essaie de trouver l'URL canonique. Assurez-vous de vérifier les URL pour de tels problèmes.

Assurez-vous que votre JavaScript apparaît dans l'arborescence DOM

Le rendu JavaScript fonctionne lorsque le DOM d'une page est suffisamment chargé. Le DOM ou Document Object Model montre la structure du contenu de la page et la relation de chaque élément avec l'autre. Vous pouvez le trouver dans ''Inspecter l'élément'' du navigateur sur le code de la page. DOM est la base de la page générée dynamiquement.

Si votre contenu peut être vu dans le DOM, il y a de fortes chances que votre contenu soit analysé par Google. La vérification du DOM vous aidera à déterminer si vos pages sont consultées ou non par les robots des moteurs de recherche.

Les bots ignorent le rendu et l'exécution JS si la balise meta robots contient initialement noindex. Googlebot ne déclenche pas d'événements sur une page. Si le contenu est ajouté à la page à l'aide de JS, cela doit être fait après le chargement de la page. Si le contenu est ajouté au HTML lors du clic sur le bouton, lors du défilement de la page, etc., il ne sera pas indexé.

Enfin, lorsque vous utilisez des données structurées, utilisez JavaScript pour générer le JSON-LD requis et l'injecter dans la page. En passant, découvrez les meilleures astuces de référencement sur la page que vous devriez mettre en œuvre dès le départ.

Évitez d'empêcher les moteurs de recherche d'accéder au contenu JS

Pour éviter que Google ne puisse pas trouver le contenu JS, quelques webmasters utilisent un processus appelé cloaking qui sert le contenu JS aux utilisateurs mais le cache des robots. Cependant, cette méthode est considérée comme une violation des consignes aux webmasters de Google et vous pourriez être pénalisé pour cela. Au lieu de cela, travaillez à identifier les problèmes clés et à rendre le contenu JS accessible aux moteurs de recherche.

Parfois, l'hébergeur du site peut être involontairement bloqué, empêchant Google de voir le contenu JS. Par exemple, si votre site comporte quelques domaines enfants qui servent à des fins différentes, chacun doit avoir un fichier robots.txt distinct, car les sous-domaines sont traités comme un site Web distinct. Dans un tel cas, vous devez vous assurer qu'aucune de ces directives robots.txt n'empêche les moteurs de recherche d'accéder aux ressources nécessaires au rendu.

Utiliser les codes d'état HTTP pertinents

Les robots d'exploration de Google utilisent des codes d'état HTTP pour identifier les problèmes lors de l'exploration d'une page. Par conséquent, vous devez utiliser un code d'état significatif pour informer les bots si une page ne doit pas être explorée ou indexée. Par exemple, vous pouvez utiliser un statut HTTP 301 pour indiquer aux bots qu'une page a été déplacée vers une nouvelle URL, permettant à Google de mettre à jour son index en conséquence.

Reportez-vous à cette liste de codes d'état HTTP et sachez quand les utiliser :

La source

Corriger le contenu dupliqué

Lorsque JavaScript est utilisé pour les sites Web, il peut y avoir différentes URL pour le même contenu. Cela entraîne des problèmes de contenu en double, souvent causés par la casse, les identifiants ou les paramètres avec des identifiants. Assurez-vous de trouver de telles pages, choisissez l'URL d'origine/préférée que vous souhaitez indexer et définissez des balises canoniques pour éviter que les moteurs de recherche ne se confondent.

Corriger le contenu et les images téléchargés paresseux

La vitesse du site est essentielle pour le référencement. Le chargement différé est l'une de ces meilleures pratiques UX qui diffère le chargement de contenu non critique ou non visible, réduisant ainsi le temps de chargement initial de la page. Mais en plus d'accélérer le chargement des pages, vous devez également vous assurer que votre contenu est accessible aux robots des moteurs de recherche. Ces robots n'exécuteront pas votre JavaScript ou ne feront pas défiler la page pour générer du contenu chargé paresseux, ce qui affectera négativement votre référencement.

De plus, les recherches d'images sont également une source de trafic organique supplémentaire. Donc, si vous avez des images chargées paresseusement, les moteurs de recherche ne les choisiront pas. Bien que le chargement paresseux soit idéal pour les utilisateurs, il doit être fait avec soin pour empêcher les bots de manquer du contenu potentiellement critique.

Utiliser les outils de référencement JS

Il existe une multitude d'outils disponibles qui peuvent vous aider à identifier et à résoudre les problèmes liés au code JavaScript. En voici quelques-unes que vous pouvez utiliser à votre avantage.

• Fonction d'inspection d'URL. Cet outil se trouve dans Google Search Console. Il peut vous montrer si les robots d'exploration de Google ont pu ou non indexer ou explorer vos pages.
• Les robots des moteurs de recherche. Ces outils vous permettent de tester et de surveiller efficacement la façon dont les moteurs de recherche explorent vos pages.
• Aperçu de la vitesse des pages. Page Speed ​​Insights de Google partage des détails sur les performances de votre site et propose des recommandations sur la manière de l'améliorer.
• Site : Commande. Cet outil vous aide à voir si oui ou non Google a correctement indexé votre contenu. Tout ce que vous avez à faire est d'entrer cette commande sur Google - site : [URL du site Web] "extrait de texte ou requête"

Les défis du référencement JavaScript

Vous avez maintenant une bonne idée de la façon dont les moteurs de recherche traitent le contenu JavaScript et de ce que vous pouvez faire pour mettre votre site Web sur la voie rapide du succès du référencement. Cependant, il existe quelques autres défis auxquels sont confrontés les experts SEO et les webmasters. La plupart d'entre eux proviennent des erreurs qu'ils ont commises lors de l'optimisation de leurs sites Web basés sur JavaScript.

1. Fichiers JavaScript et CSS non minifiés

Si vous utilisez des outils de référencement pour auditer votre site Web JS, vous auriez probablement rencontré un avertissement concernant des problèmes avec Javascript et CSS non minifiés. Sur une période de temps, les fichiers JS et CSS sont alourdis par des lignes de code inutiles, des espaces blancs, des commentaires dans le code source et l'hébergement sur des serveurs externes, ce qui ralentit votre site Web. Assurez-vous de vous débarrasser des lignes inutiles, des espaces blancs et des commentaires pour réduire le temps de chargement des pages, améliorer le taux d'engagement et booster le référencement.

2. Utilisation du hachage dans les URL

Vous souvenez-vous de ce que John Mueller a dit à propos des mauvaises URL lors d'un événement SEO ?

«Pour nous, si nous voyons une sorte de hachage là-bas, cela signifie que le reste n'est probablement pas pertinent. Pour la plupart, nous laisserons tomber cela lorsque nous essaierons d'indexer le contenu… »

Pourtant, plusieurs sites basés sur JS génèrent des URL avec un hachage. Cela peut être désastreux pour votre référencement. Assurez-vous que votre URL est compatible avec Google. Cela ne devrait certainement pas ressembler à ceci :

www.example.com/#/about -us OU

www.example.com/about#us

3. Ne pas vérifier la structure du lien interne

Google exige des liens <a href> appropriés pour trouver des URL sur votre site. De plus, si les liens sont ajoutés au DOM après avoir cliqué sur un bouton, les bots ne les verront pas. La plupart des webmasters passent à côté de ces points, ce qui nuit à leur référencement.

Prenez soin de fournir le lien 'href' traditionnel, les rendant accessibles aux bots. Vérifiez vos liens à l'aide de l'outil d'audit de site Web, SEOprofiler, pour améliorer la structure des liens internes de votre site.

Consultez cette présentation de Tom Greenway lors de la conférence Google I/O pour obtenir des conseils sur une structure de lien appropriée :

Conclusion

Sans aucun doute, JavaScript étend les fonctionnalités des sites Web. Cependant, JavaScript et les moteurs de recherche ne vont pas toujours ensemble. JavaScript a un impact sur la façon dont les moteurs de recherche explorent et indexent un site, affectant ainsi son classement. Par conséquent, les professionnels de la recherche doivent comprendre comment les robots des moteurs de recherche traitent le contenu JS et prendre les mesures nécessaires pour s'assurer que JavaScript s'intègre bien dans leur stratégie de référencement.

Si vous avez un site Web basé sur JS et que vous ne trouvez pas votre contenu sur Google, il est temps de résoudre les problèmes. Utilisez les informations et les conseils partagés dans cet article pour optimiser JavaScript pour le référencement et augmenter vos retours.