Fermer

avril 2, 2019

Comment diagnostiquer et résoudre les problèmes de référencement JavaScript en 6 étapes


Il est assez courant pour les entreprises de créer leurs sites Web à l’aide de frameworks JavaScript modernes et de bibliothèques comme React, Angular ou Vue. Il est maintenant évident que le Web s'est éloigné du langage HTML et est entré dans l'ère de J.-S.

Bien qu'il n'y ait rien d'inhabituel dans le cas d'une entreprise prête à tirer parti des technologies les plus récentes, nous devons nous attaquer à la dure réalité de ce tendance: la plupart des migrations vers les frameworks JavaScript ne sont pas planifiées avec le trafic organique ou d'utilisateurs en tête.

Appelons-le le paradoxe JavaScript:

  1. Les grandes marques sautent dans le train à la mode JavaScript après avoir entendu tout le buzz sur Les frameworks JavaScript créant des UX étonnants.
  2. La réalité révèle que les frameworks JavaScript sont vraiment complexes.
  3. Les grandes marques simplifient complètement les migrations vers JavaScript. Ils perdent du trafic organique et doivent souvent faire des économies au lieu de créer cet incroyable voyage UX pour leurs utilisateurs (je citerai quelques exemples dans cet article).

Puisqu'il n'y a pas de retour en arrière, les SEO doivent apprendre à gérer les sites Web JavaScript. .

Mais c’est plus facile à dire qu’à faire car le succès des sites Web JavaScript dans les moteurs de recherche est un véritable défi pour les développeurs et les référenceurs.

Cet article se veut un suivi de mon Ultimate Guide to JavaScript SEO et il est conçu pour être aussi facile à suivre que possible. Alors, prenez une tasse de café et amusons-nous – voici six étapes pour vous aider à diagnostiquer et à résoudre les problèmes de référencement JavaScript.

Étape 1: Utilisez l'outil de contrôle des URL pour voir si Google peut afficher votre contenu

. L'outil d'inspection d'URL (anciennement Google Fetch and Render) est un excellent outil gratuit qui vous permet de vérifier si Google peut restituer correctement vos pages.

L'outil d'inspection d'URL nécessite que votre site Web soit connecté à Google Search Console. Si vous n'avez pas encore de compte, consultez la page d'aide de Google .

Ouvrez la console Google Search Console puis cliquez sur le bouton d'inspection d'URL.


Dans le formulaire d'URL champ, tapez l'URL complète de la page à auditer.

Cliquez ensuite sur TEST LIVE URL.

Une fois le test terminé, cliquez sur VIEW TESTED PAGE.

Et enfin, cliquez sur l'onglet Capture d'écran pour afficher la page rendue.

Faites défiler la capture d'écran pour vous assurer que votre page Web est correctement rendue. Posez-vous les questions suivantes:

  • Le contenu principal est-il visible?
  • Google peut-il voir les commentaires générés par l'utilisateur?
  • Google peut-il accéder à des zones telles que des articles et produits similaires?
  • Google peut-il voir d'autres éléments cruciaux de votre page?

Pourquoi la capture d'écran est-elle différente de ce que je vois dans mon navigateur? Voici quelques raisons possibles:

Étape 2: assurez-vous de ne pas bloquer les fichiers JavaScript par erreur

Si Google ne peut pas restituer correctement votre page, vous devez vous assurer que vous n'avez pas bloqué des fichiers JavaScript importants pour Googlebot dans des robots. .txt

TL; DR: Définition du fichier robots.txt

Il s’agit d’un fichier texte qui indique à Googlebot ou à tout autre moteur de moteur de recherche s’il est autorisé à demander une page / ressource.

Heureusement, l’URL L'outil d'inspection pointe toutes les ressources d'une page rendue qui sont bloquées par robots.txt.

Mais comment savoir si une ressource bloquée est importante du point de vue du rendu?

Vous avez deux options: Basique et Avancé.

Basique

