Connexion
← Retour au lexique
⚙️ SEO Technique

JavaScript (JS)

JavaScript est le langage de programmation qui ajoute l'interactivité aux sites web. Son impact sur le SEO nécessite une attention particulière au rendu et au crawl.

Définition

JavaScript (souvent abrégé JS) est un langage de programmation qui permet d’ajouter de l’interactivité et du contenu dynamique aux pages web. C’est le troisième pilier du web avec HTML (structure) et CSS (style).

En SEO, JavaScript pose des défis spécifiques liés au rendu et à l’indexation.

Rôle de JavaScript

Interactivité

  • Menus déroulants
  • Formulaires dynamiques
  • Animations
  • Sliders et carrousels

Contenu dynamique

  • Chargement de contenu sans rechargement
  • Single Page Applications (SPA)
  • Infinite scroll
  • Filtres et tris

Frameworks modernes

  • React
  • Vue.js
  • Angular
  • Next.js, Nuxt.js

JavaScript et SEO : les défis

Rendu

Google doit exécuter JavaScript pour voir le contenu.

Délai d’indexation

Le rendu JS consomme des ressources, Google peut différer l’indexation.

Contenu invisible

Si le JS échoue, le contenu n’est pas indexé.

Crawl budget

Les ressources JS consomment du crawl budget.

Comment Google gère JavaScript

Processus en deux phases

  1. Crawl : Google télécharge le HTML initial
  2. Render : Google exécute le JS pour voir le contenu final

File d’attente de rendu

Les pages JS sont mises en attente pour le rendu, ce qui peut retarder l’indexation.

Googlebot

Utilise une version récente de Chromium pour le rendu.

Problèmes courants

Contenu chargé dynamiquement

// Le contenu chargé après interaction peut ne pas être indexé
button.addEventListener('click', () => {
  loadContent();
});

Liens JavaScript

<!-- Problématique -->
<a onclick="goTo('/page')">Lien</a>

<!-- Correct -->
<a href="/page">Lien</a>

Lazy loading agressif

Contenu qui ne charge qu’au scroll peut être manqué.

Erreurs JavaScript

Les erreurs bloquent le rendu du reste du contenu.

Solutions SEO pour JavaScript

Server-Side Rendering (SSR)

Le HTML est généré côté serveur avant d’être envoyé au client.

Frameworks : Next.js (React), Nuxt.js (Vue), Angular Universal

Pre-rendering

Générer le HTML statique à l’avance.

Outils : Prerender.io, Rendertron, Puppeteer

Progressive Enhancement

Contenu de base en HTML, amélioré par JS.

Hybrid Rendering

Combiner SSR pour le contenu critique et CSR pour le reste.

Vérifier le rendu JavaScript

Google Search Console

Outil d’inspection d’URL > voir la page rendue.

Mobile-Friendly Test

Montre le rendu de la page.

Rich Results Test

Affiche comment Google voit la page.

Comparer

Comparez le code source initial avec le DOM rendu.

Bonnes pratiques

Liens et navigation

Utilisez des balises <a> avec href pour tous les liens.

Contenu important

Le contenu crucial doit être dans le HTML initial ou rendu côté serveur.

Images

Utilisez des balises <img> avec src, pas uniquement du JS.

Sitemap

Incluez toutes les URLs dans le sitemap.

Gestion des erreurs

Évitez que les erreurs JS bloquent le rendu.

Performance

Optimisez le temps d’exécution JS (impact Core Web Vitals).

Audit JavaScript SEO

Checklist

  • Contenu visible sans JS ?
  • Liens crawlables ?
  • Pas d’erreurs JS critiques ?
  • Temps de rendu acceptable ?
  • Lazy loading correctement implémenté ?
  • Métadonnées dans le HTML initial ?

Outils

  • Screaming Frog (avec rendu JS)
  • Google Search Console
  • Lighthouse
  • DevTools > Disable JavaScript

Conclusion

JavaScript est incontournable dans le web moderne, mais nécessite une attention particulière pour le SEO. Assurez-vous que Google peut accéder à votre contenu, privilégiez le SSR ou le pre-rendering pour le contenu important, et testez régulièrement comment Google voit vos pages. Un bon équilibre entre interactivité et crawlabilité est la clé du succès.

← Retour au lexique