Next.js SEO Checker
Audit your Next.js site for SSR, rendering, metadata, and crawlability issues. 20+ checks across 7 categories.
The #1 Next.js SEO Problem
Excessive use of "use client" directives causes content to render only in browsers. Search engines and AI crawlers (ChatGPT, Claude, Perplexity) may see an empty HTML shell instead of your content.
- Detect SSR vs CSR issues
- Check metadata availability
- Analyze Core Web Vitals
Running SEO audit...
Checking rendering, metadata, performance, and more
Priority Issues
Fix these firstQuestions Fréquemment Posées
What does this tool check?
This tool performs 20+ SEO checks across 7 categories:
- Rendering & SSR: Detects empty HTML shells, client-only rendering, hydration issues
- Metadata & Head: Title, description, Open Graph, canonical, viewport
- Performance: Core Web Vitals (FCP, LCP, TTFB), render-blocking resources
- Images: Alt text, next/image usage, lazy loading
- Structured Data: JSON-LD schema markup validation
- Crawlability: Robots meta, internal links, hreflang
- Semantic HTML: Headings, landmarks, ARIA attributes
Why is SSR/SSG important for SEO?
Search engines and AI crawlers initially see only the raw HTML from your server. If your content renders only via JavaScript (client-side), crawlers may see an empty page. Server-Side Rendering (SSR) or Static Site Generation (SSG) ensures your content is in the initial HTML response.
What is the "Empty HTML Shell" issue?
This occurs when your Next.js app returns minimal HTML with content loaded entirely via JavaScript. Common causes:
- Excessive use of "use client" directives
- Not using getServerSideProps or getStaticProps
- Fetching data only in useEffect hooks
How do I fix rendering issues?
To ensure content is available to crawlers:
- Pages Router: Use getServerSideProps or getStaticProps
- App Router: Keep components as Server Components by default, only add "use client" when needed
- Data Fetching: Fetch critical data server-side, not in useEffect
- Metadata: Use next/head or the metadata API