2.1K Views

NEXT107 - SEO in Next.js

Learn how to optimize your Next.js applications for search engines using the Metadata API, dynamic meta tags, and SEO best practices for modern web apps.

Search Engine Optimization (SEO) is one of the main reasons developers choose Next.js over traditional React applications.
In this lesson, you will learn how SEO works in Next.js and how to properly optimize your pages for search engines.

Why SEO Matters

SEO determines how easily users can find your website through search engines.

Good SEO provides:

  • Better search visibility
  • Higher organic traffic
  • Faster indexing
  • Improved user trust

Next.js makes SEO easier by rendering content on the server or at build time.

SEO Problems in Client-Side React

In client-side rendered React apps:

  • HTML is mostly empty
  • Content loads after JavaScript execution
  • Search engines may not index content properly

Next.js solves this by delivering fully rendered HTML to the browser and crawlers.

Metadata API Overview

Next.js provides a built-in Metadata API for managing SEO tags.

Metadata includes:

  • title
  • description
  • keywords
  • Open Graph tags
  • Twitter cards

This API replaces manual <head> management.

Static Metadata

You can define static metadata in a page or layout.

export const metadata = {
  title: "My Page Title",
  description: "Page description for SEO"
};

This metadata is automatically injected into the document head.

Dynamic Metadata

Metadata can be generated dynamically based on route parameters or fetched data.

export async function generateMetadata({ params }) {
  return {
    title: `Post - ${params.slug}`,
    description: "Dynamic post description"
  };
}

This is ideal for blog posts and dynamic pages.

Layout-Level Metadata

Metadata defined in layout.js applies to all nested pages.

export const metadata = {
  title: {
    default: "My Website",
    template: "%s | My Website"
  }
};

This ensures consistent branding across the site.

Open Graph and Social Sharing

Next.js supports Open Graph metadata for social sharing.

export const metadata = {
  openGraph: {
    title: "My Page",
    description: "Social preview description",
    images: ["/og-image.png"]
  }
};

This improves how links appear on social media platforms.

SEO Best Practices in Next.js

Follow these best practices:

  • Use meaningful page titles
  • Write unique meta descriptions
  • Use semantic HTML
  • Optimize images
  • Avoid duplicate content
  • Keep URLs clean and readable

Next.js provides the foundation, but content quality still matters.

SEO and Routing

File-based routing naturally creates clean URLs.

Examples:

  • /blog/my-first-post
  • /products/laptop

Readable URLs improve both SEO and user experience.

Common SEO Mistakes

Avoid these mistakes:

  • Missing meta descriptions
  • Reusing the same title everywhere
  • Blocking crawlers unintentionally
  • Relying only on client-side rendering

SEO should be considered from the start of a project.

Summary

In this lesson, you learned:

  • Why SEO is important
  • How Next.js improves SEO
  • Using the Metadata API
  • Static and dynamic metadata
  • Layout-level metadata
  • Open Graph support
  • SEO best practices

In the next lesson, we will explore images and performance optimization using built-in Next.js features.