Next.js SEO Checklist for App Router Projects

Shipping a fast interface is not enough if search engines cannot understand the page, resolve canonical URLs, or pick up meaningful metadata. That is why every production launch should include a Next.js SEO checklist.

If you are already thinking about component architecture and render efficiency, posts like How to Optimize React Performance and Advanced React Hooks Explained cover the frontend side. This guide focuses on the technical SEO layer in modern Next.js applications, especially when you are using the App Router.

The goal here is practical App Router SEO. You will not find a generic marketing checklist. You will find the core implementation decisions that help search engines crawl pages correctly, pick the right titles and descriptions, and understand what each route is about.

1. Start with a production-minded Next.js SEO checklist

For most projects, the SEO baseline should be part of the initial app setup, not a launch-week patch. A reliable checklist usually covers:

unique titles and descriptions for each route
canonical URLs
crawlable internal links
structured data where it helps
clean robots and sitemap output
fast loading, accessible markup, and stable content

In a Next.js codebase, the mistake I see most often is handling this partially. Teams add a homepage title and maybe a sitemap package, but dynamic routes still share the same metadata, pagination is unclear, and important pages are not linked from anywhere meaningful.

If you want a dependable Next.js SEO checklist, treat metadata, route structure, and internal linking as part of the application architecture.

2. Use the Next.js Metadata API as your default foundation

The Next.js Metadata API is the cleanest place to define SEO defaults in App Router projects. It gives you a typed, route-aware way to manage titles, descriptions, canonicals, Open Graph values, and more without scattering tags across custom <Head> usage.

At the layout level, define global defaults that are safe across the whole site:

// app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  metadataBase: new URL('https://keval.site'),
  title: {
    default: 'Keval Lad | React Developer | Full Stack Engineer',
    template: '%s | Keval Lad',
  },
  description:
    'React, Next.js, security, and AI engineering notes from Keval Lad.',
  alternates: {
    canonical: '/',
  },
  openGraph: {
    type: 'website',
    siteName: 'keval.site',
    url: 'https://keval.site',
  },
  robots: {
    index: true,
    follow: true,
  },
};

This ensures every route starts from a sensible baseline and avoids duplicated boilerplate in page files.

If your site includes a blog, portfolio, and project detail pages, you still want route-specific metadata on top of these defaults. That is where generateMetadata becomes important.

3. Add route-specific metadata for App Router SEO

Static metadata in layout.tsx is not enough for articles, project pages, product detail routes, or case studies. Search engines need page-level context.

For a blog post route, use the slug to look up content and generate metadata from the source:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: BlogPostPageProps): Promise<Metadata> {
  const post = await getPostBySlug(params.slug);

  return {
    title: post.frontmatter.title,
    description: post.frontmatter.description,
    alternates: {
      canonical: `/blog/${post.frontmatter.slug}`,
    },
    openGraph: {
      title: post.frontmatter.title,
      description: post.frontmatter.description,
      url: `/blog/${post.frontmatter.slug}`,
      type: 'article',
    },
  };
}

This is the point where App Router SEO usually becomes either strong or fragile. If metadata is generated from the actual content model, pages stay aligned. If metadata is hardcoded separately, titles drift, descriptions get stale, and canonical URLs are forgotten.

For content-heavy sites, I also recommend mapping primary and secondary queries into the frontmatter. That makes keyword alignment easier without forcing awkward repetition in the body copy.

4. Normalize your title, description, and slug conventions

A good Next.js SEO checklist is not only about APIs. It also needs content rules.

For each page, confirm:

the title targets one clear primary query
the description explains what the page helps the reader do
the slug is short, readable, and stable
headings support the same topic instead of drifting into adjacent themes

For example, if the primary query is nextjs seo checklist, your title, opening paragraph, and at least one subheading should naturally reinforce that phrase. Secondary queries such as nextjs metadata api and app router seo can appear where they fit the implementation discussion.

Avoid these common mistakes:

writing vague titles like SEO Tips for Developers
changing slugs after publishing without redirects
stuffing several unrelated keywords into one article
using the same description across multiple routes

The same editorial discipline that helps with React Folder Structure for Scalable Applications also helps with SEO. Clear boundaries improve discoverability, whether you are organizing files or structuring content.

5. Set canonical URLs and metadata base correctly

Canonical mistakes are easy to miss and expensive to leave in place. If a page can resolve through inconsistent hostnames, query parameters, or duplicated paths, search engines may split ranking signals.

