RankpediaA plain-English encyclopedia of search

Next JS SEO

Configures a Next.js site so search engines can efficiently crawl, render, index, and rank pages using server-rendered or static HTML, metadata, structured data, and performance optimisations.

If you treat Next.js as a set-it-and-forget-it framework, you know that version changes can break metadata generation and caching assumptions.

Key points

  • Use the Metadata API to set unique titles and descriptions per page, not defaults.
  • Prefer server-side rendering or static generation for pages that must be indexed, so crawlers see HTML without JavaScript execution.
  • Generate sitemap.xml and robots.txt via file-based conventions to guide crawlers.
  • Add structured data in JSON-LD to help search engines understand content and qualify for rich results.

A travel blog's rendering mistake

A travel blog used client-side rendering only. Its best post had 500 backlinks but was invisible to Google for three months because content appeared only after JavaScript hydration. Before migration, 5000 monthly visitors; after, 200. After switching to Static Generation for top 50 pages, indexation resumed within a week and traffic rose to 4000 in two months.

Three ways Next.js SEO goes wrong

  • Client-side rendering Relying solely on client-side JavaScript to render important content forces crawlers to execute scripts, which can be unreliable for seo technology that depends on pre-rendered HTML. Use SSR or SSG for pages that must be indexed.
  • Duplicate metadata Using the same title and description across many pages wastes on site seo opportunities. An SEO infographic can help teams understand the importance of unique metadata, but the real fix is using the Metadata API per page.
  • Missing sitemap and robots Without a sitemap and robots.txt, crawlers may discover pages slowly or miss them entirely. Use Next.js file-based conventions to generate both files automatically. This can delay indexation of new content for large sites.

Three things to check before you deploy

  • Performance metrics Check Core Web Vitals using Lighthouse or PageSpeed Insights. Large bundles, unoptimised images, and excessive client JS can harm scores. Next.js image component helps but must be configured.
  • Structured data Add JSON-LD structured data to pages that qualify for rich results, such as articles, products, or FAQs. Use Next.js script tag or component to inject it server-side.
  • Robots and sitemap Verify that robots.txt allows crawling of important paths and that sitemap.xml includes all canonical pages. Use the built-in metadata conventions to generate them.

Common questions

What are the best practices for Next.js SEO?

Use server-side rendering or static generation, set unique metadata per page, add structured data, generate sitemap and robots, and optimise Core Web Vitals.

How do I set meta tags in Next.js?

Use the Metadata API in the App Router to export a metadata object or generateMetadata function. This handles titles, descriptions, and Open Graph tags per page.

Sources

  1. Next.js Learn: Why is SEO so important? Official Next.js documentation on SEO importance and fundamentals.
  2. Google Search Central: SEO Starter Guide Google's foundational guide for SEO best practices.
  3. Google Search Central: Rendering on Google Search Google's explanation of how JavaScript rendering works for search.
  4. Google Search Central: Structured data introduction Google's introduction to structured data and rich results.
↑