Dans la plupart des cas, il peut être judicieux de demander simplement à vos développeurs. Ils ont créé votre site Web, alors ils devraient bien le connaître.

Évidemment, si le nom d'un script s'appelle content.js ou productListing.js, il est probablement pertinent et ne doit pas être bloqué.

Malheureusement, comme pour Maintenant, l'inspection d'URL ne vous informe pas sur la gravité d'un fichier JS bloqué. Les versions précédentes de Google Fetch et Render offraient une telle option:

Avancé

Nous pouvons maintenant utiliser les outils de développement Chrome à cette fin.

À des fins pédagogiques, nous allons vérifier l'URL suivante: http: / /botbenchmarking.com/youshallnotpass.html

Ouvrez la page dans la version la plus récente de Chrome et accédez à Outils pour les développeurs Chrome. Passez ensuite à l'onglet Réseau et actualisez la page.

Enfin, sélectionnez la ressource souhaitée (dans notre cas, c'est YouShallNotPass.js), cliquez avec le bouton droit de la souris et choisissez Bloquer l'URL de la demande.

Actualisez la page pour voir si elle existe. contenu important a disparu. Si tel est le cas, envisagez de supprimer la règle correspondante de votre fichier robots.txt.

Étape 3: utilisez l'outil d'inspection des URL pour corriger les erreurs JavaScript

Si vous voyez que Google Fetch et le rendu ne rendent pas votre page. cela peut être dû aux erreurs de JavaScript survenues lors du rendu.

Pour le diagnostiquer, cliquez sur l'onglet Plus d'infos dans l'outil Inspection des URL. Cliquez ensuite sur l'onglet Plus d'informations.

Ensuite, montrez ces erreurs à vos développeurs pour les laisser réparer. .

UNE SEULE erreur dans le code JavaScript peut arrêter le rendu pour Google, ce qui rend votre site Web non indexable.

Votre site Web fonctionnera sans problème dans les navigateurs les plus récents, mais s’il se bloque avec les anciens navigateurs (Google Web Rendering). Le service est basé sur Chrome 41 ), votre classement sur Google pourrait chuter.

  • Une seule erreur dans la documentation angulaire officielle a empêché Google de rendre notre site Web angulaire de test.
  • Il était une fois Google déindexé de manière mes pages de Angular.io, un site officiel de Angular 2 +.

Si vous voulez savoir pourquoi cela s’est passé, lisez mon Guide ultime du référencement par JavaScript .

Note latérale: Si pour certains Si vous ne souhaitez pas utiliser l'outil d'inspection d'URL pour le débogage des erreurs JavaScript, vous pouvez utiliser Chrome 41.

Personnellement, je préfère utiliser Chrome 41 à des fins de débogage, car il est plus universel et offre plus de flexibilité. Cependant, l'outil d'inspection d'URL permet de simuler plus précisément le service de rendu Web de Google, raison pour laquelle je le recommande aux personnes novices en matière de référencement JavaScript.

Étape 4: vérifiez si votre contenu a été indexé dans Google

. Il ne suffit pas de voir si Google peut rendre votre site Web correctement. Vous devez vous assurer que Google a correctement indexé votre contenu. La meilleure option consiste à utiliser le site: commande.

C’est un outil très simple et très puissant. Sa syntaxe est assez simple: site: [URL of a website] “[fragment to be searched]”. Sachez simplement que vous souhaitez vérifier si Google a indexé le texte suivant "Développer sur toutes les plates-formes" figurant sur la page d'accueil d'Angular.io.

Tapez la commande suivante dans Google: site: angular.io "DÉVELOPPER SUR TOUTES LES PLATEFORMES"

Comme vous pouvez le constater, Google a indexé ce contenu, ce que vous souhaitez, mais ce n'est pas toujours le cas.

A emporter:

  • Utilisez la commande site: autant que possible
  • Vérifiez différents modèles de page pour vous assurer que tout votre site Web fonctionne correctement. Ne vous arrêtez pas à une page!

