A Technical SEO Checklist for Next.js Sites

Search engines cannot rank pages they cannot find, parse, or understand. For Next.js sites, the App Router gives you powerful primitives — but only if you wire them up correctly. This checklist walks through every layer of technical SEO: metadata, crawlability, structured data, and performance signals that influence ranking.

Metadata with the Next.js Metadata API

The App Router replaced next/head with a typed metadata export. Every route segment should export either a static metadata object or a generateMetadata function.

tsx
// app/notelogs/[slug]/page.tsx
import type { Metadata } from 'next';

export async function generateMetadata(
  { params }: { params: { slug: string } }
): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.publishedAt,
      url: `https://yourdomain.com/notelogs/${post.slug}`,
    },
    alternates: {
      canonical: `https://yourdomain.com/notelogs/${post.slug}`,
    },
  };
}

Key rules:

• Every page needs a unique title (50-60 characters) and description (150-160 characters).
• Always set a canonical URL to prevent duplicate-content penalties when query strings vary.
• OpenGraph tags control how links appear when shared — treat them as a second set of meta you maintain in parallel.

Sitemaps

Next.js can generate a sitemap from a app/sitemap.ts file that returns a typed array. This is preferable to a static XML file because it stays in sync with your data.

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

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();
  const postEntries = posts.map((p) => ({
    url: `https://yourdomain.com/notelogs/${p.slug}`,
    lastModified: new Date(p.updatedAt),
    changeFrequency: 'weekly' as const,
    priority: 0.7,
  }));

  return [
    { url: 'https://yourdomain.com', priority: 1.0 },
    { url: 'https://yourdomain.com/projects', priority: 0.8 },
    ...postEntries,
  ];
}

Submit the sitemap URL (/sitemap.xml) in Google Search Console and Bing Webmaster Tools. Resubmit after publishing a significant batch of new content.

robots.txt

Next.js also supports a typed app/robots.ts:

ts
export default function robots() {
  return {
    rules: { userAgent: '*', allow: '/', disallow: '/api/' },
    sitemap: 'https://yourdomain.com/sitemap.xml',
  };
}

Block /api/ routes so crawlers do not waste budget on JSON endpoints. Do not accidentally block CSS or JS files — Googlebot renders pages and needs those assets.

Structured Data (JSON-LD)

Structured data helps Google understand the type of content on a page and can trigger rich results (article bylines, breadcrumbs, FAQ dropdowns).

For a blog post, add a BlogPosting schema as a <script type="application/ld+json"> tag. In Next.js App Router, inject it directly in the page component:

tsx
export default function PostPage({ post }: { post: Post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.excerpt,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: { '@type': 'Person', name: 'Manikanta Ketha', url: 'https://yourdomain.com/about' },
  };
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* page content */}
    </>
  );
}

Validate structured data with Google's Rich Results Test before deploying.

Crawlability and Rendering

Server-Side Rendering vs Static Generation

For SEO-critical pages, prefer static generation (generateStaticParams) or server-side rendering. Client-only rendering means Googlebot may index an empty shell if JavaScript execution times out. Review how SSR and SSG differ in Next.js to make the right call per route.

Canonical Tags and Pagination

Paginated listing pages (/notelogs?page=2) must either:

• Include a canonical pointing to page 1 (collapses link equity), or
• Have unique metadata per page (preferred for content-heavy paginations).

Never use noindex on pagination pages unless the content is truly thin.

Core Web Vitals as Ranking Signals

Google uses Core Web Vitals (LCP, INP, CLS) as a ranking tiebreaker. See Core Web Vitals in 2026 for actionable optimization steps. From a pure SEO angle:

• LCP: Prioritize hero images with priority on next/image. Use ISR or static generation so the server returns content fast — see caching strategies for CDN, ISR, and Redis.
• CLS: Always specify width and height on images. Reserve space for font-swaps with font-display: optional.
• INP: Reduce long tasks. Code-split aggressively.

Quick-Reference Checklist

• [ ] Every page has a unique <title> and <meta name="description">
• [ ] Canonical URLs set on all pages (especially paginated and filtered views)
• [ ] app/sitemap.ts returns all indexable URLs; submitted to Search Console
• [ ] app/robots.ts blocks /api/ and other non-content routes
• [ ] JSON-LD structured data on article and project pages
• [ ] OpenGraph and Twitter card tags populated
• [ ] No orphan pages — every page is reachable via internal links
• [ ] Core Web Vitals pass on mobile in Search Console
• [ ] HTTPS everywhere; no mixed-content warnings
• [ ] next/image used for all content images with explicit dimensions

Conclusion

Technical SEO in Next.js is mostly a matter of using the framework's built-in primitives correctly. The Metadata API, typed sitemaps, and server rendering eliminate most common pitfalls. Wire these up once, validate with Search Console, and then focus on content quality — that is what moves the needle over time. Check out how browser caching works and why it matters for SEO as a natural next step, and browse the projects page to see these patterns applied in a real production Next.js site.