Comment le robot d'exploration de Google explore-t-il JavaScript ?

Nous savons que les navigateurs et les outils de recherche nationaux utilisent des robots d'exploration pour explorer les informations des pages Web. Alors, comment le robot d'exploration de Google explore-t-il Javascript ? Ayons une étude et une discussion approfondies avec vous aujourd’hui.

Nous avons testé la manière dont Google explore JavaScript et voici ce que nous avons appris.

Vous pensez que Google ne peut pas gérer JavaScript ? Détrompez-vous. Audette Audette a partagé les résultats d'une série de tests au cours desquels lui et ses collègues ont testé quels types de fonctionnalités JavaScript seraient explorées et incluses par Google.

Pour faire court

1 Nous avons effectué une série de tests et confirmé que Google peut exécuter et inclure JavaScript de différentes manières. Nous avons également confirmé que Google peut afficher la page entière et lire le DOM, incluant ainsi le contenu généré dynamiquement.

2. Les signaux SEO dans le DOM (titre de la page, méta description, balise canonique, balise méta robots, etc.) sont tous pris en compte. Le contenu inséré dynamiquement dans le DOM peut également être exploré et inclus. De plus, dans certains cas, le DOM peut même avoir préséance sur les instructions du code source HTML. Bien que cela nécessite plus de travail, c'est l'un des nombreux tests que nous avons testés.

Introduction : Google exécute JavaScript et lit DOM

Dès 2008, Google a exploré avec succès JavaScript, mais il était probablement limité à une certaine manière.

Ce qui est clair aujourd'hui, c'est que Google a non seulement été capable d'élaborer une stratégie sur les types de JavaScript qu'ils explorent et incluent, mais qu'il a également réalisé des progrès significatifs (en particulier au cours des 12 à 18 derniers mois) dans le rendu de l'ensemble du Web. ).

Chez Merkle, notre équipe technique SEO souhaitait mieux comprendre quels types d'événements JavaScript les robots d'exploration Google peuvent explorer et inclure. Après des recherches, nous avons trouvé des résultats époustouflants et confirmé que Google peut non seulement exécuter divers événements JavaScript, mais également inclure du contenu généré dynamiquement. Comment? Google peut lire le DOM.

Qu'est-ce que le DOM ?

De nombreux spécialistes du référencement ne comprennent pas ce qu'est le modèle objet de document (DOM).

Que se passe-t-il lorsque le navigateur demande la page et comment le DOM s'implique-t-il.

Lorsqu'il est utilisé dans un navigateur Web, le DOM est essentiellement une interface de programme d'application, ou API, permettant de baliser et de structurer des données (telles que HTML et XML). Cette interface permet aux navigateurs Web de les combiner pour former des documents.

DOM définit également comment obtenir et exploiter les structures. Bien que le DOM soit une API neutre en termes de langage (non liée à un langage de programmation ou à une bibliothèque spécifique), il est couramment utilisé dans les applications Web pour JavaScript et le contenu dynamique.

DOM représente l'interface, ou « pont », qui relie une page Web à un langage de programmation. Le résultat de l’analyse HTML et de l’exécution de JavaScript est le DOM. Le contenu d'une page Web n'est pas (pas seulement) le code source, mais le DOM. Cela le rend très important.

Comment fonctionne JavaScript via l'interface DOM.

Nous étions ravis de découvrir que Google peut lire le DOM et analyser les signaux et le contenu inséré dynamiquement tel que les balises de titre, le texte de la page, les balises de tête et les annotations méta (par exemple : rel = canonique). Tous les détails peuvent être lus ici.

Cette série de tests et de résultats

Parce que nous voulons savoir quel type de fonctions JavaScript seront explorées et incluses, nous avons créé une série de tests sur Google Crawler uniquement. Assurez-vous que les activités des URL peuvent être comprises indépendamment en créant des contrôles. Ci-dessous, décomposons en détail quelques résultats de tests intéressants. Ils sont répartis en 5 catégories :

Redirection JavaScript

Lien JavaScript

Insertion dynamique de contenu

Insertion dynamique de métadonnées et d'éléments de page

Un exemple important avec rel = «nofollow»

Exemple : Une page utilisée pour tester la capacité du robot d'exploration de Google à comprendre JavaScript.

1. Redirection JavaScript

Nous avons d'abord testé les redirections JavaScript courantes. Quels seront les résultats des URL exprimées de différentes manières ? Nous avons sélectionné l'objet window.location pour deux tests : le test A appelle window.location avec un chemin URL absolu, tandis que le test B utilise un chemin relatif.

Résultat : La redirection a été rapidement suivie par Google. Du point de vue de l'indexation, ils sont interprétés comme des 301 : l'URL finale remplace l'URL de redirection dans l'indexation Google.