Si tout va bien, passez à l’étape suivante. Si ce n’est pas le cas, cela peut être dû à plusieurs raisons:

  • Google n’a toujours pas rendu votre contenu. Cela devrait arriver jusqu'à quelques jours / semaines après la visite de l'URL par Google. Si les caractéristiques de votre site Web exigent que votre contenu soit indexé le plus rapidement possible, mettez en œuvre le SSR.
  • Google a rencontré des délais d'expiration lors du rendu d'une page . Vos scripts sont-ils rapides? Restent-ils réactifs lorsque la charge du serveur est élevée?
  • Google demande toujours d'anciens fichiers JS. Eh bien, Google essaie de mettre beaucoup en cache pour économiser sa puissance de calcul. Ainsi, les fichiers CSS et JS peuvent être mis en cache de manière agressive. Si vous constatez que vous avez corrigé toutes les erreurs JavaScript et que Google ne peut toujours pas restituer votre site Web correctement, cela est peut-être dû au fait que Google utilise d'anciens fichiers JS et CSS mis en cache. Pour contourner ce problème, vous pouvez incorporer un numéro de version dans le nom du fichier, par exemple, nommez-le bundle3424323.js. Pour en savoir plus, consultez les guides Google sur la mise en cache HTTP .
  • Lors de l'indexation, Google peut ne pas extraire certaines ressources si elles estiment ne pas contribuer au contenu essentiel de la page.

Étape 5: Assurez-vous que Google peut détecter vos liens internes

Il y a quelques règles simples à suivre:

  1. Google a besoin de liens appropriés pour connaître les URL sur votre site Web.
  2. Si vos liens sont ajoutés au DOM Google ne le verra pas seulement lorsque quelqu'un cliquera sur un bouton.

Aussi simple que cela puisse paraître, de nombreuses grandes entreprises commettent ces erreurs.

Structure de lien appropriée

Googlebot, afin de parcourir un site Web, doit avoir des liens traditionnels «href». Si cela n’est pas fourni, beaucoup de vos pages Web seront tout simplement inaccessibles pour Googlebot!

Je pense que cela a été expliqué par Tom Greenway (un représentant de Google) lors de la conférence Google I / O:

Veuillez noter: si vous avez Les liens appropriés avec quelques paramètres supplémentaires, tels que onClick, data-url, ng-href, sont encore acceptables pour Google.

Une erreur courante commise par les développeurs: Googlebot ne peut pas accéder à la seconde et aux suivantes. pages de pagination

Ne pas laisser Googlebot découvrir les pages de la deuxième page de pagination et au-delà est une erreur courante des développeurs.

Lorsque vous ouvrez les versions mobiles de Gearbest, Aliexpress et IKEA, vous remarquerez rapidement qu'en fait, ils ne laissent pas Googlebot voir les liens de pagination, ce qui est vraiment étrange. Si Google active la première indexation mobile de ces sites Web, ceux-ci en souffriront.

Si vous n'avez pas déjà téléchargé Chrome 41, procurez-vous-le sur Ele.ph/chrome41.

Naviguez ensuite vers n'importe quelle page. Pour l’aide du didacticiel, j’utilise la version mobile de AliExpress.com. Vous pouvez suivre le même exemple à des fins pédagogiques.

Ouvrez la version mobile de la catégorie Téléphones portables de Aliexpress .

. Cliquez ensuite sur le bouton droit de la souris pour afficher plus et sélectionnez le bouton inspecter. pour voir comment cela est mis en œuvre.

Comme vous pouvez le constater, il n'y a pas de liens ni pointant vers la deuxième page de la pagination.

Il y a plus de 2 000 produits dans la catégorie téléphone portable. sur Aliexpress.com. Étant donné que Googlebot pour mobile n’a accès qu’à 20 d’entre eux, il ne reste que 1%!

Cela signifie que 99% des produits de cette catégorie sont invisibles pour Googlebot pour mobile! C'est fou!

