LATEST NEWS
CONTACTS

Bonnes pratiques SEO avec les frameworks JavaScript (React, Vue, Angular, etc.)

Écrit par Search Foresight le 19/11/2020

Consultant En Seo

Début mars, le SEOCamp a accueilli Cédric Rambaud et Philippe Yonnet pour une conférence sur la démarche SEO à adopter face aux sites full JavaScript. Lors de cette conférence, ils ont expliqué comment les moteurs de recherche se comportaient par rapport à ces sites et surtout comment il est possible de se positionner avec cette technologie. Premièrement, malgré sa complexité et son incompatibilité avec les moteurs, la popularité des frameworks JavaScript ne cesse de croître. Ces fonctions prédéfinies présentent de nombreux avantages :

– Technologie moderne offrant un nouveau design et des interfaces riches.
– Plus une application qu'un site Web.
– Amélioration de l'ergonomie et de l'expérience utilisateur.
– Une seule langue pour créer un site.
Mais qu'en est-il de nous les référenceurs?

Exploitation des infrastructures JavaScript.

Contrairement à un site classique qui suit le modèle de communication client-serveur, une application basée sur JavaScript (Ajax et autres applications web) suit le modèle du « rendu côté client », à savoir : La première requête charge la mise en page, CSS et JavaScript. Il est courant que tout ou partie du contenu ne se charge pas. Ensuite, le JavaScript envoie une deuxième requête au serveur qui répond en JSON pour enfin générer le HTML approprié.

Livres Seo Techniques De Référencement Web

Les frameworks JavaScript permettent de créer des applications web accessibles via une seule page web, on parle alors de SPA (Single Page Application) c'est le cas de Twitter par exemple qui est une application mobile et desktop.

Cependant, ce modèle n'est pas compatible avec le SEO car les robots envoient des signaux qui sont associés à plusieurs pages. L'architecture de la version SSR prend en charge le rendu côté serveur, c'est-à-direl'utilisateur obtiendra une page complète dans son navigateur, le HTML étant certes généré en JavaScript, mais par le serveur, pas le navigateur.

Plan De Référencement Seo Sem

Aujourd'hui, côté client, 4 solutions concurrencent BackBone, Knockout.JS, Ember.JS et AngularJS apportés par Google.

Comment Amliorer Son Référencement Seo

Ce modèle de développement pose plusieurs problèmes.

Défi n°1 : Pour explorer un site full JS, le bot télécharge le code HTML et analyse le contenu présent dans le code. Le contenu JS et Ajax est ignoré dans la plupart des cas à l'exception de Googlebot avec son navigateur sans tête.

Défi n°2 : Quoi indexer? Le contenu change régulièrement en fonction des interactions. Quels signaux? Comment analyser les liens et le contenu d'une page? A quoi sont liés ces signaux? Si la notion de page liée à une URL a disparu, comment continuer à utiliser l'algorithme actuel?

Librairie Seo Référencement Nantes

Défi n°3 : Rendre un site en full AngularJS n'est possible que si le JS est activé, sinon le site est simplement invisible. Il est également difficile pour les moteurs de recherche d'accéder au contenu de ces sites pour les indexer, car le code source n'affiche que des variables.

Référencement Avec WordPress

Il n'est donc pas surprenant de constater un impact significatif sur la visibilité SEO de ces sites…

Il n'est donc pas surprenant de constater un impact significatif sur la visibilité SEO de ces sites..

Google et JavaScript

Aujourd'hui, on sait que Google interprète le JS qui génère des titres, des meta descriptions, des balises meta robots : test à l'appui.

