Comment optimiser JS pour les moteurs de recherche

Qu’est-ce que le référencement JavaScript ?

Le référencement JavaScript fait partie du référencement technique qui vise à faciliter l’exploration, le rendu et l’indexation des sites Web créés avec JavaScript pour les moteurs de recherche. Les tâches courantes incluent les suivantes :

Et d’autres. Note: Si vous avez besoin de rafraîchir vos connaissances sur le JS de base, lisez notre guide : Qu’est-ce que JavaScript et à quoi vous sert-il ?

Comment Google explore-t-il et indexe-t-il JavaScript ?

Google traite JS en trois phases :

Source de l’image : GoogleLe robot d’exploration Web de Google (connu sous le nom de Googlebot) met les pages en file d’attente pour l’exploration et le rendu. Il explore chaque URL de la file d’attente. Googlebot fait une demande. Ensuite, le serveur envoie le document HTML. Ensuite, Googlebot décide des ressources dont il a besoin pour afficher le contenu de la page. Cela signifie qu’il explore le code HTML. Pas de fichiers JS ou CSS car le rendu JavaScript nécessite d’immenses ressources. Pensez à toute la puissance de calcul dont Googlebot a besoin pour télécharger, lire et exécuter JS pour des billions de pages sur près de 2 milliards de sites Web. Ainsi, Google diffère le rendu de JavaScript. Il met en file d’attente tout ce qui n’est pas exécuté pour le traiter plus tard à mesure que les ressources deviennent disponibles. Une fois que les ressources le permettent, un Chromium sans tête (navigateur Chrome sans interface utilisateur) rend la page et exécute le JavaScript. Googlebot traite à nouveau le HTML rendu pour les liens. Et met en file d’attente les URL qu’il trouve pour l’exploration. Dans la dernière étape, Google utilise le HTML rendu pour indexer la page.

Rendu côté serveur vs rendu côté client vs rendu dynamique

Les problèmes d’indexation Google JavaScript reposent en grande partie sur la façon dont votre site restitue ce code : côté serveur, côté client ou rendu dynamique.

Rendu côté serveur

Le rendu côté serveur (SSR) correspond au rendu de JavaScript sur le serveur. Une page HTML rendue est ensuite servie au client (navigateur, Googlebot, etc.). Par exemple, lorsque vous visitez un site Web, votre navigateur envoie une requête au serveur qui détient le contenu du site Web. Une fois la demande traitée, votre navigateur renvoie le HTML rendu et l’affiche sur votre écran. SSR a tendance à aider les pages avec des performances SEO parce que :

Cependant, SSR peut augmenter le temps nécessaire à votre page pour autoriser les entrées utilisateur. C’est pourquoi certains sites Web qui traitent beaucoup de JS choisissent d’utiliser SSR pour certaines pages et pas pour d’autres. Dans des modèles hybrides comme celui-ci, le SSR est généralement réservé aux pages importantes à des fins de référencement. Et le rendu côté client (CSR) est généralement réservé aux pages qui nécessitent beaucoup d’interactions et d’entrées de l’utilisateur.Mais la mise en œuvre du SSR est souvent complexe et difficile pour les développeurs. Pourtant, il existe des outils pour aider à mettre en œuvre la RSS :

Lisez ce guide pour en savoir plus sur la configuration du rendu côté serveur.

Rendu côté client

La RSE est le contraire de la RSS. Dans ce cas, JavaScript est rendu côté client (navigateur ou Googlebot, dans ce cas) à l’aide du modèle d’objet de document (DOM). Plutôt que de recevoir le contenu du document HTML comme dans le rendu côté serveur, vous obtenez un HTML simple avec un fichier JavaScript qui rend le reste du site à l’aide du navigateur. La plupart des sites Web qui utilisent la RSE ont des interfaces utilisateur complexes ou de nombreuses interactions. Consultez ce guide pour en savoir plus sur la configuration du rendu côté client.

Rendu dynamique

Le rendu dynamique est une alternative au rendu côté serveur. Il détecte les robots qui peuvent avoir des problèmes avec le contenu généré par JS et fournit une version rendue par le serveur sans JavaScript. Tout en montrant aux utilisateurs la version rendue côté client. Le rendu dynamique est une solution de contournement et non une solution recommandée par Google. Cela crée des complexités et des ressources supplémentaires inutiles pour Google. Vous pouvez envisager d’utiliser le rendu dynamique si vous avez un site volumineux dont le contenu change rapidement et nécessite une indexation rapide. Ou si votre site repose sur des médias sociaux et des applications de chat qui ont besoin d’accéder au contenu d’une page. Ou si les robots d’exploration importants pour votre site ne peuvent pas prendre en charge certaines des fonctionnalités de votre JS. Mais en réalité, le rendu dynamique est rarement une solution à long terme. Vous pouvez en savoir plus sur la configuration du rendu dynamique et certaines approches alternatives à partir des directives de Google.Note: Google ne considère généralement pas le rendu dynamique comme un « masquage » (le fait de présenter un contenu différent aux moteurs de recherche et aux utilisateurs). Bien que le rendu dynamique ne soit pas idéal pour d’autres raisons, il est peu probable qu’il enfreigne les règles de dissimulation décrites dans les politiques anti-spam de Google.

