What SEO means in Next.js, and the best practices that matter

What SEO means in a Next.js site

Search engines judge the HTML a URL returns, the status code, how fast it arrives and the links inside it. In a Next.js site, the framework decides much of that for you, so Next.js SEO is mostly about using its features in the way that puts the right content into the first response:

• Rendering. Is the main content in the HTML sent by the server, or only built in the browser after JavaScript runs?
• Metadata. Does every route set its own title, description, canonical and social tags?
• Discovery. Do pages link to each other with real <a href> links, and is there a sitemap and a robots file?
• Status codes. Do missing pages return 404 and moved pages a permanent redirect?
• Structured data and speed. Is JSON-LD in the HTML, and does the page pass Core Web Vitals on mobile?

Google can run JavaScript, but rendering happens in a queue after crawling, and many other crawlers, including most AI crawlers, read only the raw HTML. Content that needs the browser to appear is slower to be indexed at best, and invisible to some systems at worst. See JavaScript rendering for crawlers.

Rendering choices and how they affect crawling

A common mistake is to believe 'use client' hides content from Google. It does not: Client Components are still rendered to HTML on the server. What hides content is fetching the data inside the browser, so the server-sent HTML contains only a spinner. Fetch the data in a Server Component, or in getStaticProps or getServerSideProps in the Pages Router, and pass it down.

How to check what is in the HTML

curl -s https://example.com/products/blue-mug | grep -c 'Blue Mug'
curl -s https://example.com/products/blue-mug | grep -iE '<title>|rel="canonical"|name="description"|name="robots"'

If the product name is not found in the raw HTML, the content is being built in the browser. URL Inspection in Search Console shows the rendered version Google produced, which is useful for comparison.

The Metadata API: titles, descriptions and canonicals

In the App Router, metadata is exported from layout and page files, and Next.js writes the tags into the head. Set the defaults once in the root layout:

// app/layout.tsx
export const metadata = {
  metadataBase: new URL('https://example.com'),
  title: { default: 'Example Bakery', template: '%s | Example Bakery' },
  description: 'Sourdough, pastries and celebration cakes baked daily.',
  alternates: { canonical: '/' },
};

metadataBase turns relative URLs into absolute ones, so canonicals and social images do not point at localhost. For dynamic routes, use generateMetadata and give every page its own canonical:

// app/products/[slug]/page.tsx
import { notFound } from 'next/navigation';

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const product = await getProduct(slug);
  if (!product) return {};
  return {
    title: product.name,
    description: product.summary,
    alternates: { canonical: `/products/${slug}` },
    openGraph: { title: product.name, images: [product.image] },
  };
}

export default async function Page({ params }) {
  const { slug } = await params;
  const product = await getProduct(slug);
  if (!product) notFound();
  return <ProductView product={product} />;
}

In recent versions params is a promise, hence the await. Data requests made with fetch in both functions are de-duplicated, so the product is not fetched twice. The Next.js meta tags guide covers Open Graph and Twitter fields in more detail.

The SEO component in the Pages Router

In the Pages Router there is no Metadata API. The equivalent is the built-in next/head component, which many people call the Next.js SEO component:

import Head from 'next/head';

<Head>
  <title>{`${product.name} | Example Bakery`}</title>
  <meta name="description" content={product.summary} />
  <link rel="canonical" href={`https://example.com/products/${product.slug}`} />
</Head>

Third-party packages such as next-seo wrap the same tags in a component with props. They work, but in the App Router the built-in Metadata API does the job without an extra dependency.

Sitemaps, robots, structured data and status codes

Next.js generates /sitemap.xml and /robots.txt from special files in the app folder:

// app/sitemap.ts
import type { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const products = await getAllProducts();
  return [
    { url: 'https://example.com/', lastModified: new Date() },
    ...products.map((p) => ({
      url: `https://example.com/products/${p.slug}`,
      lastModified: p.updatedAt,
    })),
  ];
}

// app/robots.ts
export default function robots(): MetadataRoute.Robots {
  return {
    rules: { userAgent: '*', allow: '/', disallow: '/api/' },
    sitemap: 'https://example.com/sitemap.xml',
  };
}

For structured data, render a JSON-LD script inside the page component, escaping the less-than character as the Next.js documentation recommends:

const jsonLd = { '@context': 'https://schema.org', '@type': 'Product', name: product.name };

<script type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c') }} />

See JSON-LD in Next.js and robots and sitemaps in Next.js.

Status codes and redirects

• Call notFound() when a record does not exist, so the route returns 404 instead of an empty page with 200. Check custom error pages with the Next.js error pages guide.
• Permanent redirects in next.config.js with permanent: true return 308, which Google treats the same as 301.
• Pick trailingSlash true or false once, and use the same form in canonicals, links and the sitemap.

Links, images and speed

• Use next/link for navigation. It renders a real <a href>, which crawlers follow. Buttons with onClick handlers that call router.push are not links and pass no discovery.
• Use next/image with sizes. Give the hero image the priority setting so it is not lazy-loaded, and set an accurate sizes value. See Next.js image optimisation not working.
• Keep client JavaScript small. Large client bundles slow interaction on phones. Keep components on the server unless they need state or browser APIs.
• Load third-party scripts with next/script and a deferred strategy, so analytics and chat widgets do not block the first paint.

The Core Web Vitals in Next.js guide covers measurement and the main fixes.

A worked example: a shop that Google could not read

Example Bakery rebuilt its online shop in Next.js. Six weeks after launch, Search Console showed most product pages as Crawled, currently not indexed, and the ones that were indexed all had the same title.

The curl check found the product name missing from the raw HTML. The product page was a Client Component that fetched its data in useEffect, so the server sent a loading skeleton. The root layout set a title but no page set its own, and there was no canonical. Missing products showed a friendly message with status 200.

The fix moved the data fetch into the Server Component page, added generateMetadata with a title, description and canonical per product, called notFound() for missing slugs and added app/sitemap.ts. The same curl command then found the product name, and URL Inspection showed the correct title and canonical. Over the next month the indexed product count rose steadily as Google recrawled.

The fix, step by step

Edge cases worth knowing

• Preview deployments. Hosts such as Vercel add an X-Robots-Tag: noindex header to preview URLs. Check your production domain does not inherit it, and that staging domains on other hosts are protected.
• Static export. With output: 'export', server features such as redirects in the config and dynamic rendering are not available. Handle redirects on the web server or CDN instead.
• Middleware rewrites. Rewrites and locale redirects in middleware can send Googlebot somewhere different from users. Test with curl and a crawler user agent, and avoid redirecting by browser language alone. See hreflang in Next.js.
• Streaming and status codes. Once a response has started streaming, the status code cannot change. Make sure checks that decide on a 404 run before any loading boundary, and confirm with curl -I.
• Query parameters. Sort and filter parameters create many addresses for one page. Keep the canonical on the clean path.

Keeping a Next.js site search-friendly

Framework upgrades and new features can change what each route sends. Build the checks into your workflow:

1. Add a test that fetches a few key routes from a production build and fails if the title, canonical or main heading is missing from the raw HTML.
2. Check /sitemap.xml and /robots.txt after every release that changes routing.
3. Run curl -I on a deliberately missing URL after upgrades to confirm it still returns 404.
4. Crawl the site every few months to catch missing metadata on new routes. The Next.js site audit guide explains what to look for.