Introduction

Search Engine Optimization (SEO) is an important part of building a website that can be discovered through search engines.

Having a visually appealing website isn't enough. Search engines need to understand what each page represents, which pages should be indexed, how different URLs relate to each other, and how the website should appear when shared on social platforms.

Next.js provides several built-in features that make implementing technical SEO easier. With the App Router, developers can manage metadata, generate sitemaps and robots.txt files, create dynamic Open Graph images, and implement other SEO improvements directly within the application.

This guide covers some of the most important SEO improvements that can be implemented in a modern Next.js application.

1. Add Descriptive Metadata

Metadata provides search engines with information about a webpage.

A page should have a meaningful title and description that accurately represent its content.

Next.js provides a Metadata API that can be used directly in layouts and pages.

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Projects",
  description:
    "Explore projects built with React, Next.js, TypeScript, and modern web technologies.",
};

For websites with multiple pages, each important page should ideally have a unique title and description.

A root layout can also define default metadata while individual pages override it when necessary.

2. Use Open Graph Metadata

Open Graph metadata controls how webpages are represented when they are shared on social platforms and messaging applications.

A basic configuration can look like this:

openGraph: {
  title: "Projects | My Portfolio",
  description: "Explore my latest web development projects.",
  url: "https://example.com/projects",
  siteName: "My Portfolio",
  images: [
    {
      url: "/og-image.png",
      width: 1200,
      height: 630,
      alt: "My Portfolio",
    },
  ],
  type: "website",
},

A properly designed Open Graph image can make shared links more recognizable and visually appealing.

For larger websites, different pages can also have their own Open Graph images.

3. Add Structured Data

Structured data helps search engines understand the meaning and context of your content.

Schema.org provides standardized types such as:

Person
Organization
WebSite
Article
BlogPosting
Product
BreadcrumbList

For example, a personal portfolio can use a Person schema:

const personSchema = {
  "@context": "https://schema.org",
  "@type": "Person",
  name: "Your Name",
  url: "https://example.com",
  jobTitle: "Frontend Developer",
  sameAs: [
    "https://github.com/username",
    "https://www.linkedin.com/in/username",
  ],
};

This information is typically provided to search engines using JSON-LD.

Structured data doesn't guarantee higher rankings or rich results, but it provides search engines with additional context about the website and its content.

4. Create a Sitemap

A sitemap provides search engines with a list of important URLs on a website.

Next.js can generate one automatically using app/sitemap.ts.

import type { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://example.com";

  return [
    {
      url: baseUrl,
      lastModified: new Date(),
    },
    {
      url: `${baseUrl}/projects`,
      lastModified: new Date(),
    },
    {
      url: `${baseUrl}/blog`,
      lastModified: new Date(),
    },
  ];
}

Next.js exposes the generated sitemap at:

/sitemap.xml

For a blog or content-heavy website, the sitemap can be generated dynamically from the database so that new articles are automatically included.

5. Configure robots.txt

A robots.txt file provides crawling instructions to search engine bots.

Next.js can generate it using app/robots.ts.

import type { MetadataRoute } from "next";

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

This creates:

/robots.txt

It can also be used to prevent crawlers from accessing areas such as administrative routes.

However, robots.txt should not be treated as a security mechanism. Sensitive pages should be protected by authentication and authorization rather than relying on crawler instructions.

6. Add Canonical URLs

A canonical URL tells search engines which URL should be considered the preferred version of a page.

For example:

export const metadata: Metadata = {
  title: "Projects",
  alternates: {
    canonical: "/projects",
  },
};

When a website can potentially serve similar content through multiple URLs, canonical URLs help reduce ambiguity.

For example:

https://example.com/projects
https://example.com/projects?source=linkedin

The canonical URL can identify /projects as the preferred version.

It's particularly useful for websites with filters, query parameters, pagination, or other URL variations.

7. Optimize Page Performance

SEO isn't only about metadata.

Website performance and user experience are also important parts of creating a high-quality website.

Next.js provides several features that can help:

next/image for image optimization
next/font for font optimization
Server Components
Code splitting
Dynamic imports
Automatic JavaScript and CSS optimization
Static rendering where appropriate

Images should also be appropriately sized and compressed.

For example:

import Image from "next/image";

<Image
  src="/profile.jpg"
  alt="Profile"
  width={800}
  height={800}
/>

Avoid loading unnecessarily large images, particularly for content that appears below the fold.

8. Use Semantic HTML

Search engines benefit from a well-structured document.

Instead of building a page entirely with generic <div> elements, use semantic HTML where appropriate:

<header>
  <nav>
    ...
  </nav>
</header>

<main>
  <article>
    <h1>How to Improve SEO</h1>
    ...
  </article>
</main>

<footer>
  ...
</footer>

Heading hierarchy is also important.

A page should generally have a clear primary heading and logical subsections:

H1
 ├── H2
 │    ├── H3
 │    └── H3
 └── H2

9. Create Useful, Original Content

Technical SEO can help search engines discover and understand a website, but it cannot replace useful content.

Pages should provide genuine value to visitors.

For blog content, focus on:

Clear topics
Descriptive headings
Original information
Natural keyword usage
Internal links
Helpful examples
Good readability

Avoid writing content purely to include keywords.

The goal should be to satisfy the user's search intent first.

10. Build a Strong Internal Linking Structure

Internal links connect pages within the same website.

For example, a blog article about Next.js authentication could link to:

Blog
 ├── Next.js Authentication
 │
 ├── Next.js SEO
 │
 └── Next.js Performance

Good internal linking helps visitors navigate the website and gives search engines additional context about the relationship between pages.

11. Use Search Console to Monitor SEO

After implementing technical SEO improvements, it's useful to monitor the website using Google Search Console.

It can provide information about:

Indexed pages
Search queries
Search impressions
Clicks
Average position
Crawling issues
Sitemap status
Core Web Vitals
Indexing problems

SEO is an ongoing process rather than a one-time configuration.

Conclusion

Improving SEO in a Next.js application involves much more than adding keywords to a page.

A strong technical SEO foundation can include:

Metadata for page titles and descriptions
Open Graph for social sharing
Structured data for additional context
Sitemaps for URL discovery
robots.txt for crawler guidance
Canonical URLs for URL consistency
Performance optimization for a better user experience
Semantic HTML for clearer page structure
Internal linking for better navigation and discoverability
High-quality content that satisfies search intent

Next.js makes many of these features straightforward to implement through its App Router conventions. Combining these technical improvements with useful content and a good user experience provides a much stronger foundation for long-term organic search visibility.

Notes on development, design, and progress.

How to Improve SEO for a Next.js Website