Comment rendre le contenu JavaScript de votre site Web optimisé pour le référencement

Vous pouvez suivre plusieurs étapes pour vous assurer que les moteurs de recherche explorent, restituent et indexent correctement votre contenu JS.

Utilisez Google Search Console pour trouver les erreurs

Googlebot est basé sur la dernière version de Chrome. Mais il ne se comporte pas de la même manière qu’un navigateur. Ce qui signifie que le lancement de votre site ne garantit pas que Google peut afficher son contenu. L’outil d’inspection d’URL de Google Search Console (GSC) peut vérifier si Google peut afficher vos pages. Entrez l’URL de la page que vous souhaitez tester tout en haut. Et appuyez sur Entrée. Ensuite, cliquez sur le « Tester l’URL en direct” bouton à l’extrême droite. Après une minute ou deux, l’outil affichera un « Essai en directonglet « . Maintenant, cliquez sur « Afficher la page testée”, et vous verrez le code de la page et une capture d’écran. Vérifiez s’il y a des divergences ou du contenu manquant en cliquant sur le bouton « Plus d’informations” onglet. Une raison courante pour laquelle Google ne peut pas afficher les pages JS est que le fichier robots.txt de votre site bloque le rendu. Souvent accidentellement.Ajoutez le code suivant au fichier robot.txt pour vous assurer qu’aucune ressource cruciale n’est bloquée pour l’exploration :User-Agent : Googlebot
Autoriser : .js
Autoriser : .cssNote: Google n’indexe pas les fichiers .js ou .css dans les résultats de recherche. Ils sont utilisés pour afficher une page Web. Il n’y a aucune raison de bloquer ces ressources cruciales. Cela peut empêcher votre contenu d’être rendu et, à son tour, d’être indexé.

Assurez-vous que Google indexe le contenu JavaScript

Une fois que vous avez confirmé que vos pages s’affichent correctement, assurez-vous qu’elles sont indexées. Vous pouvez vérifier cela dans GSC ou sur le moteur de recherche lui-même. Pour vérifier sur Google, utilisez la commande « site : ». Par exemple, remplacez votredomaine.com ci-dessous par l’URL de la page que vous souhaitez tester :site:votredomaine.com/page-URL/Si la page est indexée, vous la verrez apparaître en conséquence. Comme ceci : Si vous ne le faites pas, la page n’est pas dans l’index de Google. Si la page est indexée, vérifiez si une section de contenu généré par JavaScript est indexée. Encore une fois, utilisez la commande « site : » et incluez un extrait de contenu JS sur la page. Par exemple :site:votredomaine.com/page-URL/ « extrait de contenu JS »Vous vérifiez si cette section spécifique du contenu JS a été indexée. Si c’est le cas, vous le verrez dans l’extrait de code. Comme ceci : Vous pouvez également utiliser GSC pour voir si le contenu JavaScript est indexé. Encore une fois, en utilisant l’outil d’inspection d’URL. Cette fois, plutôt que de tester l’URL en direct, cliquez sur le « Afficher la page explorée » bouton. Et vérifiez le code source HTML de la page. Scannez le code HTML pour trouver des extraits de contenu JavaScript. Si vous ne voyez pas votre contenu JS, cela peut être dû à plusieurs raisons :

Exécuter un audit de site

L’exécution régulière d’audits sur votre site est une bonne pratique SEO technique. L’outil d’audit de site de Semrush peut explorer JS comme le ferait Google. Même si c’est rendu côté client. Pour commencer, entrez votre domaine et cliquez sur « Créer un projet. »Alors choisi « Activé” pour le rendu JS dans les paramètres du robot d’exploration. Après l’exploration, vous trouverez tous les problèmes sous la rubrique « Questionsonglet « .

Problèmes courants de référencement JavaScript et comment les éviter

Voici quelques-uns des problèmes les plus courants, ainsi que quelques bonnes pratiques JavaScript SEO :

Allez plus loin

Si vous utilisez ce que vous avez appris sur le référencement JavaScript, vous serez sur la bonne voie pour créer des sites Web efficaces qui se classent bien et que les utilisateurs adorent. Prêt à plonger plus profondément ? Nous vous recommandons de lire ce qui suit pour en savoir plus sur le JS et le SEO technique :