SEO and Metadata Basics in Next.js

When building web applications, it is important that your pages can be understood by search engines and displayed correctly in the browser. This is where SEO (Search Engine Optimization) and metadata come into play.

In Next.js, SEO is handled mainly through metadata. You can define titles, descriptions, and other information that help search engines and users understand your content.

Basic Metadata Example

export const metadata = {
  title: "Products",
  description: "Browse our product catalog",
};

export default function Page() {
  return <h1>Products</h1>;
}

This sets the page title and description automatically.

Why This Matters

Metadata controls how your page appears in the browser tab and in search results. It also affects how your page looks when shared as a link.

In Next.js, pages are rendered on the server by default, which means search engines receive fully rendered content. This makes your app more SEO-friendly compared to traditional client-only apps.

Common SEO Elements

You will typically define:

• Page title;
• Description;
• Basic metadata for each page.

These elements help improve visibility and clarity.

Using Metadata in Layouts

You can define global metadata in a layout:

export const metadata = {
  title: "My App",
  description: "A Next.js application",
};

This applies to all pages inside that layout, while individual pages can override it.

Best Practice

Each page should have a meaningful title and description that reflects its content. Avoid using the same metadata for every page.

Clear and descriptive metadata improves both user experience and search engine understanding.