Si votre travail implique le SEO à un certain niveau, vous avez probablement entendu parler de plus en plus de JavaScript et de ses implications sur l'exploration et l'indexation. Franchement, Googlebot se bat avec elle, et de nombreux sites utilisent le JavaScript moderne pour charger du contenu crucial aujourd'hui. Pour cette raison, nous devons être équipés pour discuter de ce sujet quand il se présente afin d'être efficace.

Le but de cet article est de vous donner les connaissances minimales nécessaires pour le faire. Ce post ne va pas dans les détails, décrire l'histoire, ou vous donner des détails extrêmes sur les détails. Il y a beaucoup de choses incroyables qui font déjà cela – je suggère de leur donner une lecture si vous êtes intéressé à plonger plus profond (je vais relier à mes favoris au fond ).

Pour être des consultants efficaces en matière de JavaScript et de SEO, nous devons être en mesure de répondre à trois questions:

1. Le domaine / la page en question utilise-t-il le JavaScript côté client pour charger / modifier le contenu de la page ou les liens?
2. Si oui, Googlebot voit-il correctement le contenu chargé via JavaScript?
3. , quelle est la solution idéale?

Avec une recherche rapide, j'ai été capable de trouver trois exemples de pages de destination qui utilisent JavaScript pour charger du contenu crucial.

Je vais utiliser la page d'accueil du Symposium de Sitecore à travers chacun de ces points pour illustrer comment répondre aux questions ci-dessus.

Nous aborderons d'abord l'aspect «comment puis-je faire cela?» Et, à la fin, je développerai quelques concepts de base et relierai d'autres ressources.

Question 1: Le domaine en question utilise-t-il le JavaScript côté client pour charger / modifier le contenu de la page ou les liens?

La première étape pour diagnostiquer tout problème impliquant JavaScript est de vérifier si le domaine l'utilise pour charger du contenu crucial qui pourrait avoir un impact sur le référencement (contenu sur la page ou liens). Idéalement, cela se produira chaque fois que vous aurez un nouveau client (lors de l'audit technique initial ), ou chaque fois que votre client redessinera / lancera de nouvelles fonctionnalités du site.

Comment allons-nous faire cela?

Demander au client

Demandez, et vous recevrez! Sérieusement, l'une des choses les plus rapides / les plus faciles que vous pouvez faire en tant que consultant est de contacter votre POC (ou les développeurs sur le compte) et leur demander. Après tout, ce sont les personnes qui travaillent sur le site jour après jour!

"Bonjour [client]nous effectuons actuellement un balayage technique sur le site. Une chose que nous vérifions est si un contenu crucial (liens, contenu de la page) est chargé via JavaScript. Nous ferons quelques tests manuels, mais un moyen facile de confirmer cela est de demander! Pourriez-vous (ou l'équipe) répondre aux questions suivantes, s'il vous plaît?

1. Utilisons-nous du JavaScript côté client pour charger du contenu important?

2. Si oui, pouvons-nous obtenir une liste à puces de l'endroit où / quel contenu est chargé via JavaScript? "

Vérifier manuellement