Lors de tests ultérieurs, nous avons utilisé exactement le même contenu sur une page Web faisant autorité pour effectuer une redirection JavaScript vers une nouvelle page du même site. Et l’URL d’origine est classée sur la première page des principales requêtes de Google.

Résultat : Effectivement, la redirection a été suivie par Google, mais la page d'origine n'a pas été indexée. La nouvelle URL est incluse et immédiatement classée à la même position dans la même page de requête. Cela nous a surpris et semble indiquer que les redirections JavaScript se comportent (parfois) un peu comme des redirections 301 permanentes du point de vue du classement.

La prochaine fois que votre client souhaite qu'une redirection JavaScript soit effectuée pour son site Web, vous n'aurez peut-être pas besoin de répondre, ou de répondre : "s'il vous plaît, ne le faites pas". Parce que cela semble avoir une relation de signal de classement de transfert. Cette conclusion est étayée par des citations des directives de Google :

L'utilisation de JavaScript pour rediriger les utilisateurs peut constituer une pratique légale. Par exemple, si vous redirigez les utilisateurs connectés vers une page interne, vous pouvez le faire en utilisant JavaScript. Lorsque vous revérifiez JavaScript ou d'autres méthodes de redirection, assurez-vous que votre site respecte nos directives et prend en compte son intention. N'oubliez pas que les redirections 301 vers votre site Web sont les meilleures, mais si vous n'avez pas accès au serveur de votre site Web, vous pouvez utiliser les redirections JavaScript pour cela.

2. Liens JavaScript

Nous avons testé différents types de liens JS en utilisant plusieurs méthodes d'encodage.

Testons le lien du menu déroulant. Historiquement, les moteurs de recherche ont été incapables de suivre ce type de lien. Nous voulons déterminer si le gestionnaire d'événements onchange sera suivi. Il est important de noter que cela n'applique que des types spécifiques et que nous devons être conscients de l'impact des autres modifications, plutôt que de forcer la redirection JavaScript ci-dessus.

Exemple : menu déroulant de sélection de la langue sur la page Google Work.

Résultat : Lien entièrement exploré et suivi.

Nous avons également testé les liens JavaScript courants. Vous trouverez ci-dessous les types de liens JavaScript les plus courants, tandis que le référencement traditionnel recommande le texte brut. Ces tests incluent le code de lien JavaScript :

Agit sur une paire clé-valeur (AVP) href externe, mais au sein d'une balise ("onClick")

