Next.js 15 App Router SEO Checklist: Metadata, Static Export & OpenGraph Best Practices

Next.js 15 & Modern Search Engine Optimization

Next.js 15 brings significant architectural advancements for search engine optimization, including asynchronous request APIs, React 19 compiler support, and enhanced static site generation (SSG). When configured correctly, Next.js provides search engines with pre-rendered HTML, instantaneous Time to First Byte (TTFB), and automated OpenGraph social previews.

Essential Next.js 15 SEO Architecture Checklist

1. Awaiting Dynamic Params in Next.js 15

In Next.js 15, dynamic route parameters (params and searchParams) are treated as asynchronous Promises. To generate accurate metadata without runtime warnings, always await the parameters:

import type { Metadata } from 'next';
import { getPostBySlug } from '@/lib/posts';

export async function generateMetadata({
  params
}: {
  params: Promise<{ category: string; slug: string }>;
}): Promise {
  const { slug } = await params;
  const post = getPostBySlug(slug);

  if (!post) {
    return {
      title: 'Page Not Found | DrillSEO',
      robots: { index: false, follow: false }
    };
  }

  return {
    title: `${post.title} | DrillSEO`,
    description: post.excerpt,
    alternates: {
      canonical: `https://www.drillseo.com/${post.category}/${post.slug}`
    },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.featuredImage, width: 1200, height: 630, alt: post.title }]
    }
  };
}

2. Static Export with Full URL Coverage

When using static export (output: 'export' in next.config.js), every dynamic route must export a generateStaticParams function. This informs the Next.js compiler to generate HTML files for all published articles during the build step:

export function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({
    category: post.category,
    slug: post.slug,
  }));
}

3. Core Web Vitals Optimization in Next.js

• Image Optimization: Utilize Next.js <Image> component or static WebP assets with explicit width, height, and priority for hero images to prevent Cumulative Layout Shift (CLS).
• Font Preloading: Use next/font/google to automatically inline critical font CSS and eliminate Flash of Unstyled Text (FOUT).
• Script Loading Strategies: Load Google Analytics or third-party tracking scripts with strategy="afterInteractive" or strategy="lazyOnload" to protect Interaction to Next Paint (INP).