Même sur un grand site de commerce électronique avec des millions de pages, il n'y a généralement qu'une poignée de modèles de pages importants. Dans mon expérience, cela ne devrait prendre qu'une heure maximum à vérifier manuellement. J'utilise le plugin Chrome Web Developers désactive JavaScript à partir de là, et vérifie manuellement les modèles importants du site (page d'accueil, page de catégorie, page de produit, article de blog, etc.)

Dans l'exemple ci-dessus, une fois que nous avons désactivé JavaScript et rechargé la page, nous pouvons voir que nous regardons une page vierge.

Au fur et à mesure que vous progressez, notez les notes sur le contenu qui n'est pas chargé, qui est mal chargé ou tout lien interne qui ne fonctionne pas correctement.

A la fin de cette étape, nous devrions savoir si le domaine en question repose sur JavaScript pour charger / modifier le contenu de la page ou les liens. Si la réponse est oui, nous devrions aussi savoir où cela se passe (page d'accueil, pages de catégorie, modules spécifiques, etc.)

Crawl

Vous pouvez également explorer le site (avec un outil comme Screaming Frog ou Sitebulb) avec le rendu JavaScript désactivé, puis lancer la même analyse avec JavaScript activé et comparer les différences avec les liens internes et les éléments de la page.

Par exemple, il se peut que lorsque vous explorez le site avec le rendu JavaScript désactivé, les balises de titre n'apparaissent pas. Dans mon esprit cela déclencherait une action pour explorer le site avec le rendu JavaScript activé pour voir si les balises de titre apparaissent (ainsi que de vérifier manuellement).

Exemple

Pour notre exemple, je suis allé de l'avant et j'ai fait une vérification manuelle. Comme nous pouvons le voir sur la capture d'écran ci-dessous, lorsque nous désactivons JavaScript, le contenu ne se charge pas.

En d'autres termes, la réponse à notre première question pour cette page est "Oui, JavaScript est utilisé pour charger des parties cruciales du site."

Question 2: Si oui, Googlebot voit-il correctement le contenu chargé via JavaScript?

Si votre client s'appuie sur JavaScript sur certaines parties de son site Web (dans notre exemple, c'est le cas), il est de notre devoir d'essayer de reproduire la façon dont Google voit la ou les pages. Nous voulons répondre à la question "Est-ce que Google voit la page / le site comme nous le voulons?"

Afin d'obtenir une représentation plus précise de ce que voit Googlebot, nous devons essayer d'imiter la manière dont il explore la page.

Comment faisons-nous cela?

Utilisez le nouvel outil de test convivial de Google

À l'heure actuelle, le moyen le plus rapide et le plus précis d'essayer de reproduire ce que Googlebot voit sur un site est d'utiliser le nouvel outil de convivialité mobile de Google. Mon collègue Dom a récemment écrit un article en profondeur comparant Search Console Fetch et Render, Googlebot, et l'outil de convivialité mobile. Ses conclusions étaient que la plupart du temps, Googlebot et l'outil de convivialité mobile ont abouti à la même sortie.

Dans l'outil de convivialité mobile de Google, saisissez simplement votre URL, cliquez sur "Lancer le test", puis une fois le test terminé, cliquez sur "code source" dans la partie droite de la fenêtre. Vous pouvez prendre ce code et rechercher tout contenu sur la page (balises de titre, canoniques, etc.) ou les liens. Si elles apparaissent ici, Google verra probablement le contenu.

Rechercher un contenu visible dans Google

C'est toujours bon à vérifier. Un autre moyen rapide de vérifier si GoogleBot a indexé du contenu sur votre page est en sélectionnant simplement le texte visible sur votre page, et en faisant un site: recherchez-le dans Google avec des citations autour dudit texte.

Dans notre exemple, il y a du texte visible sur la page qui lit …

"Que vous soyez dans le marketing, le développement des affaires ou l'informatique, vous ressentez un sentiment d'urgence ou peut-être des opportunités?"

Lorsque nous faisons un site: recherchez cette expression exacte, pour cette page exacte, nous n'obtenons rien. Cela signifie que Google n'a pas indexé le contenu.

Ramper avec un outil

La plupart des outils d'exploration ont la fonctionnalité d'analyse JavaScript maintenant. Par exemple, dans Screaming Frog vous pouvez accéder à la configuration> spider> rendu> puis sélectionnez "JavaScript" dans la liste déroulante et cliquez sur Enregistrer. DeepCrawl et SiteBulb ont tous deux cette fonctionnalité.

De là, vous pouvez entrer votre domaine / URL et voir la page / le code rendu une fois que votre outil de choix a terminé l'exploration.

Exemple:

Lorsque je tente de répondre à cette question, je préfère commencer par entrer le domaine dans l'outil de convivialité de Google, copier le code source et rechercher des éléments importants sur la page (par exemple, balise title,

body copy, etc.) Il est également utile d'utiliser un outil comme diff checker pour comparer le HTML rendu avec le HTML original (Screaming Frog a aussi une fonction où vous pouvez le faire côte à côte).

Pour notre exemple, voici ce que nous montre la sortie de l'outil de convivialité mobile.

Après quelques recherches, il devient clair qu'il manque des éléments importants sur la page.

Nous avons également fait le deuxième test et confirmé que Google n'a pas indexé le contenu du corps trouvé sur cette page.

L'implication à ce stade est que Googlebot ne voit pas notre contenu comme nous le voulons, ce qui est un problème.

