React and Next.js can be excellent for SEO... or catastrophic. It all depends on the implementation. Too many developers create technically impressive sites that are invisible on Google. This guide shows you how to avoid that trap.
The Fundamental Problem: JavaScript and SEO
By default, a classic React application (Create React App) generates an almost empty HTML page. All content is rendered client-side via JavaScript. The problem? Google must execute that JavaScript to "see" your content.
Even though Googlebot has executed JS since 2015, this approach poses several risks:
- Delayed indexing (Google queues your page for rendering)
- Crawl budget wasted on JavaScript rendering
- Dynamic content sometimes missed or misinterpreted
- Other engines (Bing, Baidu) less capable with JS
The solution: serve pre-rendered HTML via SSR (Server-Side Rendering) or SSG (Static Site Generation).
The 3 Next.js Rendering Modes Explained
SSG (Static Site Generation)
HTML is generated at build time. Perfect for pages that rarely change: blog posts, stable product pages, documentation.
SEO advantages: minimal load times, 100% crawlable content, excellent for Core Web Vitals.
SSR (Server-Side Rendering)
HTML is generated on each request. Ideal for pages with real-time data: dynamic pricing, live inventory, personalized content.
SEO advantages: always up-to-date content, complete HTML from the first request.
ISR (Incremental Static Regeneration)
The best of both worlds: static pages that regenerate in the background after a defined interval. Set a revalidate of 60 seconds and your content stays fresh without sacrificing performance.
SEO advantages: SSG performance + SSR freshness.
Technical SEO Checklist for Next.js
1. Dynamic Metadata
Each page must have a unique title and description. With the App Router, use generateMetadata():
- Title: 50-60 characters, main keyword at the beginning
- Description: 150-160 characters, click-inducing
- Open Graph: title, description, image for social sharing
2. Dynamic Sitemap
Next.js 13+ supports native sitemaps via app/sitemap.ts. Automatically generate the list of all your pages with modification dates. Submit it to Google Search Console.
3. Canonical Tags
Avoid duplicate content with canonical tags on each page. Crucial if you have:
- URLs with tracking parameters (?utm_source=...)
- Pagination pages
- HTTP/HTTPS or www/non-www versions
4. Optimized Images with next/image
Never use <img> directly. The next/image component offers:
- Automatic lazy loading
- Modern formats (WebP, AVIF) served automatically
- Responsive resizing
- Cumulative Layout Shift (CLS) prevention
5. Core Web Vitals
Core Web Vitals have been ranking factors since 2021. Aim for a Lighthouse score > 90:
- LCP (Largest Contentful Paint) < 2.5s: optimize hero loading
- FID (First Input Delay) < 100ms: reduce blocking JavaScript
- CLS (Cumulative Layout Shift) < 0.1: reserve space for images/ads
Common SEO Mistakes to Avoid
- Using Create React App for a portfolio site — zero SEO by default
- Forgetting meta tags on internal pages — every page counts
- Loading fonts without font-display: swap — impacts LCP
- Uncompressed images — use next/image
- Ignoring 404 errors — set up redirects
- No robots.txt or sitemap — basics often forgotten
Conclusion
A well-optimized React site can outperform any WordPress site in SEO. The key: choose the right rendering mode and respect technical fundamentals. Next.js gives you all the tools — it is up to you to use them correctly.
Does your React site need an SEO audit? Contact me for a personalized analysis. I will help you identify priority optimizations to improve your visibility on Google.