Next.js SEO

Next.js is a strong foundation for SEO because it renders real HTML on the server by default. This lesson gives you a complete overview of the SEO-relevant features covered in depth across this section.

Why Next.js Is SEO-Friendly by Default

Search engine crawlers index HTML content most reliably when it's present in the initial server response, rather than injected later by client-side JavaScript. Because Server Components render to real HTML on the server (or at build time), a Next.js page's content is available to crawlers immediately, without requiring them to execute JavaScript first.

On top of that solid rendering foundation, Next.js provides a dedicated Metadata API for <title>, descriptions, and Open Graph tags, plus built-in support for generating sitemap.xml and robots.txt — all covered in dedicated lessons following this one.

// app/blog/[slug]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPostBySlug(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
  };
}

Dynamic, per-page metadata is generated from real content, which the Metadata API lesson covers in full.

SEO Building Blocks in Next.js

1. Server-rendered HTML (crawlable content, no JS execution required)
2. Metadata API (title, description, Open Graph tags)
3. sitemap.ts / robots.ts (discovery and crawl directives)
4. Semantic HTML + fast performance (ranking factors)

Server rendering ensures crawlable content is present without executing JavaScript.
The Metadata API centralizes <title> and <meta> tag generation per route.
sitemap.ts and robots.ts files generate discovery files automatically.
Core Web Vitals (loading speed, interactivity, visual stability) are real ranking factors search engines evaluate.

SEO Cheat Sheet

The core levers Next.js gives you for SEO.

Lever	Next.js Feature
Crawlable content	Server Components / SSR / SSG
Page titles & descriptions	Metadata API (`metadata` / `generateMetadata`)
Social sharing previews	Open Graph & Twitter metadata fields
Search engine discovery	`sitemap.ts`
Crawl directives	`robots.ts`
Page speed (a ranking factor)	Image/font optimization, static rendering, streaming

Semantic HTML Still Matters

None of Next.js's SEO tooling replaces the fundamentals: using one <h1> per page, meaningful heading hierarchy, descriptive link text, and proper alt attributes on images all remain important, and Next.js doesn't do this for you automatically — it's still your responsibility as you write JSX.

Performance Is Also an SEO Factor

Search engines, particularly Google, factor Core Web Vitals (loading performance, interactivity, and visual stability) into rankings. This is why the Performance section of this course — covering image, font, and script optimization — is directly relevant to SEO outcomes, not just user experience.

Common Mistakes

Relying entirely on client-side rendering for content that needs to be indexed by search engines.
Forgetting to set unique title/description metadata per page, leaving generic defaults everywhere.
Skipping semantic HTML fundamentals because "Next.js handles SEO".
Ignoring performance metrics, not realizing they factor into search rankings too.

Key Takeaways

Server-rendered HTML is the foundation of Next.js's SEO-friendliness.
The Metadata API, sitemap.ts, and robots.ts handle the technical SEO layer.
Semantic HTML and meaningful content remain entirely your responsibility.
Performance (Core Web Vitals) is itself a search ranking factor, not just a UX concern.
This section's remaining lessons cover each of these building blocks in depth.

Pro Tip

Before diving into advanced SEO tactics, confirm the basics are solid: view your page's source (not just the rendered DOM) to verify your actual content is present in the initial HTML — this is the single most important thing for search engine crawlability in a Next.js app.