Ces erreurs sont causées par une mauvaise implémentation du chargement paresseux. Il existe de nombreux autres sites Web qui font des erreurs similaires. Vous pouvez en savoir plus dans mon article « Les sites Web populaires susceptibles d’échouer lors de l’indexation du premier mobile ».

TL; DR: l’utilisation du lien rel = ”next” est un signal trop faible pour Google

Remarque: il est courant d'utiliser «link rel =» next »pour indiquer une série de pagination. Cependant, les découvertes de Kyle Blanchette semblent montrer que le lien "lien = suivant" seul est un signal trop faible pour Google et devrait être renforcé par les liens traditionnels .

John Mueller en a parlé davantage:

«Nous pouvons comprendre quelles pages appartiennent à rel next, rel =« previous », mais s'il n'y a aucun lien sur la page, il nous est vraiment difficile de parcourir les pages d'une page à l'autre . (…) Donc, utiliser rel = ”next” rel = ”previous” dans la tête d'une page est une excellente idée de nous dire comment ces pages sont connectées, mais vous avez vraiment besoin d'avoir sur la page, liens HTML normaux .

Ne vous méprenez pas, il n’ya rien de mal à utiliser. Au contraire, ils sont utiles, mais il est bon de combiner ces balises avec des liens traditionnels .

Vérifier si Google peut voir les liens de menu

Une autre étape importante dans l'audit d'un site Web JavaScript est de s'assurer que Google peut le voir. vos liens de menu. Pour vérifier cela, utilisez Chrome 41 .

Pour les besoins de ce didacticiel, nous allons utiliser le cas de Target.com :

Pour commencer, ouvrez n’importe quel navigateur et choisissez des liens dans le menu. :

Ensuite, ouvrez Chrome 41 . Dans les outils de développement de Chrome (cliquez sur Ctrl + Maj + J), accédez à l'onglet Éléments.

Les résultats? Heureusement, Google peut récupérer les liens de menu de Target.com.

Maintenant, vérifiez si Google peut récupérer les liens de menu de votre site Web et voir si vous êtes également sur la cible.

Étape 6: Vérification de si Google peut découvrir du contenu masqué sous des onglets

J'ai souvent observé que, dans le cas de nombreux magasins de commerce en ligne, Google ne pouvait pas découvrir et indexer leur contenu masqué sous des onglets (descriptions de produits, opinions, produits connexes, etc.). Je sais que c’est bizarre, mais c’est si courant.

C’est une partie cruciale de tout audit SEO que Google puisse voir le contenu caché sous des onglets.

Ouvrez Chrome 41 et accédez à n’importe quel produit sur Boohoo.com; par exemple, Muscle Fit Vest .

Cliquez sur Détails pour afficher la description du produit:

“DETAILS & CARE

94% coton 6% élasthanne. Muscle Fit Vest. Le modèle mesure 6 pi 1 po et porte la taille M britannique. “

Maintenant, il est temps de vérifier si elle se trouve dans le DOM. Pour ce faire, accédez à Outils de développeur Chrome (Ctrl + Maj + J) et cliquez sur l'onglet Réseau. .

Assurez-vous que l'option de désactivation du cache est activée.

Cliquez sur F5 pour actualiser la page. Une fois actualisé, accédez à l'onglet Éléments et recherchez une description du produit:

<a href = "

" >

Comme vous pouvez le constater, Google est en mesure d'afficher la description du produit dans boohoo.com.

Parfait, prenez le temps de vérifier si votre site Web est correct.

En conclusion [19659011] De toute évidence, le référencement JavaScript est un sujet assez complexe, mais j’espère que ce tutoriel vous aura été utile.

Si vous êtes toujours aux prises avec le classement Google, vous voudrez peut-être envisager l’implémentation du rendu dynamique ou du rendu hybride. libre de me contacter sur Twitter à ce sujet ou à d’autres besoins en matière de référencement.




Source link