Next.js SEO Guide

Complete Next.js SEO Guide: Metadata, Sitemap, Robots, and Dynamic SEO

Search Engine Optimization (SEO) is essential for any modern web application. A properly optimized website improves search engine visibility, increases organic traffic, and enhances user engagement. Next.js provides powerful built-in SEO features through its App Router and Metadata API. These features allow developers to easily manage meta tags, Open Graph data, sitemap, robots.txt, and structured data without external libraries. In this article, I will explain how I implement a complete SEO system in my Next.js applications using real production-level examples.

Next.js is one of the best frameworks for SEO because it supports:

Server-Side Rendering (SSR)

Static Site Generation (SSG)

Incremental Static Regeneration (ISR)

Built-in Metadata API

Automatic sitemap and robots support

Dynamic metadata for dynamic routes

Structured data support (JSON-LD)

These features allow search engines like Google to properly crawl and index your website.

1. Creating a Sitemap in Next.js

A sitemap helps search engines discover all important pages on your website.

Create this file:

app/sitemap.ts

Example:

import type { MetadataRoute } from "next";
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://aminul.tech",
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
    {
      url: "https://aminul.tech/about",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: "https://aminul.tech/blog",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.7,
    },
  ];
}

This automatically generates:

https://aminul.tech/sitemap.xml

Benefits:

Helps search engines crawl pages faster

Improves indexing

Improves SEO ranking

2. Creating robots.txt in Next.js

The robots.txt file tells search engines which pages they can crawl and which pages they should avoid.

Create this file:

app/robots.ts

Example:

import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/private/",
    },
    sitemap: "https://aminul.tech/sitemap.xml",
  };
}

This generates:

https://aminul.tech/robots.txt

3. Creating a Reusable SEO Function

Instead of repeating metadata in every page, I use a reusable SEO generator function.

Create file:

Seo/generateSEO.ts

Example:

import type { Metadata } from "next";
type SEOProps = {
  title: string;
  description: string;
  keywords?: string;
  url?: string;
  images?: string[];
  author?: string;
};
export default function generateSEO({
  title,
  description,
  keywords = "Next.js, React, Portfolio, Web Developer",
  url = "https://aminul.tech",
  images = ["https://aminul.tech/banner.png"],
  author = "Md Aminul Islam",
}: SEOProps): Metadata {
  return {
    title,
    description,
    keywords,
    alternates: {
      canonical: url,
    },
    authors: [{ name: author, url }],
    openGraph: {
      title,
      description,
      url,
      siteName: "Aminul Portfolio",
      images: images.map((image) => ({
        url: image,
        width: 1200,
        height: 630,
        alt: title,
      })),
      type: "website",
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images,
    },
    robots: {
      index: true,
      follow: true,
    },
  };
}

Benefits:

Reusable

Clean code

Consistent SEO across all pages

4. Static Page SEO Example

Example static page:

app/about/page.tsx

import generateSEO from "@/Seo/generateSEO";
export const metadata = generateSEO({
  title: "About Me | Aminul Portfolio",
  description: "Learn more about Aminul Islam, a full-stack web developer.",
  url: "https://aminul.tech/about",
});
export default function AboutPage() {
  return <div>About Page</div>;
}

Next.js automatically injects meta tags into the HTML.

5. Dynamic SEO for Dynamic Routes

Dynamic metadata is essential for blogs, products, and dynamic pages.

Example:

app/blog/[slug]/page.tsx

import type { Metadata } from "next";
import generateSEO from "@/Seo/generateSEO";
type Props = {
  params: {
    slug: string;
  };
};
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await fetch(
    `https://api.example.com/posts/${params.slug}`
  ).then((res) => res.json());
  return generateSEO({
    title: post.title,
    description: post.excerpt,
    url: `https://aminul.tech/blog/${params.slug}`,
    images: [post.image],
  });
}
export default function BlogPost({ params }: Props) {
  return <div>Blog Post: {params.slug}</div>;
}

This ensures each blog post has unique SEO metadata.

6. Root Layout SEO Setup

Root layout defines global HTML structure.

app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <link rel="icon" href="/logo.svg" />
        <link rel="canonical" href="https://aminul.tech" />
      </head>
      <body>{children}</body>
    </html>
  );
}

7. Structured Data (JSON-LD) for Better SEO

Structured data helps Google understand your content better.

Example:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      headline: post.title,
      description: post.excerpt,
      image: post.image,
      author: {
        "@type": "Person",
        name: "Md Aminul Islam",
      },
      datePublished: post.date,
    }),
  }}
/>

Benefits:

Rich snippets in Google

Better ranking

Better visibility

8. SEO for E-Commerce Products

Example dynamic product SEO:

export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.slug);
  return {
    title: product.name,
    description: product.description,
    openGraph: {
      title: product.name,
      description: product.description,
      images: [product.image],
      type: "product",
    },
    twitter: {
      card: "summary_large_image",
      title: product.name,
      images: [product.image],
    },
  };
}

SEO Checklist for Next.js

Always implement these:

Metadata API

Sitemap

robots.txt

OpenGraph tags

Twitter cards

Canonical URLs

Structured Data

Dynamic metadata

Aminul Islam

Complete Next.js SEO Guide: Metadata, Sitemap, Robots, and Dynamic SEO

1. Creating a Sitemap in Next.js

2. Creating robots.txt in Next.js

Example:

This generates:

3. Creating a Reusable SEO Function

4. Static Page SEO Example

5. Dynamic SEO for Dynamic Routes

6. Root Layout SEO Setup

7. Structured Data (JSON-LD) for Better SEO

8. SEO for E-Commerce Products

SEO Checklist for Next.js

Bash Terminal Cheat Sheet

Next js metadata not working?

My Essential VS Code Extensions

Aminul Islam

Complete Next.js SEO Guide: Metadata, Sitemap, Robots, and Dynamic SEO

1. Creating a Sitemap in Next.js

2. Creating robots.txt in Next.js

Example:

This generates:

﻿

3. Creating a Reusable SEO Function

4. Static Page SEO Example

5. Dynamic SEO for Dynamic Routes

6. Root Layout SEO Setup

7. Structured Data (JSON-LD) for Better SEO

8. SEO for E-Commerce Products

SEO Checklist for Next.js

Bash Terminal Cheat Sheet

Next js metadata not working?

My Essential VS Code Extensions