Agit sur une AVP href interne ("javascript : window" .location")

Agit en dehors de la balise a, mais appelle AVP ("javascript: openlink()") dans le href

etc.

Résultat : Le lien est terminé. Crawl et suivi.

Notre prochain test consiste à tester davantage le gestionnaire d'événements, tel que le onchange testé ci-dessus. Plus précisément, nous souhaitons exploiter le gestionnaire d'événements de mouvement de la souris, puis masquer la variable URL afin qu'elle ne s'exécute que lorsque les fonctions du gestionnaire d'événements (onmousedown et onmouseout dans ce cas) sont déclenchées.

Résultat : Lien entièrement exploré et suivi.

Construction de liens : nous savons que Google peut exécuter du JavaScript, mais nous voulons confirmer qu'il peut lire les variables dans le code. Ainsi, dans ce test, nous concaténons des caractères qui construisent une chaîne URL.

Résultat : Lien entièrement exploré et suivi.

3. Insérer dynamiquement du contenu

Ce sont évidemment les points clés : insérer dynamiquement du texte, des images, des liens et de la navigation. Un contenu textuel de haute qualité est crucial pour que les moteurs de recherche comprennent le sujet et le contenu de la page Web. À l’ère des sites Web dynamiques, son importance est incontestable.

Ces tests sont conçus pour vérifier les résultats de l'insertion dynamique de texte dans deux scénarios différents.

1. Testez si le moteur de recherche peut compter le texte inséré dynamiquement et si le texte provient du code source HTML de la page.

2. Testez si le moteur de recherche peut compter le texte inséré dynamiquement provenant de l'extérieur de la source HTML de la page (dans un fichier JavaScript externe).

Résultats : dans les deux cas, le texte a été exploré et inclus, et la page a été classée en fonction de ce contenu. Cool!

Afin d'en savoir plus à ce sujet, nous avons testé une navigation globale côté client écrite en JavaScript, et les liens dans la navigation ont été insérés via la fonction document.writeIn, et avons confirmé qu'ils pouvaient être entièrement explorés et suivi. Il convient de noter que Google peut interpréter un site Web créé à l'aide du framework AngularJS et de l'API d'historique HTML5 (pushState), le restituer, l'indexer et le classer comme une page Web statique traditionnelle. C'est pourquoi il est important de ne pas empêcher les robots d'exploration de Google de récupérer des fichiers externes et du JavaScript, et peut-être pourquoi Google le supprime des directives de référencement compatibles Ajax. Qui a besoin d’instantanés HTML alors que vous pouvez simplement restituer la page entière ?

Après des tests, nous avons constaté que quel que soit le type de contenu, les résultats sont les mêmes. Par exemple, les images sont analysées et incluses après avoir été chargées dans le DOM. Nous avons même fait un test où nous avons créé un fil d'Ariane en générant dynamiquement les données de structure data-vocabulary.org et en les insérant dans le DOM. Le résultat ? Le fil d'Ariane inséré avec succès apparaît dans la page de résultats du moteur de recherche.

Il convient de noter que Google recommande désormais d'utiliser le balisage JSON-LD pour former des données structurées. Je suis sûr qu'il y aura plus de choses basées sur cela à l'avenir.

4. Insérer dynamiquement des métadonnées et des éléments de page

Nous insérons dynamiquement diverses balises importantes pour le référencement dans le DOM :

Élément de titre

Méta description

Méta robots

Balises canoniques

Résultats : Dans tous les cas, les balises ont été explorées et se sont comportées comme des éléments du code source HTML.

Une expérience complémentaire intéressante pour nous aider à comprendre la priorisation. Lorsqu’il y a des signaux contradictoires, lequel gagne ? Que se passera-t-il s'il y a des balises noindex et nofollow dans le code source et des balises noindex et follow dans le DOM ? Comment l'en-tête de réponse HTTP x-robots se comporte-t-il comme une autre variable dans ce protocole ? Cela fera partie des futurs tests complets. Cependant, nos tests montrent que lorsqu'un conflit survient, Google ignore les balises du code source au profit du DOM.

5. Un exemple important avec rel="nofollow"

Nous voulions tester comment Google gère l'attribut nofollow apparaissant au niveau du lien dans le code source et le DOM. On crée donc un contrôle sans nofollow appliqué.

Pour nofollow, nous testons séparément le code source par rapport aux annotations générées par DOM.

Le nofollow dans le code source fonctionne comme prévu (le lien n'est pas suivi). Cependant, nofollow dans le DOM échoue (le lien est suivi et la page est incluse). Pourquoi? Car la modification de l'élément href dans le DOM arrive trop tard : Google est prêt à explorer le lien et met l'URL en file d'attente avant d'exécuter la fonction JavaScript qui ajoute rel="nofollow". Cependant, si un élément avec href = "nofollow" est inséré dans le DOM, le nofollow et le lien seront suivis puisqu'ils sont insérés en même temps.

Résultats

Historiquement, les recommandations SEO de toutes sortes ont consisté à se concentrer sur le contenu « texte uniquement » autant que possible. Et le contenu généré dynamiquement, les liens AJAX et JavaScript peuvent nuire au référencement des principaux moteurs de recherche. Apparemment, ce n'est plus un problème pour Google. Les liens JavaScript se comportent comme des liens HTML normaux (ce n'est que la surface, et nous ne savons pas ce qui se passe dans les coulisses).

Les redirections JavaScript sont traitées de la même manière que les redirections 301.

Le contenu inséré dynamiquement, même les balises méta telles que les annotations canoniques rel, sont traités de la même manière que ce soit dans le code source HTML ou lorsque JavaScript est déclenché pour générer le DOM après l'analyse du code HTML initial.

Google s'appuie sur sa capacité à restituer entièrement la page et à comprendre le DOM, pas seulement le code source. C'est vraiment incroyable ! (N'oubliez pas d'autoriser les robots d'exploration de Google à récupérer ces fichiers externes et JavaScript.)

Google a innové à un rythme alarmant, laissant les autres moteurs de recherche derrière lui. Nous espérons voir le même type d’innovation dans d’autres moteurs de recherche. S’ils veulent rester compétitifs et réaliser des progrès substantiels dans la nouvelle ère du Web, cela signifie une meilleure prise en charge du HTML5, du JavaScript et des sites Web dynamiques.

Pour le référencement, ceux qui n'ont pas compris les concepts de base ci-dessus et la technologie Google devraient bien étudier et apprendre pour rattraper leur retard sur la technologie actuelle. Si vous ne tenez pas compte du DOM, vous risquez de perdre la moitié de votre part.

Recommandations associées :

Résumé des méthodes JavaScript pour parcourir des tableaux

Comment JavaScript crée-t-il un tableau ?

Tutoriel de base pour démarrer avec JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!