Toutes les pages sur le web, même celle que vous lisez actuellement, sont composées de HTML, de CSS ainsi que de JavaScript. Parmi ces trois éléments, un seul peut impacter négativement le SEO : le JavaScript. Dans cet article, je vous présente de quelle manière le JavaScript a un effet sur le SEO et quelles sont les bonnes pratiques pour utiliser du JavaScript sur son site web.
Qu’est ce que le javascript et quel est son rôle sur une page web ?
Le JavaScript est un langage de programmation qui rend vos pages web interactives et dynamiques. Concrètement, c’est lui qui fait apparaître des menus déroulants, qui charge du contenu sans recharger la page, ou qui crée ces animations fluides que vous adorez.
Sans JavaScript, une page web serait statique, figée. On parlerait uniquement de HTML (la structure) et de CSS (la mise en forme). Avec JavaScript, votre site devient vivant : les utilisateurs peuvent cliquer, scroller et voir le contenu se modifier en temps réel.
Dans le code source de votre page, le JavaScript se présente sous forme de scripts. Ces scripts peuvent être directement intégrés dans votre code HTML, ou chargés depuis des fichiers externes. C’est d’ailleurs pour cette raison qu’on parle souvent de « fichiers JS ».
Est-ce que le Javascript impacte le crawling d’une page par Google ?
Oui, et c’est même un des défis majeurs du référencement moderne.
Laissez-moi vous expliquer comment ça fonctionne. Quand le robot d’indexation de Google (le Googlebot) arrive sur votre site internet, il commence par télécharger le code HTML de vos pages. C’est ce qu’on appelle le crawl.
Pour une page classique en HTML pur, tout le contenu est immédiatement visible dans ce code source. Le crawler peut indexer votre contenu sans difficulté et le faire apparaître dans les résultats de recherche.
Mais avec JavaScript, c’est différent. Le Googlebot doit d’abord télécharger vos fichiers JS, les exécuter, attendre que le contenu se génère et, seulement après, indexer ce qui apparaît. Ce processus s’appelle le « rendering » ou rendu.
Google a développé des capacités pour exécuter JavaScript, c’est vrai. Mais ce processus consomme beaucoup plus de ressources qu’un simple crawl HTML. Et comme vous l’aurez deviné, l’indexation du contenu dans ce cas peut prendre plus de temps.
Dans certains cas, si votre JavaScript est trop complexe ou mal optimisé, les robots des moteurs de recherche peuvent même ne pas réussir à l’exécuter correctement. Votre contenu reste alors invisible pour les moteurs de recherche.
Comment vérifier si son code Javascript est SEO Friendly ?
Avant d’optimiser, il faut diagnostiquer. Je vous présente les méthodes que j’utilise pour vérifier si mon JavaScript pose problème pour le référencement.
Méthode 1 : L’inspection dans la Google Search Console
Dans la Google Search Console, vous pouvez utiliser l’outil « Inspection d’URL ». Il vous montre exactement comment Google voit votre page après avoir exécuté le JavaScript.
Il ne vous reste qu’à comparer la version « explorée » par Google avec ce que vous voyez dans votre navigateur. Si du contenu manque dans la version Google, vous avez un problème d’indexation. Il existe à cet effet un outil que j’aime bien qui est le « HTML Viewer » dans lequel je copie simplement le code « exploré » pour voir la page comme Google.
Je vous recommande de tester régulièrement vos pages principales : la page d’accueil, vos pages de contenu stratégiques et vos pages produits si vous avez un site e-commerce. C’est le meilleur moyen de détecter rapidement un problème avant qu’il n’impacte votre référencement naturel.
Méthode 2 : La commande « Afficher le code source » dans Chrome
Dans votre navigateur (Chrome de préférence même si ça marche avec n’importe lequel), faites un clic droit et sélectionnez « Afficher le code source de la page ». Ce que vous voyez ici, c’est le HTML brut, avant l’exécution du JavaScript.
Si vos balises importantes (title, meta description, balises H1, contenu principal) n’apparaissent pas dans ce code source, les robots d’indexation auront du mal à les découvrir rapidement.
C’est une méthode simple mais terriblement efficace. Je l’utilise à chaque fois que je veux vérifier rapidement si mon contenu est bien présent dans le HTML initial. Si vous devez faire défiler dans le code source pour trouver votre contenu principal, c’est mauvais signe.
Méthode 3 : Utiliser une extension Chrome pour désactiver le JavaScript
Voilà une technique que j’utilise systématiquement lors de mes audits SEO : désactiver complètement JavaScript pour voir ce que perçoivent réellement les robots des moteurs de recherche.
Je vous recommande d’installer une extension comme « Quick Javascript Switcher » pour Chrome ou « NoScript » pour Firefox. Ces outils vous permettent de désactiver JavaScript en un clic, sans fouiller dans les paramètres complexes de votre navigateur.
Une fois JavaScript désactivé, rechargez votre page et observez ce qui se passe. Est-ce que votre contenu principal est toujours visible ? Votre menu de navigation fonctionne-t-il ? Vos liens internes sont-ils accessibles ?
Si votre page devient quasiment vide ou si des sections entières disparaissent, c’est exactement ce que verra un robot d’indexation basique. Vous comprenez immédiatement l’ampleur du problème.
Quelles sont les bonnes pratiques pour le référencement avec Javascript ?
Maintenant que vous comprenez les enjeux, voyons comment optimiser concrètement votre JavaScript pour améliorer le référencement de votre site.
La minimification des fichiers JS ou leur compression
La vitesse de chargement est un facteur de classement confirmé par Google. Un site qui se charge lentement frustre les utilisateurs et fait augmenter votre taux de rebond.
La minimification consiste à supprimer tous les espaces, commentaires et caractères inutiles de vos fichiers JavaScript. Un fichier de 100 Ko peut facilement descendre à 60-70 Ko après minimisation. La compression va encore plus loin. En activant la compression GZIP ou Brotli sur votre serveur (vérifiez avec votre hébergeur), vous réduisez la taille des fichiers transmis jusqu’à 70%.
Personnellement, en compressant les fichiers JS sur mon site, je remarque souvent des problèmes de mise en page, notamment sur les pages comme « Consultant SEO Rennes ». Je vous recommande donc de checker le rendu avant de valider l’opération.
Le Server-Side Rendering (SSR)
Avec le SSR, votre serveur génère le HTML complet avant de l’envoyer au navigateur. Le JavaScript s’exécute d’abord côté serveur, pas dans le navigateur de l’utilisateur.
Pour les robots des moteurs de recherche, c’est idéal : ils reçoivent directement du HTML avec tout le contenu visible. Plus besoin d’attendre l’exécution du JavaScript pour indexer le contenu du site.
Des frameworks comme Next.js (pour React) ou Nuxt.js (pour Vue.js) facilitent cette mise en place. Si vous créez un site avec ces technologies, je vous recommande fortement d’activer le SSR pour toutes vos pages de contenu importantes.
Le Static-Site Generation (SSG)
Le SSG va encore plus loin. Votre site est entièrement généré en HTML statique au moment du build. Chaque page existe déjà en HTML pur, prête à être crawlée.
C’est parfait pour les blogs, les sites vitrines, ou les pages qui ne changent pas constamment. Les performances sont excellentes et le référencement naturel est optimal.
Personnellement, je ne l’ai jamais testé, mais selon les développeurs que j’ai consultés avant la rédaction de cet article, les résultats sont vraiment impressionnants. Le temps de chargement est ultra rapide, ce qui fait que l’indexation des nouvelles pages est immédiate.
L’utilisation du HTML sémantique dès le chargement initial
Ne comptez pas uniquement sur JavaScript pour structurer votre contenu. Votre HTML de base doit déjà être sémantique et bien organisé.
Cela signifie :
- Utiliser les bonnes balises dès le départ : vos titres doivent être dans des balises H1, H2, H3, pas générés dynamiquement par JavaScript. Vos paragraphes dans des balises <p>, vos listes dans des <ul> ou <ol>.
- Inclure les balises meta essentielles : votre balise title, votre meta description, et les balises Open Graph doivent exister dans le HTML initial, pas ajoutées après coup par JavaScript.
- Structurer avec les balises HTML5 : utilisez <header>, <nav>, <main>, <article>, <aside>, <footer>. Cette sémantique aide les moteurs de recherche à comprendre la structure de vos pages.
- Ajouter les attributs alt : pour toutes vos images, même celles chargées dynamiquement, assurez-vous que les balises alt sont présentes. C’est important pour le référencement et l’accessibilité.
Si vous utilisez un CMS comme WordPress, la plupart de ces bonnes pratiques de référencement sont déjà appliquées. Mais si vous créez un site custom, vérifiez chaque page.
La mise en place d’un système de prerendering
Le prerendering est une solution intermédiaire intéressante. Le principe ? Votre serveur détecte quand un robot visite votre site et lui sert une version pré-rendue de la page.
Pour les utilisateurs normaux, le site fonctionne avec JavaScript comme d’habitude. Mais pour le Googlebot et les autres robots d’indexation, une version HTML statique est servie.
Des services comme Prerender.io ou Rendertron permettent de mettre ça en place assez facilement. Vous pouvez aussi configurer votre propre solution avec Puppeteer ou Playwright.
Attention cependant : Google a précisé que cette technique de cloaking (servir du contenu différent aux robots) n’est acceptable que si le contenu final est identique. Ne l’utilisez pas pour tromper les moteurs de recherche, vous risquez une pénalité.
Je considère le prerendering comme une solution temporaire. Si vous avez la possibilité de mettre en place du SSR ou du SSG, c’est toujours préférable à long terme.
L’utilisation du lazy loading sur les pages web
Le lazy loading (chargement paresseux) consiste à ne charger les ressources que quand l’utilisateur en a besoin. Typiquement, les images et scripts en bas de page ne se chargent que quand l’utilisateur fait défiler vers le bas.
Avec WordPress, certains thèmes comme Astra, qui est d’ailleurs celui actif sur ce site, ont déjà cette fonctionnalité par défaut. Si votre thème ne vous le permet pas, il existe également plusieurs extensions WordPress qui le font, bien que je n’en ai jamais testé aucune.
Toutefois, évitez à tout prix de mettre du lazy loading sur votre contenu principal ou vos éléments above the fold (visibles sans faire défiler). Google pourrait considérer que votre page manque de contenu. De même, le lazy loading ne devrait jamais s’appliquer aux liens internes, au risque de compromettre le maillage interne du site.
Pourquoi le lazy loading est bon pour le SEO ?
Le lazy loading a beaucoup d’avantages. Mais si on se concentre sur le SEO, voici les deux points qui avantagent le plus :
- D’abord, le lazy loading améliore considérablement le temps de chargement initial. Votre page devient visible et interactive beaucoup plus rapidement. Google adore ça.
- Ensuite, ça réduit la consommation de bande passante, ce qui est particulièrement important pour les utilisateurs mobiles. Avec le mobile-first indexing de Google, l’optimisation mobile est devenue cruciale.
Conclusion
En conclusion, le JavaScript est indispensable pour une page web, et donc pour le site en général. Cependant, lorsqu’il est mal implémenté sur les pages, il peut très vite empêcher leur indexation par Google et nuit donc à la stratégie de visibilité globale du site. Je vous recommande donc de toujours vérifier vos pages avec la Google Search Console pour vous assurer que vos scripts ne posent aucun souci.
FOIRE AUX QUESTIONS
Avez-vous une question sur le SEO et le JavaScript ? Je répondrai à vos questions dans cette section.
Quels sont les problèmes JavaScript pour le SEO ?
Le JavaScript, en cas d’abus, peut empêcher les robots d’indexation de Google d’accéder au contenu principal de la page. De même, lorsque les liens sont dynamiquement créés ou chargés, il se peut qu’une fois sur votre site, le Googlebot ne trouve aucun lien à suivre et donc aucune page à ajouter à sa base de données.
Est-ce que Google exécute le JavaScript ?
Oui, aujourd’hui les robots de Google lisent et exécutent parfaitement le JavaScript sur une page. Cependant, ce n’est pas une raison pour en abuser, car ces robots ont une limite de crawl et si le chargement prend trop de temps, vous risquez de ne leur fournir aucun contenu.
Quel est le meilleur plugin WordPress pour compresser du JavaScript ?
Pour moi, WP Rocket et LiteSpeed sont les plugins qui excellent dans ce domaine. Mais aujourd’hui, les hébergeurs proposent des options qui vous permettent de le faire sans même devoir payer une extension WordPress.
Comment voir le JavaScript sur ma page ?
Pour voir le JavaScript sur votre page ou votre site WordPress, il suffit de vous rendre sur celui-ci et de faire un clic droit puis d’ouvrir les outils d’inspection. Là, vous accédez à tout le code de la page, dont le JavaScript chargé.
