Le JavaScript et le SEO ne vont pas toujours bien ensemble. Les robots des moteurs de recherche, y compris Googlebot, ne pouvaient pas explorer le Javascript, ils ne pouvaient donc pas voir le contenu incorporé avec JavaScript. Désormais, Google et les autres moteurs de recherche peuvent explorer et afficher le code JavaScript. Dans cet article, nous vous montrons comment implémenter JavaScript pour vous assurer que votre référencement n’est pas affecté.
Plan de l'article
Les moteurs de recherche peuvent-ils explorer JavaScript ?
Que les moteurs de recherche puissent explorer JavaScript ou non n’est pas une réponse simple. L’utilisation de JavaScript pour la conception et la fonctionnalité est toujours associée à un certain risque. Ce risque est que les robots d’exploration interprètent mal le contenu et génèrent des résultats que vous n’aviez pas prévus.
A lire également : Comment mesurer la vitesse d'une page ?
Google est le moteur de recherche qui peut traiter avec JavaScript. . « Bing » peut aussi maintenant explorer et rendre JavaScript. Aux États-Unis par exemple, Google et Bing combinés ont une part de marché de plus de 90%, mais il y a beaucoup plus de robots qui peuvent être rampé votre site Web, tels que Facebook ou SEO crawlers. Beaucoup de ces robots ne peuvent pas gérer JavaScript. Les outils Backlink peuvent ne pas être capables de reconnaître les liens sur votre page Web, ou les robots d’exploration peuvent ne pas être capables de créer un sitemap XML. Google est plus en avance sur de nombreux autres fournisseurs de JS crawling.
BING limite les capacités de rendu de ses bots par rapport à JavaScript lui-même. Cependant, bingbot ne supporte pas nécessairement tous les mêmes frameworks JavaScript qui sont supportés dans la dernière version de votre navigateur moderne préféré. C’est pourquoi BING recommande l’utilisation du « rendu dynamique ». Google conseille également aux webmasters dont le contenu JavaScript change rapidement d’utiliser le rendu dynamique.
Lire également : L’approche de "Panda Update"
Même s’il existe une série de tests prouvant que Google peut très bien lire JavaScript, cela n’en dit pas long sur la pratique quotidienne de millions de sites qui utilisent JS. Cela ne devrait pas vous effrayer de JavaScript, mais du point de vue SEO, il doit être utilisé avec prudence.
Est-ce que JavaScript augmente le temps de chargement d’un site Web ?
Les sites Web JavaScript doivent d’abord être rendus par un client ou un bot pour qu’ils puissent être affichés. Ce rendu prend du temps, par conséquent, les sites JavaScript ont un temps de chargement plus long que les sites purement HTML, mais avec certains outils, que nous allons voir dans la section suivante, les temps de chargement peuvent être optimisés même avec JavaScript. Dans cet article, Andy Favell de searchenginewatch montre comment JavaScript prolonge le temps de chargement des sites Web mobiles.
Si JavaScript est utilisé sous la forme d’un code de suivi ou d’un autre code provenant de tiers, vous devez autoriser le chargement asynchrone du code à la fin, afin que la vitesse de la page ne soit pas affectée.
Comment Google voit-il JavaScript ?
Google a annoncé dans le blog central du webmaster en octobre 2015 que le moteur de recherche est capable de rendre et de comprendre les sites Web et les navigateurs modernes, y compris JavaScript et CSS. Dans les directives mises à jour pour les webmasters, il est recommandé qu’aucun composant important du site, y compris ceux en JavaScript ou CSS, ne soit exclu du crawling via le fichier robots.txt. Dans le même billet de blog, Google indique qu’il préfère le principe de l’amélioration progressive, une approche impliquant l’amélioration successive des sites HTML. Cependant, JavaScript serait toujours crawlé et rendu.
Essentiellement, Google est le meilleur moteur de recherche quand il s’agit de traiter avec JavaScript. Cependant, vous ne devez pas développer vos sites Web exclusivement basés sur JavaScript, mais utiliser des éléments JS.
En octobre 2018, dans une réponse sur Reddit, John Mueller a souligné que JavaScript deviendrait de plus en plus important dans les années à venir. Il donne même aux moteurs de recherche l’astuce de se concentrer davantage sur JavaScript et les mesures SEO associées : « Si vous êtes passionné par le référencement technique, alors au-delà du HTML, vous allez avoir besoin de comprendre de plus en plus JS.
Google lui-même a promu des projets tels que Google AMP et Progressive Web Apps (PWA), qui se concentrent moins sur JavaScript, et beaucoup plus sur HTML et HTML5. AMP n’autorise que le JavaScript asynchrone.
Lors de la conférence des développeurs de Google en mai 2018, Tom Greenaway de Google a annoncé que le Googlebot dispose de son propre moteur de rendu qui peut gérer JavaScript dès que le robot détecte JS sur un site Web. Cependant, comme le rendu JavaScript nécessite de nombreuses ressources, M. Greenaway indique que Google a cessé de rendre les ressources JS jusqu’à ce que Googlebot soit équipé des ressources nécessaires. Par conséquent, il est possible que Google indexe un site Web avant que le rendu ne soit terminé. Ce n’est que lorsque le processus de rendu final est terminé que le Googlebot commence une nouvelle tentative de rendu du contenu du côté client.
Selon le SEM post, John Mueller a ajouté plus tard lors de la même conférence des développeurs que le nouveau contenu intégré avec JavaScript prend plus de temps à être indexé.
Pourquoi est-il difficile pour les moteurs de recherche d’explorer JavaScript ?
Il est difficile pour les moteurs de recherche d’explorer JavaScript en raison de la capacité de calcul. Le HTML, qui fonctionne avec PHP, CSS et d’autres technologies, peut être lu directement par un crawler, dans ce cas, le code source est rendu immédiatement lorsque l’URL est appelée.
Avec JavaScript, cet accès direct n’est pas possible. Tout d’abord, le robot doit analyser le DOM (Document Object Model). Le code du DOM est chargé et listé, et ce n’est que lorsque cela est fait que le site web peut être rendu. Chaque navigateur le fait automatiquement lors de la navigation sur le Web. Si vous souhaitez tester JavaScript, vous pouvez utiliser des navigateurs dits « headless ». Il s’agit d’un navigateur sans interface de l’utilisateur graphique qui est exploité par une ligne de commande.
5 règles pour JavaScript et SEO
- Pour que le contenu JavaScript ait un sens pour les moteurs de recherche, le contenu doit pouvoir être indexé dans l’événement de chargement.
- Le contenu dépendant des événements où l’utilisateur n’est pas indexé.
- Les sites JS nécessitent une URL indexable avec prise en charge côté serveur.
- Les mêmes meilleures pratiques SEO utilisées pour les sites HTML s’appliquent au rendu des sites JS.
- Il ne doit pas y avoir de contradiction entre les versions HTML et JavaScript du site Web.
Notions de base pour le développement de sites Web JavaScript
JavaScript est souvent plus complexe que HTML. Pour réaliser ce qui est le plus important pour le référencement, vous devez d’abord essayer de comprendre comment JavaScript fonctionne :
- Demande initiale : le navigateur et le robot du moteur de recherche lancent une requête GET pour le code HTML du site et de ses actifs affiliés.
- Rendu DOM : le site de script JS livre le DOM (Document Object Model) au navigateur ou au bot. Le document montre comment le contenu sera formé sur le site Web et quels sont les liens entre les différents éléments du site. Le navigateur rend ces informations visibles et utilisables par l’utilisateur.
- Charge IDOM : pendant le traitement du site cible, le navigateur déclenche des événements qui appartiennent au DOM ContentLoaded. Le document HTML initial est ensuite chargé et stocké. Le navigateur ou le bot est maintenant prêt à implémenter des éléments JavaScript.
- Implémentation JavaScript : les éléments JavaScript peuvent désormais modifier le contenu ou les fonctions du site Web sans que le code source HTML ne doive être modifié, supprimé ou étendu.
- Événement de chargement : dès que les ressources et les ressources JS qui en dépendent sont chargées, le navigateur démarre le chargement et le site est terminé.
- Événements postérieurs au chargement : après le chargement du site JS, d’autres contenus ou éléments fonctionnels peuvent être modifiés ou adaptés par l’utilisateur.
Les moteurs de recherche tels que Google utilisent des navigateurs sans tête pour simuler l’accès à un navigateur traditionnel. Contrairement au navigateur « normal », le navigateur sans tête appelle le code via le DOM pour afficher un site Web à partir de celui-ci. De cette façon, le Googlebot peut, par exemple, vérifier quels éléments JavaScript s’insère afin de modifier le site HTML. Après le rendu, le Googlebot peut analyser et indexer les éléments rendus comme une source HTML.
Avec JavaScript, il existe deux versions pour les crawlers, le code HTML pré-DOM et le code HTML post-DOM rendu.
Événements importants de JavaScript qui ont une influence sur le référencement
Les événements de chargement et les événements utilisateur peuvent clairement influencer votre référencement. Voilà pourquoi :
- Événement de chargement : l’événement de chargement est « déclenché » par le navigateur lorsqu’un site est complètement chargé. Les robots des moteurs de recherche imitent les navigateurs courants lors du rendu JavaScript. L’événement de chargement est donc important pour eux , il leur permet de prendre un instantané du contenu rendu. Les événements chargés après que l’événement de chargement ait été déclenché ne seront pas pris en compte par l’exploration JavaScript, et ne seront donc pas indexés, car JavaScript peut rapidement changer le contenu du site. C’est particulièrement le cas pour les sites d’actualités ou les flux des réseaux sociaux, tels que Twitter et Facebook. La durée du DOM ContentLoaded peut être mesurée avec l’outil de développement Google
- Événements utilisateur : après l’événement de chargement, d’autres événements peuvent être déclenchés via JavaScript. Parmi ceux-ci, on trouve par exemple les « onClick-Events ». Il s’agit d’événements déclenchés par l’utilisateur, tels que la restriction du contenu du site ou la navigation interactive. Cependant, ce contenu, qui est créé ou modifié par des événements utilisateurs, n’est généralement pas indexé par les moteurs de recherche, car il a lieu après l’événement de chargement.
Erreurs que vous devriez éviter avec JavaScript
Si vous utilisez JavaScript sur votre site web, Google peut maintenant rendre les éléments après l’événement de chargement assez bien, et peut finalement lire et indexer l’instantané comme un site HTML traditionnel.
La plupart des problèmes avec JavaScript et SEO résultent d’une implémentation incorrecte. De nombreuses meilleures pratiques de référencement courantes peuvent donc également être utilisées pour le référencement en JavaScript. Ce sont quelques-unes des erreurs les plus courantes qui peuvent se produire :
- URLs indexables : chaque site Web nécessite des URL uniques et distinctifs afin que les sites puissent être indexés. Un pushState, tel qu’il est créé avec JavaScript, ne génère cependant pas d’URL. Par conséquent, votre site JavaScript a également besoin de son propre document web qui peut donner un code d’état 200 OK comme réponse serveur à une requête client ou bot. Chaque produit présenté avec JS (ou chaque catégorie de votre site web réalisée avec JS) doit donc être équipé d’une URL côté serveur afin que votre site puisse être indexé.
- pushState errors : Avec la méthode pushState, les URL JavaScript peuvent être modifiées. Par conséquent, vous devez absolument vous assurer que l’URL d’origine est relayée par le support côté serveur. Sinon, vous risquez de dupliquer le contenu.
- Métadonnées manquantes : Avec l’utilisation de JavaScript, de nombreux webmasters ou SEO oublient les bases et ne transfèrent pas les métadonnées au bot. Cependant, les mêmes normes SEO s’appliquent au contenu JavaScript et aux sites HTML. Pensez donc au titre et à la méta description des balises ALT pour les images.
- href et img src : Le Googlebot a besoin de liens qu’il peut suivre pour trouver d’autres sites. Par conséquent, vous devez également fournir des liens avec les attributs href- ou src- dans vos documents JS.
- Créez des versions unifiées : Grâce au rendu de JavaScript, des versions preDOM et postDOM apparaissent. S’assurer, si possible, qu’aucune contradiction ne s’y glisse et, par exemple, que les balises canoniques ou les paginations puissent être correctement interprétées. De cette façon, vous éviterez l’occultation.
- Créer un accès pour tous les robots : Tous les robots ne peuvent pas gérer JavaScript comme le Googlebot. Il est donc recommandé de placer le titre, les méta-informations et les balises sociales dans le code HTML.
- Ne désactivez pas JS sur robots.txt : Assurez-vous que votre JavaScript peut également être parcouru par le Googlebot. Pour cela, les répertoires ne doivent pas être exclus dans le fichier robots.txt.
- Utilisez un plan du site actuel : Afin de montrer à Google les changements possibles dans le contenu de JS, vous devez toujours garder l’attribut « lastmod » à jour dans votre sitemap XML.
Vérifiez les sites Web JavaScript: Que faire lors d’une vérification ?
L’audit d’un site Web de JS est avant tout une inspection manuelle d’éléments individuels.
Pour vérifier votre JavaScript, vous pouvez utiliser les outils Google Developer Tools de Google Chrome ainsi que le Web Developer Expansion for Chrome.
Contrôle visuel
Pour avoir une idée de la façon dont un visiteur verra un site Web, vous devez diviser le contenu sur le site en :
- contenu visible sur le site ;
- contenu qui nécessite une interaction ;
- contenu caché ;
- contenu provenant de tiers, comme les cotes d’écoute ;
- contenu contenant des recommandations sur les produits.
De cette façon, vous pouvez limiter la sélection aux éléments qui peuvent être réalisés avec JavaScript. Vous devriez vérifier les éléments JavaScript dans le but de rendre ces éléments crawlables.
Vérifier le code HTML
Avec les outils de développement Web, vous pouvez désactiver les CSS, JavaScript et les cookies. Vous pouvez voir ce qui manque sur le site dans le code restant. Ces éléments sont contrôlés par JavaScript.
Ensuite, vous pouvez contrôler les méta-éléments tels que le titre et la description du site Web. Pour que les robots puissent indexer ces éléments, ils doivent être accessibles via l’événement load. En général, cependant, seul Google peut actuellement lire ces éléments. Il est donc recommandé d’écrire des balises title et meta dans le code HTML même avec des sites JS.
Vérifier le rendu HTML
Chargez à nouveau le site avec JavaScript et CSS désactivés. Enfin, faites un clic droit sur le site et choisissez « Examiner l’élément » dans le menu Chrome. Sur le côté droit, une autre fenêtre apparaîtra. Cliquez sur la balise HTML. Avec un clic droit, un menu d’options apparaît. Choisissez ici « Copier HTML externe ». Enfin, insérez le code dans un éditeur. Ce code peut ensuite être indexé par les moteurs de recherche tels que Google.
L’ancienne version de la console de recherche Google offre une opportunité supplémentaire de tester vos sites JS. La nouvelle interface n’offre pas encore de fonction similaire (en date de février 2019). Une condition préalable à l’inspection de votre site Web est que votre domaine soit enregistré et confirmé dans la console de recherche. Dans la console de recherche, cliquez d’abord sur « Crawling » puis sur « Fetch as Google ». Enfin, insérez le répertoire qui doit être édité et cliquez sur « Récupérer et rendre ».
Google vous montre alors les problèmes possibles dans le rendu de votre site et vous signale les éléments JavaScript manquants ou bloqués par le crawling.
Autres éléments à prendre en considération
- URLs indexables : pour qu’un site Web soit indexé et classé, il a besoin d’une URL indexable. Si votre site Web utilise des versions de JavaScript qui ne peuvent pas être appelées via leur propre URL, il n’est pas possible pour les moteurs de recherche d’indexer ce site. Si une URL existe mais ne peut pas être liée en code JS, le site ne peut pas non plus être classé.
- pushState : si une URL incorrecte est produite par un pushState, du contenu dupliqué peut apparaître. Par conséquent, assurez-vous de vérifier les liens internes qui sont créés avec JavaScript.
- Attributs des données : sur les sites JS, d’autres ressources telles que des images peuvent être stockées dans les attributs de données. Cependant, en général, ces ressources ne peuvent pas être chargées, rendues et indexées par les robots. Il est donc recommandé d’incorporer des ressources, telles que des images, traditionnellement via HTML.
Outils pratiques
Il existe divers outils que vous pouvez utiliser pour éditer, créer ou vérifier votre contenu JavaScript.
- prerender.io
prerender.io est un logiciel open-source qui optimise le rendu d’un site JS. Grâce à cela, le site est mis en cache après le rendu et peut être remonté plus rapidement lorsqu’un bot y accède.
- Brombone
Ce programme télécharge votre site Web et le rend dans un navigateur Web, ce qui signifie que vous pouvez facilement vérifier si les récupérations AJAX et JavaScript fonctionnent correctement. Les changements de DOM peuvent être testés de la même manière. Si le rendu fonctionne, ces sites sont stockés en HTML. Si un crawler accède à votre site, vous pouvez autoriser que les sites JS rendus soient émis par un proxy de Brombone. Afin d’implémenter correctement l’outil, vous avez également besoin d’un sitemap XML.
- ANGULAIRE JS
Avec Angular JS, les snapshots HTML peuvent être pré-rendus pour que le Googlebot puisse plus rapidement saisir et indexer les sites JS.
- SEO.JS
Avec ce programme, le code JS est également rendu en HTML et rendu accessible par Google. Le code du programme est ainsi transféré sur votre serveur. Avoir votre propre tableau de bord vous aidera à gérer ceux de vos éléments JS et des sites qui doivent être rendus. De plus, l’outil crée un sitemap XML avec vos sites JS.
- Console de recherche Google
Avec l’ancienne version de la console de recherche, Google vous aide à vérifier les éléments JS en rendant des sites individuels. L’outil montre également des problèmes potentiels de rampement.
- Isomorphes JavaScript
Avec JavaScript isomorphe, les applications peuvent être exécutées par le serveur ou le client. Le back-end et le front-end partagent donc le même code. En implémentant le rendu manquant, JavaScript est moins sujet aux erreurs en matière de référencement.
- Ryte
De nombreux outils de référencement sont maintenant capables d’explorer JavaScript pour donner aux utilisateurs une analyse plus complète de leurs sites. Depuis février 2019, le crawler Ryte est également capable de rendre et de parcourir JavaScript et CSS en utilisant un navigateur Chrome optimisé. Il exécute le JavaScript sur chaque page pendant un maximum de 30 secondes, de sorte que tous les éléments qui sont déclenchés lorsque la page est chargée pour la première fois sont rendus et explorés. Vous en saurez plus dans cet article.
Conclusion
JavaScript peut énormément étendre les fonctionnalités de votre site Web. Cependant, il y a beaucoup de choses que vous devez prendre en compte pour vous assurer que JavaScript s’intègre dans votre stratégie de référencement. Parfois, il est plus logique d’utiliser l’amélioration progressive plutôt que de construire un site uniquement avec JavaScript, en particulier lorsque l’on considère AMP ou des applications web progressives. Vous devriez également utiliser les outils disponibles pour vous aider à créer, modifier ou vérifier les éléments JavaScript de votre site.
Javascript SEO : quels sont les éléments utilisés par votre site web ?
Quand on parle de JavaScript et de SEO, cela peut bien souvent virer au cauchemar, comme vous l’avez bien compris… Et pourtant, il se trouve que si de plus en plus de développeurs se tournent vers le JavaScript pour développer des sites web, on comprend bien que cette problématique va devoir être prise en compte au plus tôt pour éviter un référencement naturel plus que catastrophique ! Toutefois, si vous n’avez aucune idée comment le javascript seo peut impacter votre site web, il est indispensable de bien comprendre les différents éléments qui peuvent être utilisés avec cette solution technique. Concrètement, cela peut concerner :
- la pagination d’un listing de produits ou d’articles
- des contenus dynamiques qui n’apparaissent que sous certaines conditions
- des témoignages de clients ou de consommateurs d’un produit en particulier
- les commentaires pour un blog
- le maillage interne dans certains cas
Parmi toutes ces solutions, il y en a forcément au moins une qui doit vous concerner ! Par conséquent, si vous n’intégrez pas de solution qui prenne en compte le SEO avec le JavaScript, vous pourriez bien avoir une mauvaise surprise par la suite si vous n’y prêtez pas attention…
