Next.js SEO Checker

Auditez votre site Next.js pour les problèmes de SSR, de rendu, de métadonnées et d'exploration. Plus de 20 chèques dans 7 catégories.

Le problème de référencement n°1 de Next.js

L'utilisation excessive des directives « use client » entraîne le rendu du contenu uniquement dans les navigateurs. Les moteurs de recherche et les robots d'exploration d'IA (ChatGPT, Claude, Perplexity) peuvent voir un shell HTML vide au lieu de votre contenu.

  • Detect SSR vs CSR issues
  • Check metadata availability
  • Analyze Core Web Vitals

Fonctionne mieux avec les sites Next.js, mais peut analyser n'importe quel site WebFonctionne mieux avec les sites Next.js, mais peut analyser n'importe quel site Web

Questions Fréquemment Posées

What does this tool check?

Cet outil effectue plus de 20 contrôles SEO dans 7 catégories :

  • Rendering & SSR: Détecte les shells HTML vides, le rendu client uniquement, les problèmes d'hydratationDétecte les shells HTML vides, le rendu client uniquement, les problèmes d'hydratation
  • Metadata & Head: Titre, description, Open Graph, canonique, fenêtre d'affichage
  • Performance: Core Web Vitals (FCP, LCP, TTFB), ressources bloquant le rendu
  • Images: Texte alternatif, utilisation suivante/image, chargement paresseux
  • Structured Data: JSON-LD schema markup validation
  • Capacité d'exploration: Méta robots, liens internes, hreflang
  • Semantic HTML: Rubriques, repères, attributs ARIA

Pourquoi SSR/SSG est-il important pour le référencement ?

Les moteurs de recherche et les robots d’exploration IA ne voient initialement que le HTML brut de votre serveur. Si votre contenu s'affiche uniquement via JavaScript (côté client), les robots peuvent voir une page vide. Le rendu côté serveur (SSR) ou la génération de site statique (SSG) garantit que votre contenu figure dans la réponse HTML initiale.

Qu'est-ce que le problème « Coque HTML vide » ?

Cela se produit lorsque votre application Next.js renvoie un code HTML minimal avec un contenu entièrement chargé via JavaScript. Causes courantes :

  • Utilisation excessive des directives \"use client\"
  • Ne pas utiliser getServerSideProps ou getStaticProps
  • Récupération de données uniquement dans les hooks useEffect

Comment résoudre les problèmes de rendu ?

To ensure content is available to crawlers:

  • Routeur de pages: Utilisez getServerSideProps ou getStaticProps
  • Routeur d'application: Conservez les composants en tant que composants serveur par défaut, ajoutez uniquement "utiliser le client" en cas de besoin
  • Data Fetching: Récupérer les données critiques côté serveur, pas en cours d'utilisation
  • Metadata: Utilisez next/head ou l'API de métadonnées