In App Router projects, metadataBase plus route-level alternates.canonical is a reliable default. The important detail is consistency. Make sure the canonical points to the exact preferred URL version.

If you support filtering or sorting with query params, do not blindly canonicalize every variant to itself. Decide whether those pages are real indexable destinations or just UI states.

A simple rule:

canonicalize evergreen content pages to their clean URL
noindex thin utility pages when needed
only expose alternate indexed URLs when they have standalone search value

That decision matters more than the plugin choice.

6. Generate robots.txt and sitemap.xml from the app

Technical SEO basics still matter. Search engines need an accurate sitemap and clear crawl instructions.

In modern Next.js, you can generate both directly from the app layer or via a package such as next-sitemap. The implementation matters less than the output quality. Whatever route generation approach you use, verify that:

important pages are included
excluded pages stay excluded
canonical URLs match the sitemap entries
the production domain is correct

If you prefer native route files, the pattern is straightforward:

// app/sitemap.ts
import type { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://keval.site/',
      lastModified: new Date(),
    },
    {
      url: 'https://keval.site/blog',
      lastModified: new Date(),
    },
  ];
}

For blogs and project directories, generate these entries from your content source so they stay fresh automatically.

7. Add structured data where intent is clear

Structured data is not a ranking trick. It is a clarity tool. If you publish articles, projects, FAQs, or profiles, schema can help search engines understand the page entity more precisely.

For a blog post page, article schema is usually enough:

const articleSchema = {
  '@context': 'https://schema.org',
  '@type': 'BlogPosting',
  headline: post.title,
  description: post.description,
  datePublished: post.date,
  author: {
    '@type': 'Person',
    name: 'Keval Lad',
    url: 'https://keval.site',
  },
  mainEntityOfPage: `https://keval.site/blog/${post.slug}`,
};

Inject it as JSON-LD in the article route and keep it synced with the same content source that powers the page metadata. Do not maintain one version for the UI and another for schema.

8. Treat internal linking as part of App Router SEO

Internal linking is one of the most overlooked items in any Next.js SEO checklist. A technically correct page with weak internal links is still harder for users and crawlers to discover.

I use three simple rules:

Link newer posts to closely related older posts.
Link older evergreen posts forward to newer supporting content.
Link informational posts to relevant conversion or proof pages such as Projects.

That is exactly why this article links to related React architecture and performance posts. Those connections help readers continue the topic journey and help search engines understand the semantic relationship between pages.

In App Router projects, use normal <Link> components and keep anchor text descriptive. Avoid generic text like read more when the destination topic can be named directly.

9. Verify the pages that usually get missed

Teams often check the homepage and one blog post, then assume SEO is done. The pages that tend to break are:

dynamic content routes
paginated listings
tag or category pages
search pages
draft previews
localized or alternate-domain pages

Run through those deliberately. Open the rendered HTML, inspect metadata output, and confirm the page is indexable only when it should be.

If the page depends on asynchronous data, make sure the metadata logic can resolve that data consistently. Missing descriptions and fallback titles usually show up there first.

10. Measure SEO outcomes alongside performance

Good SEO and good frontend engineering usually reinforce each other. If your page ships less JavaScript, renders stable content, and exposes meaningful metadata early, it is easier to crawl and easier to use.

That does not mean performance automatically solves SEO. It means your process should evaluate both together:

Lighthouse or Core Web Vitals for user-facing quality
metadata output for technical correctness
internal links for crawl paths
keyword placement for topical alignment

For portfolio and content sites, that combined review is often enough to catch the highest-value issues before launch.

11. A practical launch pass for Next.js SEO

Before publishing a new route, I recommend this short final pass:

confirm the slug is unique and stable
confirm the title targets one primary query
confirm the description is specific and human-readable
confirm the canonical URL is correct
confirm the page is reachable through internal links
confirm sitemap and robots output match production intent
confirm article or page schema uses the same source data

This prevents the majority of technical SEO mistakes I see in modern React and Next.js projects.

12. Conclusion

The best Next.js SEO checklist is the one your team can apply consistently on every route, not the one with the most bullets. In App Router projects, that usually means relying on the Next.js Metadata API, setting stable canonical conventions, generating crawl-friendly sitemaps, and making internal links part of the publishing workflow.

If you build content or portfolio sites in Next.js, treat App Router SEO as an engineering system. The payoff is cleaner metadata, stronger discoverability, and less launch-week cleanup.