Allons de l'avant et voyons ce que nous pouvons recommander au client.

Question 3: Si nous sommes convaincus que Googlebot ne voit pas notre contenu correctement, que devrions-nous recommander?

Maintenant, nous savons que le domaine utilise JavaScript pour charger du contenu crucial et nous savons que Googlebot est très probablement ne voyant pas ce contenu, la dernière étape consiste à recommander une solution idéale au client. Mot clé: recommande non implémenté. C'est notre travail à 100% de signaler le problème à notre client, expliquer pourquoi c'est important (ainsi que les implications possibles), et mettre en évidence une solution idéale. 100% n'est pas notre travail pour essayer de faire le travail du développeur de trouver une solution idéale avec leur pile / ressources / etc uniques.

Comment faisons-nous cela?

Vous voulez un rendu côté serveur

La principale raison pour laquelle Google a du mal à voir la page d'atterrissage de Sitecore en ce moment, est que la page d'atterrissage de Sitecore demande à l'utilisateur (nous, Googlebot) de faire le gros travail de chargement du JavaScript sur leur page. En d'autres termes, ils utilisent le JavaScript côté client.

Googlebot atterrit littéralement sur la page, essayant d'exécuter au mieux le code JavaScript, puis ayant besoin de quitter avant d'avoir la possibilité de voir du contenu.

La solution ici est d'avoir à la place le chargement de la page de destination de Sitecore sur leur serveur. En d'autres termes, nous souhaitons enlever Googlebot et le mettre sur les serveurs de Sitecore. Cela garantira que lorsque Googlebot arrive sur la page, il n'a pas besoin de faire de gros efforts et peut à la place explorer le HTML rendu.

Dans ce scénario, Googlebot atterrit sur la page et voit déjà le code HTML (et tout le contenu).

Il existe des options plus spécifiques (comme les configurations isomorphes)

C'est là que ça peut être un peu dans les mauvaises herbes, mais il y a des solutions hybrides. Le meilleur en ce moment est appelé isomorphe.

Dans ce modèle, nous demandons au client de charger la première requête sur son serveur, puis toutes les demandes futures sont effectuées côté client.

Donc, Googlebot arrive sur la page, le serveur du client a déjà exécuté le code JavaScript initial nécessaire à la page, envoie le code HTML rendu au navigateur, et tout ce qui se fait ensuite du côté client.

Si vous cherchez à le recommander comme solution, veuillez lire cet article de l'équipe d'AirBNB qui couvre les configurations isomorphes en détail .

AJAX rampant = pas d'aller

Je n'entrerai pas dans les détails à ce sujet, mais je sais juste que la précédente solution d'exploration AJAX de Google pour JavaScript a depuis été abandonnée et ne fonctionnera finalement pas. Nous ne devrions pas recommander cette méthode.

(Cependant, je suis intéressé d'entendre les études de cas de quelqu'un qui a récemment mis en œuvre cette solution.Comment Google a répondu? Voici un grand article sur ce de mon collègue Rob.)

Résumé

Au risque de simplifier à l'extrême, voici ce que vous devez faire pour commencer à travailler sur JavaScript et le SEO en 2018:

1. Savoir quand / où le domaine de votre client utilise du JavaScript côté client pour charger du contenu sur la page ou des liens.
   
   1. Demandez aux développeurs.
   2. Désactivez JavaScript et effectuez des tests manuels par modèle de page
   3. Explorez en utilisant un crawler JavaScript
2. Vérifiez si GoogleBot voit le contenu comme nous l'avons prévu.
   
   1. Vérificateur d'amabilité mobile de Google
   2. Faire un site: recherche de contenu visible sur la page
   3. Explorer en utilisant un robot d'exploration JavaScript
3. Donner une recommandation idéale au client.
   
   1. Rendu côté serveur
   2. Solutions hybrides (isomorphes).
   3. Not AJAX crawling

Autres ressources

Je suis vraiment intéressé d'entendre parler de vos expériences avec JavaScript et SEO. Quels sont les exemples de choses qui ont bien fonctionné pour vous? Qu'en est-il des choses qui n'ont pas bien marché? Si vous avez implémenté une configuration isomorphe, je suis curieux de savoir comment cela affecte Googlebot sur votre site.