Logo
Loading%

How to Improve SEO for a Next.js Website

How to Improve SEO for a Next.js Website

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.

How to Improve SEO for a Next.js Website | Utsarga Manandhar