– Google comprend les fichiers CSS et JS pour identifier une page adaptée aux mobiles ou détecter des éléments cachés.
– Google sait lire les événements Onclick,
– Google peut donc suivre le contenu généré dynamiquement dans le JS pour l'indexer.
Mais penser que Google peut tout lire est faux. Dans le cas d'Ajax qui ne nécessite pas le chargement d'événements, le moteur ne détecte aucun signal pour savoir comment déclencher Ajax. Pour mieux crawler et indexer Ajax, Google a proposé en 2009 la technique du hashbang (#!). Techniquement, lorsque le crawler rencontre une URL avec un hashbang, il explore cette page et remplace le hashbang par _escaped_fragment_ puis il indexera la page dans sa forme originale. Mais aujourd'hui, cette technique est obsolète car Google prétend pouvoir lire les contenus générés en Ajax… La méthode pushstate proposée par l'historique IP de HTML5 est une solution plus pérenne car les URL de navigation dynamique restent identiques. Il a également l'avantage de permettre la navigation même lorsque l'utilisateur désactive JavaScript car il est inclus dans HTML5. Concrètement, pushstate() modifie le chemin URL qui apparaît dans la barre d'adresse de l'utilisateur. Pour le SEO c'est parfait, les moteurs savent lire ces URLs et les différencier les unes des autres. Il faut savoir que Google recommande également la mise en place de Pushstate pour rendre son scrolling infini SEO friendly.

Référencement Seo Multi-villes Loiret

Positionner un site à l'aide d'un framework JavaScript

Crawler et indexer un site réalisé avec un Framework JavaScript est possible, mais ce qui nous intéresse c'est de positionner nos pages.

39;un mode "headless browser" basé sur PhantomJS.

1/ Auditez votre site

Tout d'abord, si le test Fetch as Google ne parvient pas à afficher la page comme prévu. Il ya un problème. La solution réside dans le navigateur sans tête : un navigateur "sans tête" est un environnement logiciel contrôlable en ligne de commande avec une API JavaScript capable de restituer une page HTML complète en exécutant HTML, CSS et JS comme un navigateur. On parle de headless car il n'a pas de GUI (interface utilisateur). Vous pouvez simuler tout ce qui se passe dans le navigateur et donc tester les codes générés par les frameworks JS et Ajax. Remarque : ce type de crawl crée des "fausses visites" dans les outils de webanalytics (car ils exécutent tous les scripts sans exception). Phantom JS et Casper JS sont des navigateurs headless, ce dernier a la particularité d'être un scrapper. Vous pouvez également auditer avec Screaming Frog en mode "JavaScript crawl". Screaming Frog est un crawler orienté SEO, il dispose depuis peu d'un mode "headless browser" basé sur PhantomJS. Il peut ainsi crawler un site Angular complet.

Depuis janvier 2017, Botify propose également cette possibilité.

2/ Comment rendre ces sites SEO Friendly?

Solution 1 : Codez différemment avec une stratégie d'amélioration progressive. Le principe de l'amélioration progressive consiste à construire votre site en 3 couches :

39;intérêt du « rendu côté client », la page devient statique.

– Le contenu stocké dans le code HTML (contenu et fonctionnalités accessibles à tous).
– Le formatage est défini par des feuilles de style en cascade (CSS) externes.
– Fonctionnalités écrites dans un script externe comme JavaScript.
Solution 2 : créez vous-même des instantanés HTML. Cette méthode est recommandée par Google pour Ajax. En résumé, le code JS est exécuté via un navigateur headless côté serveur, afin de générer le HTML produit par le code JS. Ce code est "capturé" avant d'être envoyé, comme une page HTML normale, au navigateur de l'internaute. Cependant, cette méthode perd une partie de l'intérêt du « rendu côté client », la page devient statique. Souvent, le compromis consiste à envoyer des instantanés uniquement aux robots des moteurs de recherche.

Solution 3 : utilisez un serveur de pré-rendu tiers. Les outils de pré-rendu de documents facilitent l'exploration de notre site. Un serveur de pré-rendu vous permet de pré-rendre vos pages statiques, dès que l'outil détecte qu'un crawler arrive sur votre site, il affichera le rendu HTML statique final. Les principaux outils de pré-rendu tiers sont : Prerender, SEO 4 Ajax (Cocorico! ), brombone. Attention, cette technique peut ressembler à du cloaking même si elle n'en est pas. En outre, les serveurs de rendu utilisent la méthode obsolète pour rendre Ajax crawlable. À savoir :

– Soit la méthode des fragments échappés avec hash bangs (comme vu précédemment).
– Soit la méthode des fragments échappés avec balise meta :
Attention, cette méthode en HTML5 utilisant la méthode pushstate() est aussi obsolète que l'autre. Pour l'instant cette méthode fonctionne y compris sur les différents moteurs de recherche. Mais jusqu'à quand? Framework JavaScript : la nouvelle génération L'avenir est aux frameworks JavaScript "isomorphes" capables d'un rendu hybride (côté serveur et/ou client). Avec ReactJS ou HapiJS, on peut donc générer le HTML avant de l'envoyer au navigateur. Il devient possible de créer des sites Web avec des frameworks JS, sans générer de problèmes de référencement. Cependant, mal utilisés, ces Frameworks JS de dernière génération peuvent poser les mêmes problèmes que ceux rencontrés avec la première génération.

Outil Suivi Seo Mots Clés Référencement Naturel Gratuit

Notre avertissement

Le développement dans le JS Framework est un casse-tête qui n'est pas insoluble, mais qui nécessite de solides compétences techniques côté SEO et développeur. Et dans tous les cas, il est à réserver aux situations où le trafic SEO n'est pas stratégique pour le site : Nous pouvons rendre les sites réalisés avec ces technologies crawlables et indexables. Mais si vous souhaitez obtenir des positions sur des requêtes concurrentielles, il est préférable de s'appuyer sur un site Web de serveur de rendu secondaire à l'ancienne.

Entrées similaires :

Rendu complet côté client : comment gérer les canoniques ? John Mueller recommande le rendu dynamique : chez Search Foresight, nous n'approuvons pas CAS IKEA : Pourquoi renommer ses produits avec nos recherches Google? Un site HTTPS est-il vraiment sûr?