SEO for Next.js and React Websites: What Actually Matters

Google's JavaScript SEO guide explains that it crawls, renders and then indexes pages — and rendering can be delayed. Other crawlers may not execute JavaScript at all. With Next.js Server Components, the main content is already in the HTML the server sends, so every crawler sees it immediately.

Keep important content, links and headings out of components that only render in the browser after interaction.

Next.js provides a Metadata API — a static metadata object or a generateMetadata function per route — to set titles, descriptions, Open Graph images and more. Generate them from real page data: a product page's title should include the product name, a location page its city.

Google may rewrite title links that are vague, repetitive or stuffed with keywords, so write titles that describe the page clearly.

Decide whether your site lives at the bare domain or at www, and make everything agree: redirects, canonical tags, the sitemap and internal links. If the canonical tag points to a URL that redirects elsewhere, you send mixed signals. Set a canonical on each page with the alternates field in the Metadata API.

Next.js can generate sitemap.xml and robots.txt from code, so new pages appear in the sitemap automatically. Include only indexable, canonical URLs, and submit the sitemap in Search Console.

Render JSON-LD in the page component using the same data that renders the visible content. Organization and Person on the layout, Article on posts, Product on product pages, BreadcrumbList on nested pages. Because it comes from one source, it never drifts out of sync.

Use real anchor links (Next.js Link renders them) for navigation, not click handlers on divs. Crawlers follow links; they don't click buttons. Group related pages, link between them in content, and keep important pages within a few clicks of the home page.

Most SEO value on business sites sits in dynamic routes — a page per product, location or article. In Next.js each one should generate its own metadata from its data, return a proper 404 when the item doesn't exist (so empty pages don't get indexed), and be included in the generated sitemap. Pages that shouldn't be indexed — drafts, filtered views, internal search results — should carry a noindex robots directive.

View the page source (not the browser's inspector) to see the HTML the server sends; the main content and links should be there. Search Console's URL Inspection tool shows how Googlebot rendered the page and any resources it couldn't load. Lighthouse and PageSpeed Insights cover performance and basic SEO checks.

If a Next.js site serves several languages or regions, each version needs its own URL (for example '/en/…' and '/gu/…'), its own translated metadata, and hreflang annotations linking the versions together. Next.js metadata supports alternate language URLs, so these can be generated from the same routing data as the pages. Avoid switching language purely by browser settings without distinct URLs — search engines need separate addresses to index each version.

Next.js can render pages statically, on each request, or statically with periodic revalidation. For SEO, all three work as long as crawlers receive complete HTML. The choice is about freshness and performance: product prices and stock may need frequent updates; blog posts rarely change. Make sure sitemaps reflect real last-modified dates, which helps crawlers prioritise what changed.

Social previews aren't a ranking factor, but they affect whether people click links shared on WhatsApp, LinkedIn and elsewhere. Next.js can generate Open Graph images per page, including dynamically — for example with the page title on a branded background. Check how key pages look when shared before launch.

Moving from WordPress or another platform to Next.js is a site migration: keep URLs where possible, redirect the rest permanently, carry over titles and content, and monitor Search Console after launch.

After launch, watch Search Console's page indexing and Core Web Vitals reports monthly. Framework upgrades and new features can quietly change rendering or metadata, so re-check key templates after major releases.

The Next.js Image component serves correctly sized, modern-format images and lazy-loads by default. Mark the largest above-the-fold image as priority to help LCP. Keep client-side JavaScript lean: every interactive widget adds to INP on mid-range phones.